component
Gravity Type Drop
By Lucas

Details
- LucasAuthor
- componentType
- $5.00Price
- 2026-08-12Published
- 2026-08-12Updated
- 2026-08-12Added
- TextCategories
Summary
Drop the title, throw the letters
Description
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.
Introduction
Drop the title, throw the letters
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #5212