The wrecking-ball logo
Intro, Physics, SVG, Text
NewFree
Back to the library
The held vowel
A text animation in the minimal style: one small word in the middle of a wide page, slow. Press and hold and the word says itself slowly: the o widens to the end of the width axis, then more o’s bud from it, one after the other, each born as a sliver that swells on a spring, each a little lighter, like a voice holding the note. A vermilion line measures how long it lasts. Let go and the o’s fold back into the first one.
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 held vowel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage tabindex="0" aria-label="Press and hold to stretch the word">
<header class="top">
<span class="top__brand">Casa Orla</span>
<span class="top__note">Slow weekends by the lake</span>
</header>
<!-- the word: the script splits it and, while you hold, the vowel widens and new copies of it bud from it -->
<div class="row" data-row>
<h1 class="word" data-word>slow</h1>
</div>
<!-- how long the vowel has been held: a vermilion line under it, with a mark at every new letter -->
<div class="held" data-held aria-hidden="true">
<i class="held__line" data-line></i>
<span class="held__time" data-time>0.0 s</span>
</div>
<p class="hint" data-hint aria-hidden="true">Press and hold</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.
17 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 held vowel” from Animorio and fit it into my siteWhat it does
On warm white paper, at the top, the name of an invented lake house, Casa Orla, and its line, Slow weekends by the lake; in the middle, small against the page, the word slow, which arrives rising letter by letter. After a moment the word holds itself: the o widens, softly, into a wide oval, and under it a thin vermilion line appears. Then another o buds from it, born thin as a sliver and taking no room, and swells on a spring to its size, pushing the w to the right; then another and another, every three tenths of a second, each a little lighter than the one before, until the word becomes sloooooooow and crosses almost the whole page. The vermilion line stretches under all the o’s, with a mark where each one begins, and at its end the seconds count. Then the voice stops: the o’s fold back into the first one, from the last, narrowing one after the other, the o goes back to narrow passing its size by a whisker, and the line goes out. After a pause the word holds itself again, shorter. Pressing and holding on the page, with the mouse, a finger or the space bar, stretches the o for as long as you hold.
How it works
A very wide typeface
Anybody has a width axis from 50 to 150 and weight from 100 to 900, in Fontsource’s «wdth» file. At rest the word stands at width 100 and weight WEIGHT; holding, the vowel goes to 150 on a damped spring written as an easing function (BOUNCE sets how far it passes its size), and the spring ends exactly on the right size.
The o’s that bud
While you hold, a counter counts the seconds: after 0.35 seconds of widening alone, a copy is born every EVERY seconds, up to MAX. Every copy is a span inserted right after the last one, with a value g from 0 to 1: the width goes from 50 to 150, the weight from the lightest to its own (WEIGHT minus FADE for every copy before it), and a negative left margin, as wide as the letter at its narrowest, makes it born taking no room. g goes to 1 on the same spring.
The line of time
On each frame getBoundingClientRect reads the first and the last o: the vermilion line goes from one to the other, with a one-pixel mark where every copy begins, and the seconds held are written at its end in tabular figures. The type size is chosen so that the longest possible word (MAX copies at full width) fits the page.
Letting go of the note
Letting go, the copies go back to g 0 with power3.in, from the last to the first, staggered by 0.06 seconds, and are then removed; then the first o goes back to width 100 on the spring, passing it by a whisker, and the line fades. A new press removes at once any copies caught halfway.
On its own or by hand
When nobody touches it a GSAP timeline presses and lets go by itself: a long note up to all the copies and a short one of three. The first pointerdown stops it and the page follows the hand; after three and a half seconds without hands the timeline starts again. With the space bar or Enter the note is held from the keyboard.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
WORD | script.js | 'slow' | The word. |
VOWEL | script.js | 'o' | The letter that is held: the first one in the word that matches. |
MAX | script.js | 7 | How many copies of the vowel at most. |
EVERY | script.js | 0.3 | How many seconds of holding for every new copy. |
WEIGHT | script.js | 640 | The weight of the word, from 100 to 900. |
FADE | script.js | 55 | How much lighter every new copy is than the one before. |
BOUNCE | script.js | 0.35 | How far a copy passes its size before it settles: 0 stops dead, 1 wobbles a lot. |
AUTO | script.js | true | Whether, when nobody touches it, the word holds the note on its own. |
When to use it
For the opening of a holiday home, a farm stay, a spa, a retreat or anything that sells slowness; also for a game, a greeting (heeey), a stadium shout (goooal) or a button to press and hold. It works with short words with a vowel to stretch.
On phones
The same animation: the word is measured so that the longest version fits the screen, and the note is held with a finger (the long-press menu is turned off).
With reduced motion
Nothing widens and nothing buds: holding, the short word fades out and comes back already long, with the line under it; letting go, it fades out and comes back short. The automatic press does the same.
Pitfalls
- A new copy at width 50 still takes almost half a type size, and the w jumped right as soon as it was born: a negative left margin, as wide as the copy at its narrowest, makes it born taking no room, and the space opens as it swells.
- If the type size is chosen on the word at rest, the long word goes off the screen: the version with all the copies at full width is measured, and the size is chosen so that it fits the page. At rest the word is small with a lot of empty space, and that is right.
- On a phone a long press opens the text or image menu: contextmenu blocked, -webkit-touch-callout: none and no selection.
- With reduced motion the copies budding one at a time moved the w in jumps: there the long word arrives whole, as a fade.
Libraries
GSAP 3.15.0, Anybody (font variabile, assi wdth e wght) 5.3.0.
Compressed with gzip, the three demo files weigh 5.7 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.
