Motion

Drop-in animated marks and loaders that inherit color and respect reduced motion.

Two browser-ready custom elements cover the animated wordmark loop and the official loader. Both inherit currentColor and skip motion when the visitor asks for less of it.

Animated brand mark

SurfaceSage on creamOlive on creamCream on oliveOrange on charcoalCharcoal on orangeAnimate

js/animated-brand-mark.js defines <shaughv-mark>. The loop is:

1. Wordmark holds
2. Undraws
3. Portrait (mustache + glasses) draws in
4. Undraws
5. Wordmark returns

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

Hold a static frame with data-static (the footer of the CDN website does this):

<shaughv-mark data-static aria-label="SHAUGHV"></shaughv-mark>

A React source port also ships at js/react/AnimatedBrandMark.jsx for projects that already own the component tree. The vanilla custom element is the default for HTML pages.

Loader

SurfaceSage on creamOlive on creamCream on oliveOrange on charcoalCharcoal on orangeAnimate

js/shaughv-loader.js defines <shaughv-loader>. The portrait fills, drains, and morphs through a goo filter into a blob, then returns. Timing, paths, and geometry are part of the recipe.

<shaughv-loader style="color:var(--accent);height:120px"></shaughv-loader>
<script src="https://cdn.shaughv.com/js/shaughv-loader.js"></script>

The loader will fetch Anime.js from jsDelivr if the page has not already loaded it. This page previews the published drop-ins with their original timing. The showcase also offers a continuous brand-mark preview without holds between states.

Reduced motion

Both drop-ins honor prefers-reduced-motion: reduce. The mark stays on the static wordmark. The loader does not run the morph loop. Keep that behavior if you wrap either element.

Preview controls

Choose a cream-and-sage, cream-and-olive, or orange-and-charcoal surface to check color inheritance. Turn Animate off to hold a static mark. The controls also respect your system reduced-motion preference. More brand examples live in the asset showcase.

For the optional pointer interaction from emmetts.dev, see the custom cursor. Its live guide is the only CDN page that replaces the normal cursor.