# Fade motion

A pixel word trailing into light, its fade built from two hundred overlapping copies. Live at https://design.how/vault#fade-motion.

Install the skill, which carries the template, the brief and a check script:

```sh
npx skills add https://design.how/vault/fade-motion
```

## What it is

One lowercase word, "motion", in a bitmap pixel face, sitting a little above centre with a long trail of light falling away beneath it into the distance. On a dark preset the trail is the word's own glow added up, like a long exposure; on a light preset the same trail is ink on paper. The card runs itself: a ghost cursor fidgets near the word so it turns and leans, and every two seconds the colours wash in about a third of a second to the next of seven presets. A real pointer takes over from the ghost; the word turns to face it and the trail reels in as it comes close.

Nothing is blurred. The trail is accumulation: after k overlapping copies at alpha a, coverage is 1 - (1 - a)^k, which falls fast and then leaves a long tail, and that law is the whole look. 210 copies at a one-pixel step and an alpha of 0.019 overlap so densely they read as one ramp. The fragment shader runs it backwards: each pixel marches up the trail direction and counts how many copies would have covered it, so it is one draw call whose cost does not depend on the copy count.

Depth is a real perspective divide with a focal length of 1.6 canvas heights, so the trail tapers toward a vanishing point instead of shearing, and each copy widens a little as it falls. The tail snakes with a turbulence whose phase advances per copy, the hue drifts 26 degrees from the word to the end of the trail, and a small per-channel offset into the ramp fringes the thin end. The word itself is three layers, a wide bleed, a tight halo and a hot core, over a soft pool of light that tracks the pointer a little, inside a vignette.

## How it works

- Rasterise the word once into a full-canvas white-on-transparent mask at the anchor, re-baking only when the size or the measured font changes.
- Draw one full-screen triangle; for each pixel, march back along the trail direction through a perspective divide and accumulate coverage as 1 - (1 - a)^k.
- Colour the trail from an HSL ramp that drifts from the word to the tail, with a small per-channel offset for the fringe and a per-copy turbulence that snakes the tail.
- Composite additively on dark presets and subtractively, as ink density, on light ones; lay the bleed, halo and core of the word on top.
- Ease the lean toward the pointer and the trail length by distance, exponentially in seconds; with no pointer, drive a ghost cursor from three incommensurate sines per axis in a tight box around the word.
- Cycle presets on a timer with a short crossfade, and report the live background so the box behind the canvas follows it.
- Cap the pixel ratio at 1.5, stop the loop on webglcontextlost, and on destroy delete the program, buffer and mask texture and lose the context.
- Under reduced motion, draw one still frame of the first preset: no ghost cursor and no colour cycle.

## What you can change

- `WORD` (motion): The word. Short and lowercase reads best; descenders give the trail something to start from.
- `DEFAULTS.echoes, DEFAULTS.step` (210, 1.0): How many copies build the trail and how far apart they sit. Past about 2 px they stop overlapping and read as ghosts.
- `DEFAULTS.alpha` (0.019): Per-copy opacity. The trail builds from overlap, so keep it low.
- `DEFAULTS.angle` (Math.PI / 2): The trail direction. Straight down by default.
- `DEFAULTS.hueShift` (26): How far the hue drifts from the word to the tail, in degrees.
- `DEFAULTS.turbulence, DEFAULTS.spread` (16, 0.22): How much the tail wavers, and how much each copy widens as it falls.
- `DEFAULTS.fringe` (0.045): Per-channel offset at the thin end of the trail. Above about 0.1 it reads as a mistake.
- `PALETTES` (seven presets, add or subtract): The colour worlds the card washes between. A light preset must use subtract mode.

Last updated: 2026-11-02