Falling Letters Physics Heading with Canvas
Overview
A heading for React and Next.js whose letters crack loose, fall and pile up on the floor as solid blocks. A small rigid-body solver handles the tumbling and stacking, and you can grab a letter and throw it.
The word holds on the wall for a moment, then the letters crack loose one at a time, fall and land in a heap. Each letter is a rigid box in a small solver written for this component, so letters stack, tip over and knock each other with real rotation and friction. A light moves slowly across the wall and the shadows move with it, and the wall keeps a clean print of where the word hung, so the heading stays readable after it has fallen.
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 095 / Cards
Throwable Photo Card Deck with Riffle Shuffle in React
On Load · Drag · On Click
No. 112 / Text
Rubber Band Letters Stretchy Text Animation with GSAP
On Load · Drag
No. 098 / Cards
Crumpled Paper Card You Can Crush and Throw, on Canvas
On Load · On Click · Drag
(02)FAQ
Falling Letters Physics Heading with Canvas — FAQ
01How long can the heading be?
About 12 to 30 letters works best. The font size comes from the CSS on the h1, and the letters are measured from it, so you can change the size or the font and the bodies follow.
02Can I change the look of the letters and the wall?
Yes. Pass face with four colours for the letters and wall with three colours for the plaster. The font comes from the --pile-display CSS variable, which falls back to Georgia.
03What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. The physics and drawing use no other library. It fills the height of the screen, and it stops working when it leaves the screen.
04What happens with reduced motion?
The letters are settled into a pile before the first frame, the heading shows as plain text on the wall, and no loop runs. The button makes a new pile instantly.