The acronym that spells itself out

Text, IntroGSAP, CSS onlyAdvancedCompressed weight: Demo 7.2 KBGSAP 28 KBFreeDownload the zip

A three-letter acronym in the minimal style: one after the other the capitals open, the rest of the word slides out of a red slit on their right and shoves the next word, which follows on a spring. Once the full name has been read, the words slide back in and the acronym returns.

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.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The acronym that spells itself out</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>
    <!-- one line on a hairline: the script builds a word for every name in WORDS, the initial in front and the rest
         of the word folded away behind it, in a slot that opens to its right -->
    <div class="line" data-line aria-hidden="true">
      <i class="rule" data-rule></i>
    </div>

    <h1 class="sr-only" data-name>Half Open Window</h1>
  </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.

15 values to change

Open the Playground

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 acronym that spells itself out” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On ivory paper a hairline draws itself from the middle, three ticks drop under it and three wide black capitals rise out of the line: HOW, the name of a studio. After a moment the H opens: a red slit appears beside it, the letter squeezes a little to make room, and out of the slit comes the rest of the word, «alf», light and very narrow; every letter, as soon as it is out, widens to its size with a small settle. The growing word shoves the O, which follows it on a spring: it lags behind, leans back a hair like someone being pushed, then reaches its place and passes it by a pixel. Then the O opens into «Open», then the W into «Window», and the full name «Half Open Window» stays to be read, its initials still black and heavy. As the name is longer than the page, the line pulls back gently while it grows, always in the middle. Then the words slide back into their slits, from the right: the letters squeeze as they disappear, the next word is pulled back by the spring and every capital shuts with a small kick. The acronym is back, the capitals sink into the line, the line withdraws and it all starts again.

How it works

A word in three pieces

For every word in WORDS the script builds a block of three pieces on top of each other: the capital, a slit (a span with overflow: hidden, zero wide at rest) and inside the slit the rest of the word, pinned to its right edge. When the slit widens, the word comes out from behind the capital like a tape measure from its case: the last letters show first. The red slit is a two-pixel line on the edge, which rises when the word moves and drops when it is still.

Letters that widen as soon as they are out

The typeface is Anybody, variable on the wdth axis (50 to 150) and the wght axis (100 to 900). Every letter has a number k from 0 to 1: at 0 it is SQUEEZE wide and thin, at 1 it is 100 wide and weighs WORD_WEIGHT. The letters reach 1 from the last to the first, on a damped spring written as an easing function (SPRING sets the damping, and the spring ends exactly on 1), so they pass their size by a whisker and come back. The capital moves on the wdth axis too: it squeezes by 18 when the word sets off and widens by 12 when it shuts.

The real measures, every frame

In a function on the GSAP ticker the script first writes the axes of every letter, then reads the real widths of the capital and of the rest of the word (getBoundingClientRect), then writes the positions: so the page lays out once per frame. The widths read have to be divided by the zoom of the line and, if the word is leaning, reduced by tan(angle) times the height of the letter.

The spring push

The positions are worked out from the start of the line: the first word stands still, every other one follows the end of the one before plus a space (tight between capitals, normal between whole words) on a real spring, simulated in four steps per frame. If it gets closer than 0.06 em it is shoved and takes the speed of the word pushing it, then the spring brings it to its place one pixel too far. How far it lags also sets how much it leans (skewX from the baseline). Only at the end is the whole line moved to stay in the middle, and the zoom makes it smaller if it does not fit.

The direction

A GSAP timeline with repeat: -1 moves only numbers: the line, the ticks, the capitals rising (cut at the baseline by a clip-path), every word opening STAGGER seconds after the one before, HOLD seconds with the full name, the closing from the right, the capitals sinking. SPEED is the timeline's timeScale and also multiplies the spring's time, so everything speeds up together.

Values to change

Name	File	Default	What it changes
`WORDS`	script.js	`['Half', 'Open', 'Window']`	The name, word by word: the first letters make the acronym. Two to four words.
`INITIAL_WEIGHT`	script.js	`800`	The weight of the capitals, from 100 (a hairline) to 900 (black).
`WORD_WEIGHT`	script.js	`330`	The weight the rest of every word settles at. The further it is from the capitals’ weight, the more the acronym shows inside the name.
`SQUEEZE`	script.js	`50`	How narrow the letters are as they come out of the slit, on the wdth axis: 50 is the narrowest the typeface goes, 100 its normal width.
`SPRING`	script.js	`0.5`	How springy it all is: 0 slides and stops dead, 1 shoves hard and wobbles before it settles.
`STAGGER`	script.js	`0.55`	How many seconds pass between one word opening and the next.
`HOLD`	script.js	`2.2`	How many seconds the full name stays before it folds back into the acronym.
`SPEED`	script.js	`1`	The speed of the whole animation, springs included: 2 is twice as fast, 0.5 half as fast.

Try them in the Playground

When to use it

For the brand of anyone who goes by an acronym: an agency, an architecture or design studio, a law firm, a festival, a foundation. It works as the logo intro when the site opens, at the top of an «about» page or at the bottom, next to the contacts, where it explains in a few seconds what the letters stand for.

On phones

The same animation: the acronym is bigger compared with the screen and the line pulls back further to fit the full name on one line, edge to edge minus the margins.

With reduced motion

Nothing slides out, widens or pushes: the acronym fades in already in place, fades out, the full name appears in its place already set, then the acronym again. The line and the ticks are already there.

Pitfalls

With the springs worked out around the middle of the line, when a word closed the first word moved right to re-centre the line and ran into the second, which was lagging. The springs have to be worked out from the start of the line, with the first word still, and the line is re-centred afterwards, all together.
getBoundingClientRect measures transforms too: with the line zoomed out the widths read are smaller than they are, and with the word leaning they are bigger (the box of a slanted letter is wider). Divide by the zoom and take off tan(angle) times the height of the letter; offsetWidth ignores transforms but rounds to the pixel, and the word would move in steps.
The clip-path that cuts the capitals at the baseline is only needed while they rise and sink: left on, it cut the leg of the p in «Open».
In the push the letters of two words touched and the name read «HalfOW»: the push starts 0.06 em away, and the tight space of the acronym is a little wider (0.07 em), so the acronym at rest does not push.
A canvas does not know the wdth axis, but the height of the capitals does not change with the width: to centre the line vertically it is enough to measure the H on a canvas at the right weight.

Libraries

GSAP 3.15.0, Anybody (font variabile, assi wdth e wght) 5.3.0.

Compressed with gzip, the three demo files weigh 7.2 KB; the libraries: GSAP 28 KB.

Testing

Tested on 15 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.