Standing letters with a long shadow
Text, Scroll, 3D
NewFree
Back to the library
The manifesto that trims itself
Scroll inside the preview
A studio’s manifesto edited in front of you as you scroll: a thin red pen strikes the words it does not need, they slip away and the lines close up. Three passes, until only the essential sentence is left, large. Minimal style.
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 manifesto that trims itself</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the manifesto of a made-up studio, edited in front of you: as you scroll a thin red pen strikes the words it does
not need, they slide away and the lines close up, three times, until only the essential sentence is left, large.
The text and its edits are written in MANIFESTO, at the top of script.js -->
<main>
<section class="racconto" data-racconto>
<div class="palco">
<header class="testa">
<p class="marchio">Halde</p>
<p class="conto"><span class="conto__numero" data-conto>0</span> words</p>
</header>
<div class="foglio" data-foglio>
<!-- the whole manifesto for screen readers; the script writes it here and draws the words on its own layer -->
<p class="manifesto" data-manifesto></p>
</div>
<nav class="voci" aria-label="The edits">
<span class="voce" data-voce>Draft</span>
<span class="voce" data-voce>Edit</span>
<span class="voce" data-voce>Cut</span>
<span class="voce" data-voce>Final</span>
</nav>
</div>
</section>
<section class="coda">
<p class="coda__testo">Halde is a design studio<br>that removes things for a living.</p>
<p class="piccolo">Manifesto, 2026</p>
</section>
</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/ScrollTrigger.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.
24 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 manifesto that trims itself” from Animorio and fit it into my siteWhat it does
The manifesto of a made-up design studio, Halde, on a warm white with black ink and a single red. On arrival the words rise into place line after line. Then the screen stops and, as you scroll, the text is edited in three passes, like a proof. In each pass a hairline red pen strikes the words that are not needed, in reading order: it moves at the same speed for every letter, crosses the space too when it strikes several words in a row, and lifts between one stroke and the next. The struck words go grey, then slip down and a little to the right, leaning, and vanish. The words that are left travel to their new places, a little larger each time: the lines close up and the text always reads as a whole sentence. A word that changes line turns see-through while it crosses the others. After the last pass the four words that are left gather on a single line, then grow until they fill the screen: the ones that wrap first drop to their line and then slide along it, so none passes over another; meanwhile the first letter turns into a capital. Once there, they gain weight with an elastic settle and the full stop turns red with a small kick. At the top the word count drops from 36 to 4, at the bottom the names of the passes light up in turn. Everything follows the scroll, forwards and backwards.
How it works
The text and its edits
The whole manifesto lives in one string, MANIFESTO: words separated by spaces, with ^1, ^2 or ^3 on the ones to strike in that pass, =Say for how a word is written at the end and / to break the line in the final sentence. Punctuation is a word of its own that sticks to the one before: so a comma can stay even when the words beside it go. The script makes one element per word, on a layer above the sheet.
The hidden copies
For every moment of the story (the whole text, after the first and the second pass, the single line, the final sentence) there is an invisible copy of the text with only the words that remain, at its own size (SIZES). The browser lays it out, line breaks included; the script reads with getBoundingClientRect where every word lands, its width and its line. If a copy does not fit the sheet it is shrunk until it does, then centred in the height.
Numbers instead of properties
The timeline, tied to the scroll with scrub SCRUB, does not move elements: for every word it moves numbers from 0 to 1, one per move plus the one for leaving. A function, called once per frame by the timeline’s onUpdate, sets every word between its place before and after with translate and scale, along the MOVE curve. Since the places are read again on every refresh, the story holds when the window is resized.
The pen
The strike is an element inside the word, STROKE pixels high, that grows with scaleX from the left. It sits halfway up the small letters: the baseline and the x-height are read from a canvas with measureText. It lasts PEN per letter, and the strikes of neighbouring words follow on without a pause, stretched to the next word when it is on the same line: it looks like one line drawn by hand.
No crossings
Words that move from one line to another risk crossing the others. During the passes they turn see-through halfway; before the final sentence the words gather on a single line (the one going up first slides along its empty line), and while growing the words that wrap drop first and slide after, with their scale tied to the slide, starting from the last word. At the end a CSS variable takes the weight of the variable font from LIGHT to BOLD with elastic.out, and the opsz axis towards the display cut.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
MANIFESTO | script.js | 'We^3 would^3 honestly^1 like^3 to^3 say=Say ...' | The text and its edits: word^1, ^2 or ^3 is struck in that pass, a word with no mark stays; =X is how it reads at the end, / breaks the line in the final sentence. |
SIZES | script.js | [1, 1.1, 1.28, 4.4] | How big the text is after each pass, times the starting size; the last number is the final sentence (it shrinks by itself if it does not fit). |
PEN | script.js | 0.05 | How long the pen takes for every letter it strikes, in steps of the story. |
STROKE | script.js | 1.5 | How thick the pen stroke is, in pixels. |
MOVE | script.js | 'power3.inOut' | The curve the words follow to their new places. |
LIGHT | script.js | 330 | The weight of the manifesto. |
BOLD | script.js | 540 | The weight the final sentence settles on. |
SCRUB | script.js | 0.8 | How many seconds the words take to catch up with the scroll. |
When to use it
For a studio’s manifesto or about page, the launch of a product that prides itself on being simple, the opening of an article about writing: a long text that boils down to its idea. It works with one or two sentences, up to about forty words; keep the final sentence short, two to six words.
On phones
The same: the text wraps more often and the final sentence shrinks by itself to the width of the screen.
With reduced motion
No pen and no movement: every pass is already written and, as you scroll, the versions take turns with a cross-fade up to the final sentence with its red full stop; the word count and the names at the bottom change with them.
Pitfalls
- With words that change line, a plain interpolation between two layouts makes them pass over one another: in the final sentence «mean» and «more» swapped places and overlapped. It needs a step in between, the single line, and an order for the axes: a word going up slides first and rises after, a word going down drops first and slides after.
- If the scale grows along one curve and the position along another, a widening word runs into its neighbour before it moves. On the same line position and scale must follow the same curve: then the space between two words is a blend of two right spaces and never goes below zero.
- The final sentence is measured at the BOLD weight, but the words travel at the LIGHT weight, which is narrower: if the weight only grows after they land, for a moment the comma and the full stop float away from their words. The weight starts almost a second before the words settle, and the elastic closes the gaps as they arrive.
Libraries
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Newsreader (font variabile) 5.3.0, Geist (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 8.2 KB; the libraries: GSAP + ScrollTrigger 45 KB.
Testing
Tested on 14 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.
