Stamp type

Four lines on highlight bars hop in, park and scatter, each leaving blocks of flat colour behind.

npx skills add https://design.how/vault/stamp-type

Installs the template, the brief and a check script as one skill.

What it is

A looping kinetic-type poster on a 600 unit composition square, scaled to the card's height. Four lines of type in a grotesque at semibold, about 51 units of cap, each sit on a flat highlight bar, a rounded rectangle unioned with the text stroked fat in the bar colour, which is where the bumps under the descenders come from. A world is four flat colours and four lines: an electric blue field with spring green bars and black type first, then aubergine and coral, slate and butter, pine and mint, and a near-white field with ultramarine bars and white type. A line too long for its parked spot is condensed horizontally, never below 0.72, so all four lines stay one size.

The choreography is data: four fixed tracks of breakpoints, each a frame and the line's top-left, linearly interpolated, every hop moving along one axis only, never diagonal. The jagged pacing inside a hop is the easing; a smooth curve reads worse. Lines fly in over the first 28 frames, park for 48, 2.4 seconds at 20 frames a second, and scatter off by frame 93, moving on a two-frame cadence so consecutive frames often repeat, which gives the print-like snap.

One mechanism carries everything else. Whenever a line moves during a step, it stamps its whole silhouette, bar and type, where it just was, in the bar colour. A stamp sits unchanged for 16 frames, 0.8 seconds, then vanishes all at once, no fade, so it reads as printed residue rather than motion blur. The stamps are computed fresh each frame from the tracks, not accumulated, so a resize, a resume or a still always shows exactly the right residue.

The next world starts 12 frames before the last one ends. For that window two worlds are on stage, the old lines scattering in their bar colour and the new ones flying in with theirs, both leaving trails, and the field colour swaps five frames into the new pass, under the densest frame of it. The colour flood between worlds is the mechanism itself, with no transition code.

How it works

  • Scale the 600 unit composition square to the card's height and centre it.
  • Measure each line's ink box from the live face and condense it horizontally to the room its track leaves at the parked position, down to CONDENSE_MIN.
  • Draw each bar as a rounded rect around the ink box unioned with the text stroked BAR_STROKE wide in the bar colour, then the type on top.
  • Place each line on its TRACKS breakpoints by linear interpolation of the frame, stepped on a STEP-frame cadence, with the park retimed to PARK_FRAMES.
  • For each frame, stamp every line's silhouette at each step within the last STAMP_TTL frames in which it moved, and draw those stamps before the lines.
  • Start each pass PASS_OVERLAP frames before the last one ends and swap the field colour FIELD_SWAP frames into it.
  • Tick at TICK_MS and redraw only when the frame changes.
  • Under reduced motion, draw the first world parked, halfway through its read.

What you can change

  • WORLDS (five worlds, each a field, a bar, an ink and four lines): The palettes and the words. Keep the field and bar far apart in hue and value, and the ink near black or white.
  • PARK_FRAMES (48): How long the four lines sit still to be read.
  • STAMP_TTL (16): How long a trail stamp lives, in frames.
  • PASS_OVERLAP (12): How far the next pass overlaps the last; more gives a denser flood.
  • CONDENSE_MIN (0.72): The narrowest a long line may be condensed.
  • FONT_VAR (--visual-sans): The CSS variable holding the font family. Any semibold grotesque works.