Standing letters with a long shadow
Text, Scroll, 3D
NewFree
Back to the library
The headline with tumbling letters
A minimal-style animated opening headline for an invented carbon bike wheel brand: every letter tumbles in from above, turned a quarter over and twisted sideways, with a shadow that shortens as it lands and a one-pixel settle. Three headlines take turns, the pointer ruffles the letters nearby and a tap flips them over again, starting from the one you touched. Rebuilt from scratch from the opening of lightweight.info.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Raggio wheels</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the opening headline of a carbon wheel maker: every letter tumbles in from above, turned a quarter on its
side, and lands with a one-pixel settle; three headlines take turns, the pointer ruffles the letters nearby
and a tap flips them over once more -->
<main class="pagina" data-pagina>
<section class="apertura" aria-live="polite">
<p class="marchio" data-marchio>Raggio carbon wheels</p>
<h1 class="titolo" data-titolo aria-label=""></h1>
<p class="sotto" data-sotto></p>
<a class="pillola" href="#" data-pillola>
<span class="pillola__testo">Learn more</span>
<svg class="pillola__freccia" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h9.5M8.5 4l4 4-4 4" /></svg>
</a>
</section>
<nav class="indice" aria-label="Chapters" data-indice>
<span class="indice__voce" data-voce>Climb</span>
<span class="indice__voce" data-voce>Craft</span>
<span class="indice__voce" data-voce>Speed</span>
<span class="indice__riga" aria-hidden="true" data-riga></span>
</nav>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/SplitText.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
23 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The headline with tumbling letters” from Animorio and fit it into my siteWhat it does
It is the opening of Raggio, an invented carbon wheel brand, on a silver background with a soft light in the middle. At the top a small line, Raggio carbon wheels, slowly lights up. Then the headline, large and uppercase on two lines: every letter arrives from above and from the left, flipped ninety degrees backwards and twisted fifteen to the side, and straightens up in a second, one after the other a tenth of a second apart; the second line starts half a second after the first. While it tumbles, every letter casts a long pale shadow beneath it that shortens until it disappears as the letter lands, and once there it drops one pixel and comes back up, as if touching the baseline. The subtitle rises gently shortly after, and below it sits the thin Learn more pill, with its arrow in the only accent colour. After three seconds the letters fall forward and fade, and the next headline arrives: Built to climb, Handmade in carbon, Quiet at speed. At the bottom three labels, Climb, Craft and Speed, tell you where you are, and a thin brick-coloured line runs from one to the next, stretching like a caterpillar. With the pointer the nearby letters sway slightly, leaning towards it; a click or a tap on the headline flips them over once more, starting from the one you touched and spreading to the others.
How it works
Letters with SplitText
Each headline is written with a slash where it breaks: every line becomes a span, and SplitText splits it into words and letters (type words,chars). Inside each letter we put a second span: the outer letter is moved by the entrance timeline, the inner one by the sway and the tap flip, so the two transforms never overwrite each other. Every word has perspective 1000px: that is our choice, because on the original site the letters rotate with no perspective and you see them squash and straighten up flat; with perspective the tumble and the shadow read in depth.
The tumble
One fromTo per line: from opacity 0, y -0.6em, x -0.2em, rotateX -FLIP, rotateY -TWIST to all zero, in DURATION seconds with power2.out and a stagger of STAGGER times DURATION. Lines start LINE_GAP times DURATION apart. These are the site's numbers: 90 and 15 degrees, one second, a tenth, half a second.
The shadow and the settle
The CSS variable --s goes from 1 to 0 with the letter: the child's text-shadow uses it for the distance, blur and opacity of the shadow, which therefore shortens as the letter lands. Near the end a second tween takes each letter one pixel down and back (yoyo, 0.11 seconds each way), staggered like the entrance.
Changing headline
The subtitle comes in a quarter of a second after the headline, over a second and a half, like the site's pause after the headline. After HOLD seconds (a GSAP delayedCall, not a setTimeout) the letters fall forward with rotateX 38 and fade in half a second with a 0.018 stagger; then SplitText is reverted and the next headline is built. The index line first stretches to the new label with power2.in and then pulls its tail in with expo.out.
The pointer and the tap
Each inner letter has two quickTo, rotation and y. As the pointer moves, the closeness (1 minus the distance over 1.7 times the font size, squared) tilts it up to 7 degrees towards the pointer and lifts it up to 0.07 em; leaving the page brings it back to zero. On pointerdown we look for the nearest letter and they all do a full turn on rotationX, with the stagger starting from it.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
HEADLINE_A | script.js | Built/to climb | The first headline; the slash breaks the line. |
HEADLINE_B | script.js | Handmade/in carbon | The second headline. |
HEADLINE_C | script.js | Quiet/at speed | The third headline. |
DURATION | script.js | 1 | How long one letter takes to tumble, in seconds. |
STAGGER | script.js | 0.1 | The delay between one letter and the next, in seconds. |
LINE_GAP | script.js | 0.5 | The delay between one line and the next, in seconds. |
FLIP | script.js | 90 | How many degrees the letter is flipped when it starts. |
TWIST | script.js | 15 | How many degrees it is twisted sideways when it starts. |
HOLD | script.js | 2.8 | How many seconds each headline stays still. |
RUFFLE | script.js | 1 | How much the letters near the pointer sway. |
When to use it
As the opening headline of a technical, high-end product (wheels, bikes, watches, sports gear), on the page of a brand that wants to feel precise and calm, or as the title of a section that changes topic: each chapter comes in with its own tumbling headline.
On phones
The same animation: the headline is sized on both width and height, so two lines fit in the box; the letters do not sway without a pointer, but a tap on the headline flips them.
With reduced motion
No tumbling and no movement: each headline fades in and out, the index line jumps to the right label, the letters do not sway and a tap does not flip them.
Pitfalls
- GSAP writes an inline transform on every letter: if the sway and the tap flip acted on the same element as the entrance they would overwrite each other. That is why each letter has a child: outside the timeline, inside the pointer.
- Perspective on the whole line does not reach the letters, because SplitText's words sit between the line and the letters: it has to go on the words.
- SplitText must run after the typeface has arrived (document.fonts.load), otherwise the letters take the size of the fallback font and the headline suddenly widens.
- The tap flip goes from rotationX 0 to 360: a second tap halfway through would make the letter jump, so taps during a turn are ignored.
Libraries
GSAP 3.15.0, SplitText 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 5.2 KB; the libraries: GSAP + SplitText 31 KB.
Testing
Tested on 24 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
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.
