Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
La torcia sul titolo
Un titolo al buio: si accende solo intorno al puntatore, e la lettera più vicina si scalda color lanterna e ci mette mezzo secondo a raffreddarsi, così dietro la luce resta una scia.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.
<!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
Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.
15 valori da cambiare
Oppure chiedila a Claude Code
Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:
Prendi «La torcia sul titolo» da Animorio e adattala al mio sitoCosa fa
Un titolo enorme, stretto e maiuscolo su un fondo notte: «Si vede solo dove porti la luce». Finché nessuno ci passa sopra è acceso e si legge. Col puntatore sopra scende nell’ombra, tranne intorno alla luce, che segue il puntatore con un piccolo ritardo; la lettera più vicina diventa color lanterna, cresce appena e prende un alone, poi si raffredda in mezzo secondo, così dietro la luce resta una scia di lettere calde. Dietro al titolo, una pozza di luce morbida segue la stessa strada. Al telefono la scena è più alta dello schermo e, scorrendo, la luce passa sulle righe una dopo l’altra.
Come funziona
Lettere misurate una volta
Lo script divide il titolo in parole e lettere, e misura il centro di ogni lettera rispetto al titolo, una volta sola, e poi a caratteri caricati e a ogni ridimensionamento. A ogni fotogramma legge solo il riquadro del titolo e quello della scena: tutte le altre posizioni sono conti.
Quanto è vicina
Per ogni lettera la distanza dalla luce, con la parte verticale pesata 1,3 volte, diventa d = (1 − distanza / raggio)^1,6, con un raggio di 1,5 em. La luminosità è il massimo fra 1 − 0,8 × (1 − d) × accesa e il calore della lettera: accesa vale 0 quando il puntatore è fuori, e allora il titolo è tutto leggibile.
La scia calda
La lettera più vicina alla luce prende calore 1, che scende di 2,2 al secondo. Il calore mescola il colore dalla crema all’ambra, aggiunge fino al 6% di scala e un text-shadow color lanterna. Le misure si scrivono solo quando cambiano.
La torcia del telefono
Senza puntatore, la sezione diventa alta 2,3 schermi con il palco sticky. Uno ScrollTrigger trasforma l’avanzamento in un punto sulle righe del titolo, da sinistra a destra, riga dopo riga; a capo la luce salta invece di tornare indietro strisciando.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
RAGGIO | script.js | 1.5 | Quanto è larga la luce, in em del titolo. |
OMBRA | script.js | 0.2 | Quanto restano visibili le lettere al buio. |
CALA | script.js | 2.2 | Quanto in fretta si raffredda una lettera scaldata, al secondo. |
CREMA, LANTERNA | script.js | rgb | Il colore delle lettere e quello della lettera calda. |
Quando usarla
Per il titolo di un sito che vive di sera: un ristorante, un locale, un cinema all’aperto, un fotografo notturno. Dice subito che la pagina si esplora.
Sul telefono
Al telefono la luce la muove lo scorrimento: la scena resta ferma e la luce attraversa le righe del titolo una dopo l’altra.
Con il movimento ridotto
Il titolo resta acceso e fermo: niente ombra, niente scia, niente pozza di luce.
Trappole
- Leggere il riquadro di ogni lettera a ogni fotogramma costringe il browser a ricalcolare la pagina venticinque volte: si misura una volta e poi si fanno i conti.
- Se il titolo è spento finché il puntatore non arriva, chi non lo muove non legge niente: meglio acceso di partenza, e al buio solo col puntatore sopra.
- La scala sulle lettere cambia la loro misura: le posizioni si prendono a scala 1, prima che la luce le tocchi.
- Al telefono non c’è un puntatore che si muove da solo: la luce va legata a qualcosa che il dito fa comunque, lo scorrimento.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 4,4 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 21 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
Licenza d’uso
Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.
