# Word carousel

Four words on a three-slot conveyor that slams one slot left every half second, with a fourth hidden tiny behind the big one. Live at https://design.how/vault#word-carousel.

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

```sh
npx skills add https://design.how/vault/word-carousel
```

## What it is

Four words, Type, Grid, Color and Motion, sit on white in a regular-weight grotesque. Three are visible at once, a small word at 0.235 of the width, a big word at 0.49 and a small word at 0.745, and the fourth is parked at 0.145 scale directly behind the big word at 0.46, drawn underneath it at 40% alpha so it shows only through the letter gaps. Scales are 1, 0.35 and 0.145 of a font sized 107/450 of the card's height.

Every word hangs from one optical middle. Its baseline sits half a cap height below the card's centre at its own scale, so three sizes read as one quiet line. Colour follows size, mixing from a pale blue at the small slots to a deep ultramarine at the centre on the square of the scale, so the big word is unmistakably the deep tone and the gradient lives at the edges.

The loop is 1.97 seconds of four uneven steps, starting at 0.36, 0.78, 1.23 and 1.59 seconds, so one dwell holds visibly longer across the seam. Each word moves from one role to the next. The word leaving the left slot vanishes in one frame at the cut and reappears as the hidden tiny 0.09 seconds later. The departing words and the arriving word use two different measured eases, played through a monotone spline, and both tails are still creeping when the next step winds up, so the strip never fully stops. The arriving word overshoots the centre by 0.004 of the width and returns.

Motion blur is stamped, not filtered. Pose is a pure function of time, so the engine takes each word's pose now and 33 milliseconds ago and stamps it 4 to 18 times along that distance, more when it travels further, with alpha weighted toward the trailing edge as speed rises. A word below 0.3 scale, or one moving under 8/800 of the width per shutter, draws once and sharp.

## How it works

- Size the font as FONT times the canvas height and set every word's baseline at half the height plus half its scaled cap height.
- Give each word a role from (word - step) mod 4, and move it toward the next role's slot and scale through the arrive or depart ease.
- Find the step in flight from STEPS minus WINDUP, so consecutive steps chain with their tails still moving.
- Pop the left word out at the cut and back in as the hidden tiny after POP_IN_DELAY; draw the tiny first and the big word last.
- Mix the colour from INK_FAR to INK on the square of the normalised scale.
- Stamp moving words along the distance between their pose now and 33ms ago, the stamp count rising with travel.
- Under reduced motion, draw t = 0.15 once: the row settled.

## What you can change

- `WORDS` (Type, Grid, Color, Motion): The four words. Exactly four, one per role.
- `INK, INK_FAR` (#002fa7, #7fb2ff): The centre tone and the tone at the small slots.
- `BG` (#ffffff): The ground.
- `FONT_FAMILY` (sans-serif): The family the words are drawn in. Any plain grotesque works.
- `SCALE_SMALL, SCALE_TINY` (0.35, 0.145): The side words and the hidden word, as fractions of the big word.
- `TINY_ALPHA` (0.4): How much the hidden word shows through the big one.
- `BLUR_STAMPS_MIN, BLUR_STAMPS_MAX` (4, 18): The range of stamps per moving word.

Last updated: 2026-11-02