← Library
Essentials

Kinetic Headline

Words rise out of their own overflow mask on a staggered curve while the variable font weight settles from 300 to 600. Reads as typesetting, not animation.

Difficulty
Advanced
Credits saved
~150
Access
Members

Technique

Each word wrapped in an overflow-hidden span; inner span translateY(110%) → 0 with 60ms stagger. Variable font-variation-settings interpolated over the same window.

Choreography spec

none — entrance only

  • 0ms + 70ms/wordtranslateY 110% → 0, blur 10px → 0
  • same windowfont weight 300 → 600

Reversibility

One-shot entrance; re-runs only on remount.

Reduced motion

Words rendered in final position, no blur.

kinetic-headline.prompt
Build a "kinetic-headline" section for my landing page.

TECHNIQUE
Each word wrapped in an overflow-hidden span; inner span translateY(110%) → 0 with 60ms stagger. Variable font-variation-settings interpolated over the same window.

SPEC
██████████████████████████████████████████████
██████████████████████████████████████
████████████████████████████████████████████████████

RULES
████████████████████████████████████████████
██████████████████████████████████████████████████

Full prompt unlocks with membership.

Kinetic headline

Typesettingthatarrives,settles,andnevermovesagain

Each word owns its own mask, its own delay and its own weight curve — so the line reads as type being set, not as text sliding in.