Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
I titoli al neon
I titoli compaiono parola per parola come un bagliore azzurro senza lettere, che gira sulla ruota dei colori; poi si riempiono del loro colore mentre il bagliore si spegne.
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>Neon headings</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="page">
<header class="top">
<p class="brand">Spool</p>
<p class="top__line">Release notes</p>
</header>
<!-- every heading with data-neon lights up, word by word, when it comes on screen -->
<section class="hero">
<p class="label">Spring release</p>
<h1 class="heading heading--big" data-neon>Every frame is a block you can play with.</h1>
<p class="text">Pick one up, change it, drop it back on the timeline. Nothing is baked in until you export.</p>
<div class="actions">
<button class="replay" type="button" data-replay data-autoclic>
<span class="replay__text" data-text="Light it again">Light it again</span>
<svg class="replay__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4.5 12a7.5 7.5 0 1 0 2.2-5.3" /><path d="M4.5 4.5v4.2h4.2" /></svg>
</button>
<span class="hint">or scroll</span>
</div>
</section>
<section class="part">
<h2 class="heading" data-neon>Stack them, swap them, keep the ones that work.</h2>
<p class="text">Blocks snap to the beat of your track and remember every setting you give them.</p>
</section>
<section class="part">
<h2 class="heading" data-neon>Your brand kit rides along on every export.</h2>
<p class="text">Colours, type and logos travel with the project, so nobody starts from a blank timeline.</p>
</section>
<section class="part part--last">
<h2 class="heading" data-neon>Wide, tall or square, all in one go.</h2>
<p class="text">One project, every size your channels ask for.</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/SplitText.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.
24 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 «I titoli al neon» da Animorio e adattala al mio sitoCosa fa
Una pagina scura di note di rilascio di un editor video, con quattro titoli. Quando un titolo arriva a schermo le sue parole compaiono una dopo l’altra senza lettere: si vede solo il loro bagliore azzurro, come un’insegna che si accende. Il bagliore gira sulla ruota dei colori verso il viola e il rosa, e intanto, parola per parola, le lettere si riempiono di bianco caldo mentre il bagliore si spegne. Tornando su e riscendendo, il titolo si accende di nuovo; il bottone in alto riaccende il primo.
Come funziona
Le parole
SplitText divide ogni titolo in parole e lascia l’etichetta per i lettori di schermo. Ogni parola parte trasparente, con due ombre azzurre #4cc7f0 di 5 e 18 px: senza le lettere resta solo la loro luce.
Il giro dei colori
Il filtro hue-rotate gira di 160° in un secondo, allo stesso passo per tutte le parole, finché ognuna non comincia a riempirsi; mentre si riempie la sua rotazione torna a zero, così il bianco esce pulito.
Il riempimento
Da 0,3 secondi, una parola ogni 0,05 secondi (le ultime tre una volta e mezza più distanti) prende il suo colore in due terzi di secondo, e l’ombra va verso un rosso trasparente: spegnendosi, il bagliore scivola ancora di colore.
Quando parte
Un IntersectionObserver con un margine di −10% in basso accende il titolo quando entra davvero nello schermo; quando esce dal basso, cioè risalendo, la sua timeline torna all’inizio e si riaccende alla discesa dopo. I titoli restano nascosti finché non sono divisi, così il testo semplice non lampeggia.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
GLOW | script.js | #4cc7f0 | Il colore del bagliore da cui partono le parole. |
TURN | script.js | 160 | Quanto gira il bagliore sulla ruota dei colori, in gradi. |
WORD, FILL_AT | script.js | 1, 0.3 | La durata del giro, in secondi, e quando comincia a riempirsi la prima parola. |
GAP | script.js | 0.05 | Il ritardo fra una parola e l’altra, in secondi. |
MARGIN | script.js | 0px 0px -10% 0px | Quanto deve entrare nello schermo un titolo per accendersi. |
Quando usarla
Per i titoli di una pagina scura: note di rilascio, un lancio, un evento serale, il sito di un locale. Su fondo chiaro funziona lo stesso, ma il bagliore si vede meno.
Sul telefono
Uguale, con titoli da 36 px; il bagliore resta di 5 e 18 px, quindi sullo schermo piccolo sembra più morbido.
Con il movimento ridotto
Niente bagliore: i titoli sono subito scritti nel loro colore.
Trappole
- Due tween sullo stesso filter si pestano i piedi: se il giro dei colori continua mentre la parola si riempie, alla fine la parola resta tinta. Ogni parola ha il suo giro, che si ferma quando comincia a riempirsi.
- hue-rotate gira anche il colore del testo: su un bianco caldo 160° danno un verde. Per questo la rotazione torna a zero durante il riempimento.
- Se il titolo si divide dopo che la pagina è apparsa, per un attimo si vede il testo semplice: si nasconde con una classe sull’html, messa subito dallo script.
Librerie
GSAP 3.15.0, SplitText (GSAP) 3.15.0, Mona Sans (font variabile) 5.3.0, JetBrains Mono (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 4,3 KB; le librerie: GSAP + SplitText 31 KB.
Collaudo
Provata il 28 settembre 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.
