Marquee that speeds up with scroll
Scroll, Text, Hover
Free
Back to the library
The equaliser word
A text animation in the minimal style: the name of a late-night radio station, and every letter is a band of an equaliser, low notes on the left and high ones on the right. The louder its band, the taller the letter on the cap height axis, the wider and the heavier. Over each one a thin mark holds the peak, then falls; at the top it turns vermilion. Running the pointer along the word turns the bands under it up.
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 equaliser word</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>
<!-- every letter is a band of an equaliser: the louder its band, the taller (cap height axis), wider and heavier
it gets. Above each one a thin peak mark holds the loudest moment and then falls -->
<div class="meter" data-meter>
<div class="scale" data-scale aria-hidden="true"></div>
<h1 class="word" data-word>LOWTIDE</h1>
<i class="bed" data-bed aria-hidden="true"></i>
</div>
<p class="foot" data-foot>
<span class="foot__brand">Lowtide 98.4 FM</span>
<span class="foot__note">Late and quiet, every night</span>
</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.
15 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 equaliser word” from Animorio and fit it into my siteWhat it does
On warm white paper a black line stretches out from the left and on it appears LOWTIDE, the name of an invented radio station, in capitals; the letters rise one after the other to the top and drop back. Then a song you cannot hear starts, eight beats going round and round: every letter is a band, the L the lows and the E the highs. On every kick the first letters jump: they get taller (the typeface has an axis for the height of the capitals), wider and blacker, then drop back slowly, narrow and thin; the snare moves the letters in the middle and the hats make the last ones flicker, while a little melody passes from one letter to the next and at the end of the phrase everything swells. Every letter sits in its own cell, so the neighbours never move. Over every letter a thin grey mark rises with it, stays a moment at the highest point and then falls, faster and faster; when a band reaches the top its mark turns vermilion. On the left a thin scale, from −24 to 0 dB. Running the mouse or a finger along the word lifts the letters under it, more if you go fast. At the bottom the name of the station and its line.
How it works
The cap height as a level
Roboto Flex, in Fontsource’s «full» file, has the YTUC axis: the height of the capitals, from 528 to 760 thousandths of the type size. The level of every band, from 0 to 1, moves YTUC, the width (from 38 to 124) and the weight (from 150 to 900) together, written into the letter’s font-variation-settings only when they change. Every letter stands in the middle of a cell as wide as the letter at its widest, so widening it does not push its neighbours.
A song you cannot hear
The song is a function of the beat: a kick that decays fast on every beat and weighs on the low bands, a snare on the second and fourth for the middle ones, hats on the eighths for the high ones, a melody passing from band to band with a Gaussian bell and a swell in the last two beats. The beat is moved by a GSAP timeline eight beats long at BPM, repeating forever, so the editing bench can slow it down.
Up at once, down slowly
Every letter chases the level of its band: when the level rises it reaches it almost at once, when it falls it follows at a speed RELEASE, like a real meter. So the hits are sharp and the tails long.
The peak mark
The mark over every letter rises with it, then stays still for HOLD seconds and falls with real gravity, faster and faster, until it meets the letter again. Above 93% it turns vermilion, the only colour on the page.
Hands on the radio
The pointer (or a finger) gives every band a push that depends on how close it is to the middle of its letter and how fast it moves; the push dies out by itself in a little over half a second. On the way in the same push, given to one letter at a time, makes them rise in a row.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
WORD | script.js | 'LOWTIDE' | The word: one band per letter, the lows on the left. |
BPM | script.js | 104 | The tempo of the silent song, in beats per minute. |
LOUD | script.js | 0.9 | How loud it plays: 0.3 barely moves, 1 often hits the top. |
RELEASE | script.js | 3.2 | How fast a letter drops after a hit: 1 slowly, 8 at once. |
HOLD | script.js | 0.55 | How many seconds the peak mark stays up before it falls. |
TOUCH | script.js | 0.9 | How much the pointer lifts the bands under it. |
When to use it
For a radio station, a podcast, a record label, a music festival, a venue with gigs or a listening app: the name that plays. It works with short words in capitals, five to eight letters, one per band.
On phones
The same animation: the word is measured for the screen and the decibel scale is hidden to leave it room. Sliding a finger along the word lifts the bands.
With reduced motion
Nothing moves: the word fades in with every letter at half level, each with its mark above, and stays like that; the pointer does not change it.
Pitfalls
- With the letters in a line, every letter that widened pushed the others and the whole word shook: every letter has a cell as wide as the letter at its widest, measured once at the start.
- The height axis goes from 528 to 760: the letters rise by a third at most. On its own the movement looked shy; together with width and weight the kick reads at once, and the peak mark makes the height visible too.
- An equaliser following random numbers never ends and never repeats: the song is a function of the beat and the beat is moved by a repeating timeline, so the round is always the same and the editing bench can slow it down.
- On a phone the scale on the left went off the screen: below 560 px it is hidden.
Libraries
GSAP 3.15.0, Roboto Flex (font variabile, assi opsz, wdth, wght e YTUC) 5.3.0.
Compressed with gzip, the three demo files weigh 5.3 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.
