Skip to content

Gravity Type Drop

Drop the title, throw the letters

Gravity Type Drop preview image 1

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.

Rank history How rankings work →

120014001600165368/149/59/2710/1911/10
  • All · #5611

Details

More like this