Warp type

Six short sentences, half a second each, where the verb bends its own letters.

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

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

What it is

Six sentences take turns on a 1080 by 608 scene, 16:9, scaled to the box as one unit. Each holds for about half a second and cuts hard to the next. Every sentence is "Design" plus a verb and a noun, set centred at one size in a grotesque at medium weight, pale mint on a deep sea green.

The sentence never changes once it is on screen. The verb changes what happens to it. In the first the letters swell and shrink along a wave. In the second the last word leaves a stair of smaller copies behind it. In the third three lines fall together and close up. In the fourth the two lines turn against each other. In the fifth each word turns on its own centre, a hinge at the gap. In the sixth neighbouring letters swap places in three rounds.

Every glyph is one fillText under its own affine matrix, and nothing is pre-rendered. The motion is authored as 75 keys at 25 frames a second, three seconds a loop, and read at a fractional key every animation frame, so it plays smooth at the screen's rate while the six cuts land on whole keys.

The lines are laid out from the live font at mount: pens from the widths of each prefix, so kerning is the face's own, and ink boxes from measureText. Any six sentences of one to three lines work, because the tables describe the deformation along a line, not the letters.

How it works

  • Lay each phrase out at rest from the live face: measure every prefix for the pens and every glyph for its ink box.
  • Give every glyph a 2D affine matrix per key, from the scene's table, and draw it with one fillText under that matrix.
  • Read the clock as elapsed / 40ms mod 75 and draw at the fractional key; cut scenes at keys 0, 13, 25, 38, 50 and 63.
  • For the wave, sample six smooth curves along the line for x scale, y scale, rotation, skew and drift, all about the glyph's foot.
  • For the sort, derive the swapped pairs from the phrase, then hop one letter of each pair and slide the other over four keys.
  • Under reduced motion, draw key 12 once: the wave at full swell.

What you can change

  • DEFAULT_PHRASES (six "Design + verb + noun" lines): The sentences. Six scenes of one to three lines; the third scene takes three.
  • GROUND (#0b1a1f): The background colour.
  • INK (#d9f5ea): The type colour.
  • FONT_WEIGHT (500): The weight the face is drawn at.
  • FONT_VAR (--visual-sans): The CSS variable holding the font family. Any grotesque works.