Click the headline and every letter becomes a physics body: they fall, bounce, tumble and pile up at the bottom of the frame. Grab any letter and throw it — it keeps the real velocity of your gesture, smoothed over the last frames, so a flick sends it flying.
Rotation is excited by impact, so letters roll and settle at natural angles instead of landing flat. A discreet Replay button springs every letter back to its exact home position and angle — the title reassembles pixel-perfect.
Trigger on click, on hover, or automatically when scrolled into view. Gravity and bounciness are adjustable.
DOM and requestAnimationFrame, no dependencies, nothing loaded from outside. The loop only runs while letters are moving. Honours prefers-reduced-motion (the title simply stays put), and renders the intact title on the Framer canvas.
Click the headline and every letter becomes a physics body: they fall, bounce, tumble and pile up at the bottom of the frame. Grab any letter and throw it — it keeps the real velocity of your gesture, smoothed over the last frames, so a flick sends it flying.
Rotation is excited by impact, so letters roll and settle at natural angles instead of landing flat. A discreet Replay button springs every letter back to its exact home position and angle — the title reassembles pixel-perfect.
Trigger on click, on hover, or automatically when scrolled into view. Gravity and bounciness are adjustable.
DOM and requestAnimationFrame, no dependencies, nothing loaded from outside. The loop only runs while letters are moving. Honours prefers-reduced-motion (the title simply stays put), and renders the intact title on the Framer canvas.
