Physics Word Pile
Display-type chips that fall, collide, tumble and stack under a real rigid body solver, with drag-and-fling throwing.
About This Effect
A gravity playground for typography. Words drop into the frame as physical objects, knock each other sideways, tumble and settle into a pile that never lands the same way twice.
Read the full effect overview
Grab any word and it dangles from the exact point you caught it. Fling it and it leaves at the speed of your pointer, squashes against whatever it hits, flashes, and sends a shockwave out from the contact point.
The whole simulation is hand-written on top of GSAP's ticker: no physics library, no WebGL, no canvas. The words stay real HTML you can select, translate and style.
What's Included
- Impulse-based rigid body solver with restitution, friction and rotational inertia, written from scratch with no physics library
- Drag any word with a mouse-joint grab that pins to the point you caught it, so chips dangle and swing naturally
- Throw velocity is inherited from the pointer, so a hard flick genuinely fires a word across the stage
- Impact feedback on three channels: squash-and-stretch along the chip, a colour flash, and a shockwave ring scaled by collision impulse
- Fixed 120Hz timestep with an accumulator, so stacking stays stable at any frame rate and on any machine
- Collision shapes are built from each chip's rendered size, so the physics tracks fluid type as it reflows
- Bounds come from the container's padding box, so the walls and floor are positioned entirely in CSS
- Full keyboard support: every word is a button that can be focused and kicked with Enter or Space
Perfect For
- Hero sections that want a headline visitors can play with rather than read past
- 404, coming-soon and maintenance pages where a toy earns the wait
- Agency and portfolio landing pages needing one memorable interaction above the fold
- Product launches and campaign microsites built around a short, throwable tagline
- Event and conference sites where speaker names or session titles become the objects
How It Works
Every chip is approximated as a chain of circles laid along its long axis, which is exactly a capsule and matches a pill-shaped element's real silhouette. That turns collision detection into circle-versus-circle and circle-versus-wall tests, and skips the polygon clipping an SAT solver would need.
Each fixed 1/120s step integrates gravity, gathers contacts, and then runs several passes of sequential impulses over them. Each pass resolves normal restitution and clamped Coulomb friction at the contact point, with torque taken from the offset between the contact and the body's centre; a positional pass then pushes remaining overlap apart without feeding energy back into the stack.
Grabbing applies an impulse at the grab point rather than the centre, which is what makes a held word swing. Rendering is three GSAP quickSetters per body, and the impact squash is tweened on an inner element so the per-frame transform never clobbers it.