Standing letters with a long shadow
Text, Scroll, 3D
NewFree
Back to the library
The arch and its keystone
Scroll inside the preview
A firm of stonemasons builds its own name as an arch, in the minimal style: as you scroll, a dashed centring rises between two piers, then the stones come in two at a time from the sides, each with a letter that travels thin and takes weight as it lands. The vermilion keystone goes in last and the arch feels the blow; then the centring drops away, the arch settles by a pixel and stands on its own.
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 arch and its keystone</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>
<!-- a made-up firm of stonemasons, Masonry, builds its own name as an arch. Scrolling, a dashed wooden centring goes
up between two piers, then the stones come in from all around, two at a time from the sides, each one carrying a
letter that is thin while it travels and takes weight as it lands. The keystone goes in last, in vermilion, and
the whole arch feels the blow; then the centring comes out and the arch stands on its own -->
<main>
<section class="apertura">
<p class="piccolo">Masonry, stone arches</p>
<h1 class="titolo">Nothing stands<br>until the last stone.</h1>
<p class="piccolo piccolo--tenue">Scroll to build it.</p>
</section>
<section class="racconto" data-racconto>
<div class="palco" data-palco>
<header class="testa">
<p class="marchio">Masonry</p>
<p class="piccolo piccolo--tenue">Built by hand, dry joints</p>
</header>
<h2 class="nascosto">An arch of seven stones that spell Masonry</h2>
<svg class="tavola" data-tavola aria-hidden="true"></svg>
<p class="didascalia" aria-hidden="true">
<span class="didascalia__riga" data-dida>The centring goes up.</span>
<span class="didascalia__riga" data-dida>Stones from both sides, in pairs.</span>
<span class="didascalia__riga" data-dida>The keystone goes in last.</span>
<span class="didascalia__riga" data-dida>The centring comes out. It stands.</span>
</p>
</div>
</section>
<section class="apertura apertura--fine">
<h2 class="titolo titolo--medio">Then it stands<br>for a few centuries.</h2>
</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.
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 arch and its keystone” from Animorio and fit it into my siteWhat it does
A made-up firm of stonemasons, Masonry, on a warm white with black ink, hairlines and a single vermilion. After the opening the screen stops and, as you scroll, the ground line draws itself from the middle outwards, two outlined piers rise and a dashed wooden centring goes up between them: the half circle passes over from left to right, the beam opens and five posts drop to the ground. Then the stones arrive, seven thin-outlined wedges each carrying one big letter turned along the arch: they come in two at a time, one from the left and one from the right, sliding along their own joint lines from outside the arch and speeding up like a stone being lowered. While they travel the letter is thin and narrow; when the stone lands it knocks a hair, bounces barely and the letter takes weight and width. Last comes the keystone, filled with vermilion with a light O: at its blow all the other stones shift by a pixel and come back, less and less towards the piers. The arch spells MASONRY. Then the centring sinks and disappears, the arch drops by a pixel and holds, and between the piers a vermilion dimension line opens from the middle and measures the span: 4.20 m. At the bottom a caption changes its sentence at every stage. Everything follows the scroll, forwards and backwards.
How it works
The arch drawn by the script
Ground, piers, centring and stones sit in one SVG whose viewBox matches the pixels of the pinned stage (position: sticky, 100lvh tall). Each stone is a path: an outer arc, a joint line, an inner arc, the other joint line, with a two-and-a-half pixel joint taken off the angles. The letter sits in the middle of the wedge, turned by 90 degrees minus the stone’s angle, so its top always faces out of the arch.
Every stone arrives along its joint
A stone’s offset is the direction of its radius times how much is left of the journey (TRAVEL times the outer radius), so the low ones come in almost from the side and the keystone drops straight down. The timeline, tied to the scroll with scrub SCRUB, brings them in pairs with power2.in, like a stone being lowered that speeds up; the second of the pair starts a moment later.
The knock and the weight
Each stone has three numbers: p (the journey), c (the knock) and w (the weight of the letter). On arrival c rises in a tenth and comes back with elastic.out: the stone goes out by two pixels and back in. Meanwhile w takes the letter from THIN to BOLD and from 78 to 112 in width with a back.out. When the keystone arrives the same knock passes to all the other stones, with a strength that drops with distance and a small delay, like a wave.
The centring goes
The centring is drawn by rewriting its paths every frame: the half circle reaches an angle that grows, the beam opens from the middle, the posts stretch to the ground one after the other. At the end it drops eighteen pixels and fades, and the whole arch sinks by a pixel and a half with an elastic.out: you can feel it is now holding itself up.
Dimension line, captions and measures
The dimension line is a single path (the line and its two ticks) that opens from the middle to the inner faces of the piers, with the SPAN label appearing when it is almost open. The captions at the bottom leave upwards through an overflow hidden window, widening on Archivo’s wdth axis. All the measures are worked out again on every ScrollTrigger refresh and on every resize.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
WORD | script.js | 'MASONRY' | One letter per stone (up to 13): with an odd number the keystone sits in the middle. |
DEPTH | script.js | 0.32 | How deep the stones are, as a share of the arch’s outer radius. |
TRAVEL | script.js | 0.45 | How far each stone comes from, as a share of the outer radius. |
THIN | script.js | 200 | The weight of the letter while its stone travels. |
BOLD | script.js | 720 | The weight it takes when the stone lands. |
SPAN | script.js | '4.20 m' | What the dimension line reads. |
SCRUB | script.js | 0.6 | How many seconds the drawing takes to catch up with the scroll. |
When to use it
For an architect’s studio, a building firm, a restorer or anyone who builds something piece by piece: an «about us» or «how we work» page where the name is assembled as you read. It works with any short word, best with an odd number of letters.
On phones
The same, with adapted measures: the arch takes almost the full width, the stones are shallower and the letters smaller, the knocks a pixel or so. The caption stays at the bottom.
With reduced motion
No journeys and no bounces: the stones fade in already in place, two at a time, with the letters already full; the centring fades in and out, the captions cross-fade and the dimension line opens.
Pitfalls
- With a long journey (more than half the radius) the top stones came in over the header and were cut by the edge: TRAVEL is set to 0.45.
- Without dominant-baseline central the letter turns around its baseline instead of its centre, and on the sides of the arch it slides out of the stone towards the inside.
- A joint taken off as a fixed angle comes out wide outside and narrow inside: it has to be taken off in pixels, with a different angle for the outer and the inner arc, so it stays the same width.
- The keystone’s knock reuses the stones’ c value, which already has their landing knock in the timeline: the new tweens need immediateRender: false, otherwise GSAP writes their starting value at once and scrolling back makes the stones jump.
Libraries
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Archivo (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 6.7 KB; the libraries: GSAP + ScrollTrigger 45 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.
