Standing letters with a long shadow
Text, Scroll, 3D
NewFree
Back to the library
The folded ribbon title
Every letter of the title is a ribbon of coloured paper that writes itself by folding: the ribbon runs out straight, stops, and the stretch it has just run out flips over in 3D on its crease and lands flat with a bounce, showing its paler back. Under the pointer the paper lifts and tilts like a spring; then the ribbons unfold backwards and it all starts again. A click folds it again.
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>The folded ribbon title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena" data-scene>
<!-- the title, for screen readers: the paper ribbons only draw it -->
<h1 class="leggibile" data-reader>Fold Works. Paper goods, folded by hand</h1>
<!-- the stage: the script sizes it to the window and draws the ribbons, their folds and their shadows -->
<canvas class="palco" data-stage aria-hidden="true"></canvas>
<p class="sotto" data-sub>Paper goods, folded by hand</p>
<p class="nota" data-hint>Click to fold it again</p>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.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.
25 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 folded ribbon title” from Animorio and fit it into my siteWhat it does
On a cream sheet of card the name of a made-up stationery workshop, «Fold Works», is written by nine paper ribbons, one per letter, each in its own colour: vermilion, saffron, green, cobalt blue and pink. The letters start one after another. The ribbon comes out of its end and runs straight for a stretch, slowing down; then the stretch it has just run out lifts on its crease, flips over in the air in perspective, bigger because it is closer, and lands on the other side with a small bounce, pressing flat on the card. Since every fold turns the paper over, the flipped piece shows its back, a paler tint of the same colour, and at the corners you get the chamfered triangles and the layers of paper that is really folded, with a line of light on the crease. Then the ribbon runs straight again and folds the other way, and so the F, the O, the L, the D and the others come together fold after fold. The bars in the middle (on the F, the A, the E) are shorter ribbons tucked underneath. While a flap is in the air its shadow on the card grows wider and softer, and when it lands the paper underneath gives a little jolt. Once the title is done, the letters of the line «Paper goods, folded by hand» rise underneath, widening as they come. Then a draught runs across the title from left to right: the ribbons lift one after another, tilt and fall back swaying. The pointer does the same: the paper under it rises off the card, tilts towards it and, when it moves away, drops back with a springy wobble. After a few seconds the line drops away and the ribbons unfold backwards, like a film rewound, faster and faster, until they vanish into their ends; then it all starts again. A click folds the title again at once (if the ribbons are still folding, they finish quickly and then rewind).
How it works
An alphabet made of folds
The letters do not come from a typeface: they are square capitals drawn for the demo, A to Z, 10 units tall. Every letter is one or more ribbons, and every ribbon is the line through the middle of the paper: at every corner the ribbon turns by folding. A fold that turns the ribbon by an angle is a line across the strip at half that angle, so the corners come out chamfered by themselves, as with real paper. Turns that are too tight (under fifty degrees or so) would make very long folds: the letters use right angles, diagonals and U-turns.
The ribbon laid flat and the ribbon folded
Every ribbon lives in two frames. Laid flat, it is a straight strip: u along the strip, v across it, and every piece is the stretch between two folds, cut by the two lines and by the end as it runs out (a polygon clipped by three half planes). Folded, every fold is a 3D rotation round its own line, and the place of a piece is the product of the rotations of all the folds before it, like the joints of a robot arm. With every fold at half a turn the drawing lands exactly on the letter; half way, the piece is in the air.
Drawing on a canvas
On every frame the pieces go from their 3D matrices to the screen with a light perspective (closer means bigger). The normal of each piece says which face we see, the colour or the paler back, and how much light it gets, so a flap that flips darkens and brightens. The shadows are the same polygons projected onto the card along the light, drawn on two small canvases and then stretched: the one at a third of the size is the contact shadow, the one at a ninth the soft shadow of the flaps in the air.
The direction
For every ribbon a paused GSAP timeline runs the end out (power2.out) and then turns the fold by half a turn with a hand-written curve: it starts briskly, speeds up as it falls, bounces once and settles. The main timeline drives the folding timeline with a tween on its progress, then the line underneath, the draught, and at the end the same tween backwards (power2.in), which unfolds everything like a rewound film. A callback on every landing gives the paper underneath a little knock.
Paper like a spring
Every piece has two springs, its height and its tilt round its middle line, updated on every tick with real physics (force, damping, steps of 1/120 of a second). How close the pointer, or the draught, is decides how far to rise and which way to tilt: the nearer edge goes up. The lower edge never sinks under the card. With reduced motion the folded title fades in and out and the paper stays still.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
TITLE | script.js | 'Fold Works' | The title the ribbons write: letters A to Z and spaces (it is written in capitals, other signs are skipped). With several words, if that makes the letters bigger, each word gets its own line. |
SUBTITLE | script.js | 'Paper goods, folded by hand' | The line under the title, which rises letter by letter (empty = no line). |
SPEED | script.js | 1 | How fast the ribbons run and fold: 2 twice as fast, 0.5 half. |
RIBBON | script.js | 1 | How wide the paper ribbon is: 1.2 wider and bolder, 0.8 thinner. |
LIFT | script.js | 1 | How far the paper lifts and tilts under the pointer and in the draught (0 = it stays flat). |
SPRING | script.js | 0.6 | How springy the paper is: 1 it wobbles for a long time before settling, 0 it settles at once. It also sets the jolt when a flap lands. |
REST | script.js | 2 | How many seconds the folded title stays, after the draught, before the ribbons rewind. |
When to use it
To open the site of a stationery shop, a bookbinder or a packaging studio, an origami or gift-wrap shop, a children's workshop, a design school; for a playful title that shows up and leaves again, on a holding page, for an event or in a post.
On phones
The same animation with the sizes adapted: the two words go on two lines as wide as the screen, and the ribbons, folds and shadows shrink with it. Dragging a finger over the title lifts the paper as the pointer does; a tap folds it again.
With reduced motion
Nothing moves: the title, already folded, fades in with the line underneath, stays for a few seconds and fades out; then it starts again. The paper does not lift under the pointer and there is no draught. A click makes it fade at once.
Pitfalls
- The flap must always rise towards the viewer, but after a fold the paper is turned over and its top is the side facing the card: the direction of the rotation depends on how many folds come first (odd or even) and on which way the fold line leans. Get it wrong and half the flaps go under the card.
- A tight turn puts the fold line almost along the ribbon, and the piece between two close folds can turn into a quadrilateral crossed over itself. Every piece is the strip cut by half planes, not a quadrilateral with four computed corners: if a fold eats it entirely, a triangle is left, or nothing.
- The end running out and the fold of the next piece must not be two overlapping tweens on the same property: backwards, the rewind would jump. Every run of the end starts exactly where the one before ends; only the run and the fold overlap, and they move different things.
- The folding timeline goes forwards and backwards with progress(): the bounce callbacks fire during the rewind too, and the paper would jolt for nothing. A flag says when it is rewinding and the knock is skipped.
- With a fixed drawing order a flap in the air would go under the next letter. Pieces higher than one unit go to the end of the list, sorted by height; the others keep the order of the paper, so the layers lying flat never swap while the paper sways.
- Turning a piece round its centre would pull it away from its neighbours; the tilt is round its middle line, which stays in place, and the added height is at least that of the edge going down, so it never sinks into the card.
Libraries
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 10 KB; the libraries: GSAP 28 KB.
Testing
Tested on 13 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.
