Standing letters with a long shadow
Text, Scroll, 3D
NewFree
Back to the library
The crumbling manifesto
Scattered sentences on a still stage: scroll fast and they tremble, with a window of wrong signs running along the words; keep going and they fall letter by letter, while in the middle one sentence writes itself.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN.
The code for this animation is part of lifetime access.
The preview stays open: watch it, slow it down, try it on your phone.
Lifetime accessWhat it does
The screen stops on a black background with four or five scattered sentences, all things to be removed. Scroll slowly and they stay still; scroll fast and they tremble: along each sentence runs a window of letters replaced by random signs, denser the faster you go. Keep scrolling and every letter falls on its own, slightly sideways, spinning, and disappears. Meanwhile in the middle one sentence writes itself, left to right, with its last letters still jumbled; when you stop, it reads clean.
How it works
A still stage
The section is 2.6 screens tall and holds a position: sticky panel one screen tall: you scroll, but the scene stays still. The sentences are split into letters with SplitText and each letter gets a fixed width in em, so when it changes sign its neighbours do not move.
The trembling
The scroll speed (a ScrollTrigger’s getVelocity) becomes a push between 0 and 0.45 that loses 10% per frame; the trembling follows it by 14%. Every eight frames a window of 22 letters moves along the sentences, and each letter in the window becomes a random sign with probability trembling × (1 − distance/22)^0.6.
The fall
A timeline tied to scrolling (scrub 2) from the top of the section until its centre reaches 30% of the screen: each letter falls 40–160 pixels, moves ±10, turns ±20 degrees and fades on power2.in, at its own moment (sentence × 0.06 plus a random amount up to 0.6).
The sentence that writes itself
From 25% of the fall onwards, the sentence in the middle shows as many letters as the timeline has advanced; the last four are random signs. When scrolling stops, the head reads clean too.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
VELOCE | script.js | 3400 | Scroll pixels per second that make it tremble the most: lower, it trembles sooner. |
FINESTRA | script.js | 22 | How many letters are in the trembling window. |
CADUTA | script.js | [40, 160] | How many pixels a letter falls, from and to. |
CODA | script.js | 4 | How many jumbled signs at the head of the sentence being written. |
When to use it
For a manifesto or a statement where the last sentence matters: the surrounding text crumbles and leaves that one alone. Use it once per page.
On phones
It works the same with a finger, which gives the scroll its speed. Three scattered sentences remain, all from the left margin, and the text never goes below 14 pixels.
With reduced motion
No trembling and no falling: as you scroll the scattered sentences fade and the one in the middle appears whole.
Pitfalls
- Changing a letter’s text changes its width and the whole line dances: fix each letter’s width in em after splitting the text, with the font already loaded.
- The trembling runs only while the section is on screen (onToggle): there is no need for a loop rewriting invisible letters.
- When the trembling dies down, put the original letters back, or some random signs stay forever.
- The random values of the fall are decided once, when the timeline is built: with scrub the same position must always give the same scene.
Libraries
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, SplitText (GSAP) 3.15.0, Mona Sans (font variabile) 5.3.0.
Weight: 8.7 KB of our own files.
Testing
Tested on 27 September 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: Done
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
