The wrecking-ball logo
Intro, Physics, SVG, Text
NewFree
Back to the library
The word under the press
A text animation in the minimal style: one word in capitals between the two thin columns of a press. The vermilion plate comes down and squashes it on the cap height axis, and the ink goes sideways: the letters get wider and blacker. Going back up it pulls them tall, narrow and hairline-thin, then they come unstuck one after the other and spring back to their height. The plate can be dragged too.
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 word under the press</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the press: two thin rods, the bed the word stands on and the plate that comes down. Every letter is a spring:
the plate squashes the caps (cap height axis), and the ink has to go somewhere, so they get wider and heavier -->
<i class="rod" data-rod aria-hidden="true"></i>
<i class="rod" data-rod aria-hidden="true"></i>
<i class="bed" data-bed aria-hidden="true"></i>
<div class="row" data-row>
<h1 class="word" data-word>PRESS</h1>
</div>
<i class="plate" data-plate aria-hidden="true"></i>
<!-- the dimension line: the cap height, measured live -->
<div class="dim" data-dim aria-hidden="true">
<i class="dim__line"></i>
<i class="dim__tick dim__tick--top"></i>
<i class="dim__tick dim__tick--bottom"></i>
<span class="dim__num" data-num>640</span>
</div>
<p class="foot" data-foot>
<span class="foot__brand">Platen Letterpress</span>
<span class="foot__axes" aria-hidden="true"><span>ytuc <b data-yt>640</b></span><span>wdth <b data-wd>100</b></span><span>wght <b data-wg>560</b></span></span>
</p>
<p class="hint" data-hint aria-hidden="true">Drag the press</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.
22 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 word under the press” from Animorio and fit it into my siteWhat it does
On warm white paper two thin grey columns come down from the top and a black line stretches out underneath, the bed of the press. On the line the word PRESS arrives in capitals, letter by letter; at the top, between the columns, the plate waits: a vermilion line. The plate comes down, slowly at first and then faster and faster, touches the letters and slows as it squashes them: the capitals really get lower (the typeface has an axis for the height of the capitals), and since the ink has to go somewhere they get much wider and blacker, with the stems spreading and the horizontal bars staying thin. The plate bounces back a hair and stays down for a moment. Then it lifts slowly, but the ink is tacky: the letters stay stuck to it and stretch with it, tall, very narrow and hairline-thin. At the top they come unstuck one after the other, from the ends towards the middle, and drop back to their height on a spring, passing it by a whisker and coming back up; the plate goes back to the top and it all starts again. On the right a thin dimension line measures the cap height and its number changes; at the bottom three values give the axes of the middle letter (ytuc, wdth, wght). Dragging with the mouse or a finger brings the plate down by hand, as far as you like; let go and the letters come back up on their own.
How it works
A typeface with a cap height
Roboto Flex, in Fontsource’s «full» file, has the parametric axes as well as weight and width: YTUC is the height of the capitals, from 528 to 760 thousandths of the type size, and YOPQ the thickness of the horizontal strokes. Every letter is a span with its own font-variation-settings, rewritten on each frame only when it changes, with «opsz» 144 because only there does the width really squeeze.
The ink goes sideways
One function ties the three together: from the resting height (640) downwards the width rises to 146 and the weight to 730, upwards the width drops to 25 and the weight to 100. Squashed, the letters keep their horizontal strokes thinner (YOPQ from 79 to 66) and move apart a hair: at full weight the E turned into a black block and the S closed up.
Every letter is a spring
The height of every letter is a real damped spring, integrated in steps of a two-hundred-and-fortieth of a second inside gsap.ticker (frequency 2.4, damping DAMPING). The plate is rigid: a letter taller than the space under the plate is pushed down to it, and its speed cannot be more than the plate’s. So the hit, the squash and the return with its little bounce all come by themselves.
Tacky ink
When the plate lifts the letters are «stuck»: their height is the plate’s, up to 760. At the top a GSAP timeline unsticks them one at a time, from the ends towards the middle, every TACK seconds: from then on they are free springs again and drop back to 640. The same timeline moves the plate, with power2.in on the way down and power2.out while it squashes.
The plate by hand
Pressing on the page stops the timeline and the plate follows the pointer (a short 0.12-second tween, so the movement is smooth) between the hardest press and its resting place. Let go and it goes back up with power3.out, and a little under two seconds later the press starts again on its own. The dimension line and the three numbers read the middle letter on each frame.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
WORD | script.js | 'PRESS' | The word under the press, in capitals: the press squashes the height of the capitals. |
SQUASH | script.js | 528 | How low the plate pushes the capitals, on the height axis: 528 is as low as the typeface goes, at rest they stand at 640. |
STRETCH | script.js | 760 | How high the tacky ink pulls the capitals when the plate lifts: 760 is as tall as they go. |
DAMPING | script.js | 0.5 | How the letters come back to their height: 0.2 they wobble a lot, 1 they stop dead. |
TACK | script.js | 0.09 | The seconds between one letter and the next coming unstuck from the plate. |
HOLD | script.js | 0.9 | How many seconds the plate stays down. |
SPEED | script.js | 1 | The speed of the whole press: 2 is twice as fast, 0.5 half as fast. |
When to use it
To show a typeface or a brand with a single gesture: a print shop, a letterpress studio, a design studio, a type foundry, the word of a product introducing itself. It works with short words in capitals (four to eight letters), because the axis squashes the height of the capitals.
On phones
The same animation: the word is measured again so that, squashed and at its widest, it fits the screen with the dimension line beside it. The plate is dragged with a finger.
With reduced motion
Nothing comes down and nothing bounces: the press fades in, then the word fades out and comes back already squashed with the plate down, and after a moment fades out and comes back as it was. Dragging, the plate follows the finger and the letters follow the plate without a spring.
Pitfalls
- At full weight (1000) and the capitals at their lowest the E turned into a black rectangle and the S closed up: the horizontal strokes had no room left. The squashed weight stops at 730 and YOPQ thins the horizontal strokes, so the counters stay open.
- The YTUC axis is only in Fontsource’s «full» file (or «ytuc»): with «standard» or «wdth» the letters do not change height and the plate goes through them.
- The type size is decided by the squashed word, not the resting one: it is measured at 100 px squashed, stretched and at rest, and the size is chosen so that the widest fits between the columns with the dimension line beside it. Measured at rest, squashed it came out of the press.
- The plate and the letters live on the same scale: the cap height in pixels is YTUC divided by 1000 times the type size, and the plate sits on that scale too, so the vermilion line touches the letters exactly.
Libraries
GSAP 3.15.0, Roboto Flex (font variabile, assi opsz, wdth, wght, YTUC e YOPQ) 5.3.0.
Compressed with gzip, the three demo files weigh 6.6 KB; the libraries: GSAP 28 KB.
Testing
Tested on 19 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.
