Rush type

A word rests, then blasts toward you and tears into streaks of coloured light before the next one lands.

A small white word, sharp and alone at the centre of a black field.
npx skills add https://design.how/vault/rush-type

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

What it is

Four short words, one per cycle of a little over 0.8 s, on near-black. Each word sits small, white and sharp at the centre for about 0.38 s, then blasts: it swings up and at the viewer, turning as it comes, until it fills and overruns the frame top to bottom and the speed tears it into vertical streaks, green escaping past both ends of every stroke and a blue-white core left in the middle. At the worst of the blur the next word takes over, and it falls back down the far side of the circuit to rest.

The colour is a byproduct of speed, and there is no colour constant anywhere. The three channels are the same white word accumulated over three different shutter lengths, in the ratio 0.62, 1.0 and 0.34 for red, green and blue. Each channel averages 28 texture fetches across the range of vertical scales the word passes through in a 40 ms shutter, so a longer shutter spreads the same ink further and comes out dimmer. When the word stops, the three shutters collapse onto the same pixels and it is plain white again, with no fade.

The motion is a quad on a vertical circle seen through a pinhole camera with a focal length of one canvas height. The far point is the resting word; the near point is the blast, where perspective does the growing. Yaw (about 31 degrees) and a smaller pitch both lag the path, so the word is caught mid-turn through the loudest frame instead of squaring up to the lens. Both words live in one texture as two halves, and each shutter sample picks its half by which side of the swap instant it falls, so the blur itself dissolves one word into the next.

A faint CRT layer, an aperture grille, scanlines and a slow hum bar, is scaled by the blast so the resting word is untouched. Scrolling the page speeds the clock up. Pointing at the card, or holding a finger on it, brakes the clock with a quartic weight on how close the word is to its peak, so it coasts up to the blast and parks there rather than freezing a readable frame.

How it works

  • Raster the outgoing and incoming word into two stacked halves of one texture, at a fixed cap height, measured from the live face.
  • Draw one full-screen triangle; in the fragment shader, for each of R, G and B, average SAMPLES fetches across the vertical scales the word sweeps through during that channel's shutter.
  • Give each channel its own shutter length from SHUTTER_K, and divide by the sample count so longer shutters come out wider and dimmer, never coloured at rest.
  • Place the word with a pinhole projection on a vertical circular path, with yaw and pitch phase-lagged against the path and pinned to zero at rest.
  • Pick the atlas half per sample by whether that sample's time falls before or after the swap, so the swap happens inside the blur.
  • Multiply in a grille, scanlines and a hum bar scaled by blast progress, under a neutral soft pool of light.
  • Advance an accumulated clock: faster while the page scrolls, braked by the hover hold weighted by the fourth power of blast progress.
  • Cap the pixel ratio at 1.5, stop the loop on webglcontextlost, and on destroy delete the program, buffer and texture and lose the context.
  • Under reduced motion, draw the resting word once: crisp, white and centred.

What you can change

  • WORDS (["gone", "before", "you", "look"]): The words, one per cycle. Keep the count even and the words short.
  • SY_PEAK, SX_PEAK (7.0, 1.57): How tall and wide the word stretches at the blast, before perspective.
  • REST_S (0.38): Seconds the word rests, readable.
  • SHUTTER_K ([0.62, 1.0, 0.34]): Per-channel shutter length. The further apart, the stronger the colour split.
  • SAMPLES (28): Fetches per channel. The visible banding is part of the look.
  • ORBIT_YAW, ORBIT_PITCH (0.55, 0.26): How far the word turns on its way through the blast, in radians.
  • CRT_GAIN (1.0): Strength of the grille, scanlines and hum during the blast. 0 turns them off.
  • HOLD_STRENGTH (0.96): How hard pointing at the card holds the word at its peak.
  • FONT_VAR (var(--visual-sans)): The font family. Any neo-grotesque works.