# Slide stack

Five dark blocks slide between two stops a beat out of step, and the orange behind them is traced from where they are. Live at https://design.how/vault#slide-stack.

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

```sh
npx skills add https://design.how/vault/slide-stack
```

## What it is

Five identical near-black blocks sit in a stack on a light grey ground, each sliding between a left and a right stop. The vertical measures come from a 720 square: blocks 121 tall on a 132.5 pitch, so the gutters are a thin 11.5 and the stack reads as one mass with slots cut in it. Across the wide card each block takes 0.29 of the drawn width, which keeps the reference's ratio of block to travel, a block moving a little more than its own length.

Stagger is the whole piece. Every row does the identical move, offset by -0.083 of a cycle from the row above. The sign matters: each row runs slightly ahead of the one below, so the wave climbs the stack, and a twelfth of a cycle keeps neighbouring rows overlapping in flight so it reads as one gesture. A traverse takes 0.306 seconds and a dwell 0.316, so the pause is a touch longer than the move and the piece reads as a sequence of arrivals.

The move is 1 - (1 - smoothstep(k))^2: a clean departure with no corner, ground covered early, and a long closing creep, monotonic with no overshoot, because heavy blocks arriving at hard stops do not bounce.

The orange is not an animated shape. It is the convex hull of the twenty block corners, filled under the blocks, so the slanted silhouette reshapes continuously as the cascade travels. Layers sit on that skeleton in draw order: a hairline wake where the hull was eleven frames ago, the hull filled with a per-row heat gradient that warms toward magenta and gold with speed and with the pointer, blur stamped back along each block's travel, the hard blocks, labels that name where each block goes next and swap corners when it turns, and a fixed grain. A mouse near a row lets it lean up to 0.028 of the square past its stop.

## How it works

- Measure every vertical size as a fraction of the card's height and every horizontal one as a fraction of its width.
- Give row r the phase t / CYCLE + r * STAGGER, wrapped to 0..1, split into right traverse, right dwell, left traverse, left dwell.
- Ease each traverse with 1 - (1 - smoothstep(k))^2, and draw the block at the eased position.
- Collect the twenty block corners, take their convex hull and fill it as the accent before drawing the blocks.
- Smear a moving block back along its last frame's travel with BLUR_TAPS copies at falling alpha; never smear a parked one.
- Ease the pointer's pull and each row's light toward their targets every frame, so nothing snaps to the cursor.
- Under reduced motion, draw t = 0 once.

## What you can change

- `STAGGER` (-0.083): Each row's offset from the row above, in cycles. Flip the sign and the wave falls instead of climbing.
- `TRAVERSE, DWELL` (0.306, 0.316): Seconds per move and per pause.
- `GROUND, BLOCK, ACCENT` (#dedede, #191919, #f0461e): The three flat colours.
- `HUE_MID, HUE_HOT` (#ff2d6f, #ffd84a): Where the accent warms to with speed and under the pointer.
- `LABEL_TO_RIGHT, LABEL_TO_LEFT` (RIGHT, LEFT): The labels, naming where each block goes next.
- `MAG_PULL` (0.028): How far a row leans toward the pointer past its stop. 0 turns it off.
- `FONT_VAR` (--visual-sans): The CSS variable holding the label font family.

Last updated: 2026-11-02