Marquee that speeds up with scroll
Scroll, Text, Hover
Free
Back to the library
A torch on the headline
A headline in the dark: it lights up only around the pointer, and the nearest letter warms to lantern colour and takes half a second to cool, so a trail stays behind the light.
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 torch on the heading</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>
<main>
<!-- la notte: al telefono è più alta dello schermo e la torcia la muove lo scorrimento -->
<section class="notte" data-notte>
<div class="palco" data-palco>
<div class="alone" data-alone aria-hidden="true"></div>
<p class="nota" data-nota>Move the mouse over the heading: it lights up only where you bring the light, and the letters it touches stay warm for a moment.</p>
<h1 class="titolo" data-titolo>Only where you bring the light</h1>
<p class="sotto">Night walks through the fields, with a lantern and little else.</p>
</div>
</section>
<section class="pagina">
<h2 class="pagina__titolo">One letter at a time.</h2>
<p class="pagina__testo">Every letter of the heading knows how far it is from the light. The close ones stay lit, the others sink into the shadow, and the closest one warms up and takes a while to cool down: the light leaves a trail behind it.</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.
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 “A torch on the headline” from Animorio and fit it into my siteWhat it does
A huge, condensed, uppercase headline on a night background: “Si vede solo dove porti la luce” (you only see where you bring the light). While nobody passes over it, it is lit and readable. With the pointer on it, it falls into shade except around the light, which follows the pointer with a slight lag; the nearest letter turns lantern colour, grows a little and takes a glow, then cools in half a second, so a trail of warm letters stays behind the light. Behind the headline, a soft pool of light follows the same path. On a phone the scene is taller than the screen and, as you scroll, the light passes over the lines one after the other.
How it works
Letters measured once
The script splits the headline into words and letters, and measures each letter’s centre relative to the headline, once, then again when fonts load and on every resize. On every frame it reads only the headline’s box and the scene’s: every other position is arithmetic.
How close it is
For each letter the distance from the light, with the vertical part weighted 1.3 times, becomes d = (1 − distance / radius)^1.6, with a 1.5 em radius. Brightness is the larger of 1 − 0.8 × (1 − d) × lit and the letter’s warmth: lit is 0 when the pointer is outside, and then the whole headline is readable.
The warm trail
The letter nearest the light takes warmth 1, which drops by 2.2 per second. Warmth mixes the colour from cream to amber, adds up to 6% scale and a lantern-coloured text-shadow. Values are written only when they change.
The phone’s torch
Without a pointer, the section becomes 2.3 screens tall with a sticky stage. A ScrollTrigger turns the progress into a point on the headline’s lines, left to right, line after line; at a line break the light jumps instead of sliding back.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
RAGGIO | script.js | 1.5 | How wide the light is, in the headline’s em. |
OMBRA | script.js | 0.2 | How visible the letters stay in the dark. |
CALA | script.js | 2.2 | How fast a warmed letter cools, per second. |
CREMA, LANTERNA | script.js | rgb | The letters’ colour and the warm letter’s colour. |
When to use it
For the headline of a site that lives at night: a restaurant, a bar, an open-air cinema, a night photographer. It says at once that the page is there to be explored.
On phones
On a phone the light is moved by scrolling: the scene holds still and the light crosses the headline’s lines one after the other.
With reduced motion
The headline stays lit and still: no shade, no trail, no pool of light.
Pitfalls
- Reading every letter’s box on every frame forces the browser to recompute the page twenty-five times: measure once, then do the arithmetic.
- If the headline stays dark until the pointer arrives, whoever does not move it reads nothing: better lit to begin with, and dark only with the pointer on it.
- Scaling the letters changes their size: positions are taken at scale 1, before the light touches them.
- On a phone there is no pointer moving by itself: the light has to be tied to something the finger does anyway, scrolling.
Libraries
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 4.4 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.
