# Flood type

A two-line word that falls in, floods the frame and tumbles out. Live at https://design.how/vault#flood-type.

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

```sh
npx skills add https://design.how/vault/flood-type
```

## What it is

Six two-line words, each with its own pair of high-chroma colours, take turns on a wide card: Full Bleed in lime on deep green, then Tight Tracking, Hard Return, Grid Systems, Loose Leading and Type Setting. The lockup is a grotesque at its regular weight, sized so the longer line fills 68 percent of the card's width, its cap held under 30 percent of the height, with lines a hair more than a cap apart and tracking pulled in. Two flat colours, no blur and no gradient: every effect is a per-letter affine transform over a handful of global ramps.

One word is 62 ticks of a 30 tick a second timeline, about two seconds, read continuously so it plays at the screen's rate. The letters fall in from 1.3 half-heights above over 14 ticks, staggered by 3, each turning from up to 95 degrees edge-on to face front, the turn lagging the drop so it resolves in view. The lockup holds dead still for 10 ticks. Then the zoom: over 22 ticks the scale follows a measured table that hangs, snaps through the middle steeper than any cubic-bezier, overshoots a few percent and pins at 2.2. The scale stops; the exit is translation and rotation only. Over the last 15 ticks the word falls on an exponential ramp out of the bottom, drifting sideways a little so the frame empties.

Each letter gets its own settle angle drawn as 95 times a uniform sample to the power 2.6, so most barely turn and one or two lie on their side, plus an escape spin of up to 130 degrees and a tumble of up to 200 about its vertical axis, drawn as a horizontal scale by its cosine. Each letter carries a depth offset of up to 8 percent that changes its size but never its position, and the draw is depth-sorted. As the word floods, every glyph squeezes 10 percent of its own advance, so the frame fills with ink and stays readable. Fast letters leave three flat stamped copies back along their velocity, only above a measured speed, about one frame in ten.

While the pointer is over the card during the hold, the lockup leans up to 5.5 percent of the card toward it, easing with a 130ms time constant, and the launch waits up to 34 more ticks for it to leave. The lean fades out as the zoom starts, so the flood always fires from a centred lockup.

## How it works

- Solve the font size so the longer line hits TARGET_WIDTH of the card, capped by MAX_CAP, and pivot every glyph on its own actualBoundingBox centre.
- Advance a tick clock at FPS times real seconds and sample the ENTER, SCALE, ROT and FALL tables at fractional positions.
- Draw each letter under its own transform: position from the shared global scale, size from that scale times its depth offset, rotation from its settle angle times the rotation ramp plus its escape spin, and a horizontal scale by the cosine of its tumble.
- Draw rarely-large rotations by sampling SPIN_MAX times a uniform to the power SPIN_TAIL, once per letter per word.
- Depth-sort the letters every frame and add SMEAR_STEPS flat copies back along the velocity of any letter faster than SMEAR_MIN_SPEED.
- Lean the lockup toward the pointer during the hold only, and stretch the hold up to HOLD_STRETCH ticks while it stays.
- Under reduced motion, draw the middle of the hold once: the settled lockup of the first word.

## What you can change

- `PRESETS` (six words, each with a ground, an ink and a spin): The words and their colour pairs. spin scales how wild the letters turn; below about 0.5 it becomes a plain zoom.
- `PEAK_SCALE` (2.2): How far the word floods past the frame.
- `SPIN_MAX` (95): The largest settle angle a letter can draw, degrees.
- `SPIN_TAIL` (2.6): How strongly the angles bias toward small; 1 is uniform.
- `HOLD_TICKS` (10): How long the lockup holds still before the flood.
- `PULL` (0.055): How far the lockup leans toward the pointer during the hold.
- `FONT_VAR` (--visual-grotesk): The CSS variable holding the font family. A light weight is the look.

Last updated: 2026-11-02