Hanging Letters Hero with Physics Strings on Canvas
Overview
A hero for React and Next.js whose heading hangs letter by letter from strings at the top of the screen. The letters drop in, bounce on their strings and swing into the word, and you can knock them or grab one and throw it.
Each letter is real type, measured and kerned from your font, baked into its own sprite with a thick enamelled edge and a small bridle where the string meets the letter. Every letter then hangs as a separate pendulum on a string of its own length, so they swing out of step with each other. On load they fall from above the screen, stretch their strings, bounce, and swing into the word.
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 104 / Cards
Hanging Price Tags Physics Animation with Canvas
On Load · Mouse Move · Drag
No. 109 / Hero
Pluck the Strings Hero Animation with Canvas
On Load · Mouse Move · Drag · On Click
No. 094 / Hero
Bead Curtain Reveal Hero Animation with Canvas Physics
On Load · Mouse Move · Drag · On Click
(02)FAQ
Hanging Letters Hero with Physics Strings on Canvas — FAQ
01What heading should I use?
Two short words work best, ten or so letters. The letter size is fitted to the width of the screen. On a phone each word gets its own row.
02Can screen readers and search engines read the heading?
Yes. The h1 is real text in the server HTML. Once the canvas takes over it is hidden with opacity, so it stays in the accessibility tree.
03What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. The letters use a CSS variable, --letters-display, and the sentence uses --letters-text. Both fall back to Georgia. It uses no WebGL and no other dependencies.
04What happens with reduced motion?
The letters are drawn once at rest with their shadows, no loop runs, and the sentence and link are visible straight away.