Marquee that speeds up with scroll
Scroll, Text, Hover
Free
Back to the library
The modular word
A word drawn with twenty rectangles and stretched to fill the screen: a lens follows the pointer and where it passes the letters widen and the rows grow taller. Scrolling, the word retreats into a header.
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 word in blocks</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- la banda: una parola fatta di rettangoli, stirata a riempire lo schermo; scorrendo si ritira in testata -->
<header class="banda" data-banda>
<div class="banda__fondo" data-fondo aria-hidden="true"></div>
<div class="banda__parola" data-parola aria-hidden="true"></div>
<h1 class="nascosto">Trama</h1>
</header>
<p class="nota" data-nota>Move the mouse over the word: it is made of rectangles, and it widens where you pass. Then scroll.</p>
<main class="pagina" data-pagina>
<section class="testo">
<h2 class="testo__titolo">A word made of rectangles.</h2>
<p class="testo__corpo">Every letter is a handful of rectangles on a grid of ten rows: the stems are three wide, the bars two tall. No curves, no font to load. That is why the word can be stretched any way you like: the proportions change, but it stays readable.</p>
<p class="testo__corpo">On every frame the script works out again the width of each letter and the height of each row around one point, the lens, and rewrites the sizes of the rectangles. Where the lens is the word swells, and the rest squeezes in to make room.</p>
</section>
<section class="testo testo--due">
<h2 class="testo__titolo">Scroll, and the word folds up into a header.</h2>
<p class="testo__corpo">The band goes from the whole screen to a strip at the top, and the rectangles line up again by themselves inside the new size. The lens keeps working up there too.</p>
</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.
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 modular word” from Animorio and fit it into my siteWhat it does
The word TRAMA (weave) fills the screen, drawn with an alphabet made only of rectangles: each letter sits on a ten-row grid, with stems three wide and bars two tall. On opening the letters grow from the bottom one after the other. Moving the mouse, an invisible lens deforms it: the letters near the pointer widen, the nearby rows grow taller, and the rest squeezes to make room, without the word ever becoming unreadable. Scrolling, the band retreats into a strip at the top at the same speed as the page, and the rectangles line up again by themselves inside the new size; the lens works there too.
How it works
An alphabet of rectangles
Each letter is an object with its width in units and a list of rectangles [x, y, width, height] on ten rows: the T has two, the R five. The script creates one element per rectangle, absolutely positioned inside the band. No font and no SVG: to stretch the word you only change the measurements.
Letters have weight
On every frame each letter takes a weight, 1 plus the lens strength times a Gaussian bell on the distance between its centre and the pointer. Widths and gaps are multiplied by the weight and then all scaled together to fill the band: what widens on one side squeezes on the other.
The rows bend
Vertically a 64-step table is built: the density of each band is 1 plus a bell around the pointer’s height, and adding them up gives a curve from 0 to 1 that only ever rises. Every rectangle edge goes through the curve, so the nearby rows grow taller and none ever crosses another.
Edges rounded one by one
The two edges of each rectangle are rounded to the pixel separately, and the width is their difference: two touching modules share the same pixel, and no hairline gap ever appears between them. Measurements are written only when they change.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
PAROLA | script.js | TRAMA | The word: every letter must exist in ALFABETO. |
ALFABETO | script.js | T, R, A, M | The letters: width in units and rectangles [x, y, width, height] on ten rows. Add more the same way. |
LENTE | script.js | 1.7 | How much the part under the pointer swells; 0 turns it off. |
LARGA, ALTA | script.js | 0.2, 0.3 | How wide and tall the lens is, as fractions of the word and of the band. |
TESTATA | script.js | 0.1 | The height of the retreated band, as a fraction of the width. |
When to use it
For the name of a brand, a project or an exhibition that must take the whole first screen and then become the header: a short word, five or six letters, drawn with rectangles.
On phones
On a phone the band is only a little taller than it is wide (as tall as the screen it would turn into stripes) and the lens tours the corners by itself; a tap brings it where you touch.
With reduced motion
The word stays still at the top of the page, with no lens and no growth; the band does not retreat and the page scrolls normally.
Pitfalls
- Rounding the width instead of both edges opens one-pixel gaps between neighbouring modules, which flicker while the lens moves.
- Scaling the height near the pointer is not enough to bend the rows: you need a curve that only rises, or two rows cross.
- If the letter widths change but the gaps do not, the word goes off balance: the gaps must take the weight of the letters beside them too.
- As tall as a phone screen, the word becomes a series of stripes: below 700 px the band is only a little taller than it is wide.
Libraries
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 5.3 KB; the libraries: GSAP + ScrollTrigger 45 KB.
Testing
Tested on 21 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: Done
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.
