---
title: Motion
description: Drop-in animated marks and loaders that inherit color and respect reduced motion.
sidebar:
  icon: sparkles
  order: 5
---

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

<MotionPreview kind="mark" />

`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

```html
<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):

```html
<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.

:::tip
Color comes from CSS. Set `color` on the host. Do not recolor individual SVG paths.
:::

## Loader

<MotionPreview kind="loader" />

`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.

```html
<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](/showcase).

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