Asset showcase

See the brand marks, live motion, crests, figurines, and typography before using them.

Explore the actual CDN assets here, then open each guide for its files and copyable code. All previews are part of this Blume website.

The identity in motion

The wordmark draws into the portrait and back continuously here, without holds between states. Change the surface to compare cream, olive, or orange and charcoal, or turn animation off to inspect the static mark. Reduced-motion preferences are respected. The drop-in below retains its original timing.

SurfaceSage on creamOlive on creamCream on oliveOrange on charcoalCharcoal on orangeAnimate

<shaughv-mark style="display:block;width:180px;height:122px;color:#5b8a5b" aria-label="SHAUGHV"></shaughv-mark>
<script src="https://cdn.shaughv.com/js/animated-brand-mark.js"></script>

Motion guide and static variants · Original wordmark SVG

Static marks and favicons

Copy the theme-aware favicon pair.

Shaughnessy crests

The brand guide has both original downloads. The portfolio footer example pairs the main mark with the separate, strengthened footer crest at the source layout’s proportions.

Portrait loader

The lenses fill and drain before the portrait becomes a soft blob and returns. The preview uses the published loader; its timing and geometry stay intact. Turn animation off to show the portrait at rest.

SurfaceSage on creamOlive on creamCream on oliveOrange on charcoalCharcoal on orangeAnimate

<shaughv-loader style="color:#5b8a5b;height:120px"></shaughv-loader>
<script src="https://cdn.shaughv.com/js/shaughv-loader.js"></script>

Loader integration and reduced motion.

Figurines

<img src="https://cdn.shaughv.com/brand/shaughv/figurines/transparent/figurine-look-at-this.webp" alt="SHAUGHV pointing at his vintage Mac" />

More figurines and image usage.

Type you can try

Makira and Paper Mono are the default pair, with both available for headings, body text, and interfaces. Choose any hosted family, enter your own text, and adjust its weight. Use Share this section to copy a link that restores your selection and sample.

Custom cursor

Try the custom cursor and its color controls on its dedicated page. It preserves the emmetts.dev circle, responsive spring, and hover growth at 90% opacity. Orange, vintage sage, black, white, and custom colors share the same motion. This showcase keeps your normal cursor.