Words that melt into each other
Text, Scroll, SVG
NewFree
Back to the library
The typewritten page
A typewriter seen from above types a letter for a made-up literary café: the typebars strike the letters with the uneven ink of the ribbon, the carriage steps along, the lever throws it back with a snap, a wrong word ends up under the X's. At the end the sheet is pulled out and flies onto the table. A click: a new page.
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 typewritten page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/special-elite@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script fills it with the table, the typewriter, the sheet and the letters -->
<svg class="palco" data-stage role="img" aria-label="A letter from The Inkwell Cafe, typed on a typewriter" xmlns="http://www.w3.org/2000/svg">
<g data-world></g>
</svg>
<p class="nota" data-hint>Click for a new page</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.
35 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 typewritten page” from Animorio and fit it into my siteWhat it does
On a walnut table sits a green typewriter, seen from above as the typist sees it, with a cup of coffee and a pencil beside it. The paper bail lifts, a white sheet slides down from above into the roller, the knob brings it up with two clicks and the bail closes with a little bounce. Then the typing starts: for every letter its key goes down and springs back up, the capitals press the shift key too, a typebar rises from the basket, swings closer and strikes the sheet, the red and black ribbon lifts in front of the letter and the spools turn a little. The letter stays on the sheet in the ribbon's ink: some fainter at the top, some at the bottom or at one side, some heavier, with smudged edges and a few bare specks. At every stroke the carriage jumps one step to the left. At the end of the line the lever goes down, the sheet rises by one line while the knob turns, and the carriage runs back and slams into the margin with a bounce that shakes the machine. On the fifth line the typist gets a word wrong: stops, goes back one letter at a time with the backspace key, strikes X over it and types the right one. The text is a letter from a made-up literary café, The Inkwell Cafe: "Dear reader, the kettle is on and the chairs are waiting. Poems at eight, pie at nine. Yours, Ida". When the letter is done the bail lifts, the knob clicks three times and the sheet is pulled out in one go; it flies over the machine, comes closer as if lifted, falls back onto the table turning, slides a little and stops, while the empty carriage returns. After a few seconds the sheet slides off the table and a new one goes in. A click at any moment pulls the page out as it is and puts in a new one, with the ink a little different every time.
How it works
The text becomes a list of gestures
TEXT is split into lines at every slash and each line becomes a list of gestures: letter, space, pause, backspace. A word in square brackets is a mistake: it is typed, there is a short wait, the carriage goes back as many columns as it has letters, as many X's are struck over it and then a space. Every gesture knows its column, and the column says where the carriage is: at each column it moves left by one letter width, measured on a canvas in the Special Elite face.
A typebar seen from above
The thirty two typebars are lines from a pivot on an arc (the segment) to a head resting on the felt, further out on the same radius. To strike, the head goes straight from the felt to the printing point: seen from above it passes over the pivot, so the line gets shorter and then longer again on the other side, just like a typebar standing up and falling forward. A tween on a number from 0 to 1 redraws line and head on every frame; halfway the line gets thicker and the head bigger, because it is closer to the viewer.
The uneven ink
Every letter is an SVG text of its own, with a small shift, a small rotation and its own final opacity taken from a seeded random number: the same page is always typed the same way, a click changes the seed. The colour is one of five gradients (solid, fainter at the top, at the bottom, on the left or on the right), like a ribbon worn on one side. Over each line sits a filter: feTurbulence makes the noise, feDisplacementMap smudges the edges and an feColorMatrix turns it into holes in the alpha, the specks where the ink did not reach.
The carriage and the roller
The sheet lives inside the carriage, in a group with a clipPath that ends at the edge of the roller: below that line the sheet disappears into the machine, and when it goes in or is pulled out you see it appear or end right there. At the end of a line the lever turns, the sheet rises by one line with back.out and the carriage goes back to zero with power2.in, then bounces six units with an elastic and the machine shakes. The ridges on the knobs move by whole steps of their spacing, so they always end where they started and the knob seems to turn forever.
The pull and the flight
Once the sheet is pulled past the edge of the roller, the script moves it from the carriage to a group above everything, adding the carriage's shift to its x so it does not jump. It flies with x, y, rotation and a scale that first grows (it lifts) and then shrinks (it falls), with its shadow moving away and coming back underneath. When it touches the table it moves into the group under the machine and slides a little more. The story is four timelines in a row (insert, type, pull, rest): a click kills the running one and starts the pull from wherever things are.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
TEXT | script.js | 'THE INKWELL CAFE//Dear reader,/the kettle is on and/the chairs are waiting./[Peoms]Poems at eight,/pie at nine.//Yours, Ida' | The page: a slash starts a new line, two slashes leave an empty line, a word in [square brackets] is typed by mistake and covered with X. Short lines, up to about thirty letters. |
SPEED | script.js | 1 | The speed of the typist and of the whole story: 2 is twice as fast, 0.5 half as fast. |
INK | script.js | 1 | How worn the ribbon is: 0 clean, even letters, 1 uneven ink, 2 very faded and smudged. |
SPACING | script.js | 1.35 | The line spacing, in letter heights: how far the sheet rises at every new line. |
REST | script.js | 3 | How many seconds the page rests on the table before a new sheet goes in. |
TILT | script.js | -8 | How many degrees the page turns as it lands on the table. |
When to use it
For the opening of a bookshop's site, a literary café, a magazine, a writer or a publisher, for a contact page ("write us a letter"), for an invitation or a long loading screen. It works with short texts, one to ten short lines.
On phones
The same story with the sizes adapted: on a tall screen the machine takes the whole width, the carriage runs a little off the sides when it reaches the end of a line and the page lands on the table above the machine. A tap pulls the page out and puts in a new one.
With reduced motion
Nothing moves: the sheet fades in already in place, the lines appear one after the other with their uneven ink and the mistake already covered with X, then the sheet fades out of the machine and back in on the table, and it starts again.
Pitfalls
- In a timeline every fromTo, unless told immediateRender: false, applies its starting value right away: with hundreds of strokes on the same objects (carriage, keys, typebars) the state at startup was the start of the last stroke, with the carriage already at the end of the line.
- The sheet leaving the machine must move into a group above everything, but its x was measured inside the carriage: without adding the carriage's shift it jumped by half a page. Moved at the right moment, when it is all above the edge of the roller, the change cannot be seen.
- A sheet on the table must sit under the machine, which is taller: if it lands over the machine and then changes group, it suddenly vanishes behind the lever. The landing spot is chosen away from the machine, and only the final slide may go underneath.
- The ink filter on every letter made hundreds of filters redraw at every carriage step: it belongs on the whole line, and the unevenness of each letter comes from gradient, opacity, shift and rotation.
- With letters drawn at random the looping video never found the point where it starts again: the randomness has a fixed seed, and a click changes it.
Libraries
GSAP 3.15.0, Special Elite (font) 5.3.0, Fraunces (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 12 KB; the libraries: GSAP 28 KB.
Testing
Tested on 11 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.
