Lab / 03 · Hero 05

Type Machine

Giant variable type run like machinery: strips, reels, pistons and slices.

Motion
The headline is cut into ten horizontal bands — identical copies clipped to stripes — so it can assemble from opposing directions, shear like slit-scan film and split into hollow and solid bars. Its middle word is a reel that spins letter by letter, while width and weight move through it as travelling waves. One paused GSAP timeline is the machine's cam; scene time just seeks it.
Demo brand
KINETIC, fictional

Interaction

  • Letters near the cursor swell in width and weight — the type leans into the hand
  • Velocity shears the bands against each other like a slit-scan
  • Click punches a shockwave of weight outward through the letters
  • Pointer tilts the whole machine in perspective; scroll slices it apart
  • GSAP timeline seeked by scene time
  • Variable font axes (wdth, wght)
  • Clip-path bands
  • Per-letter CSS custom properties
  • Read-then-write layout batching
Watch the 10s filmAll heroes