Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
Le parole fra le parentesi
Scorri dentro l’anteprima
I servizi di uno studio in una colonna di parole enormi che scorre dentro due parentesi ferme a metà schermo: la parola fra le parentesi è nitida e più larga, le altre sfocate. Mentre si scorre le parentesi si aprono, spinte da ogni movimento, e appena ci si ferma si richiudono sulla parola.
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>Words between brackets</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/saira@5.3.0/wdth.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>
<!-- the services of a small sound studio: as you scroll, a column of huge words slides up through a pair of
brackets; the word inside is sharp and wide, the others blurred, and the brackets open while you scroll and
close again when you stop -->
<header class="apertura">
<p class="apertura__marchio">Low Tide Audio</p>
<h1 class="apertura__titolo">What we do</h1>
<p class="apertura__sotto">Sound for films, games and records, from one small room by the sea.</p>
</header>
<section class="servizi" data-servizi>
<div class="palco">
<div class="palco__testo">
<p>Five ways to work with us.</p>
<p>Book one, or the whole week.</p>
</div>
<div class="lista" data-lista>
<div class="parentesi" aria-hidden="true">
<svg class="parentesi__sx" data-sx viewBox="0 0 40 160"><path d="M34 6H8V154H34"/></svg>
<svg class="parentesi__dx" data-dx viewBox="0 0 40 160"><path d="M6 6H32V154H6"/></svg>
</div>
<ul class="colonna" data-colonna>
<li class="parola" data-parola>Mixing</li>
<li class="parola" data-parola>Mastering</li>
<li class="parola" data-parola>Foley</li>
<li class="parola" data-parola>Scoring</li>
<li class="parola" data-parola>Sessions</li>
</ul>
</div>
</div>
</section>
<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.
23 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 «Le parole fra le parentesi» da Animorio e adattala al mio sitoCosa fa
La pagina dei servizi di uno studio del suono inventato, Low Tide Audio, su una carta calda: un titolo grande, «What we do», e sotto una sezione che resta ferma mentre la pagina scorre. Lì cinque parole in maiuscolo, strette e pesanti, Mixing, Mastering, Foley, Scoring e Sessions, salgono una dopo l’altra attraverso due parentesi quadre arancioni ferme al centro. La parola che sta fra le parentesi è nitida, nera e si allarga un poco; le altre sono sfocate e più chiare, e il passaggio da una all’altra è morbido. Ogni volta che si scorre le parentesi si aprono verso l’esterno, e un attimo dopo che ci si ferma si richiudono sulla parola del momento.
Come funziona
Il palco fermo
La sezione è alta tre schermi e mezzo e dentro ha un palco sticky alto quanto lo schermo: la pagina scorre, il palco resta, e la colonna di parole è l’unica cosa che si muove.
La colonna
ScrollTrigger lega allo scorrimento, da TRAIL[0] a TRAIL[1], un tween che porta la colonna da mezza parola sotto il centro a tutte le parole meno mezza sopra. Così la parola k sta al centro delle parentesi quando il progresso è (k + 0,5) / 5, cioè a metà del suo quinto di strada.
La parola dentro
La parola fra le parentesi è il progresso per cinque, arrotondato in giù. Riceve una sfocatura di BLUR[0] pixel e le altre di BLUR[1], con una transizione CSS di 0,55 secondi sulla curva 0,33, 1, 0,68, 1; nella stessa transizione si allarga, perché il carattere ha l’asse della larghezza e font-stretch passa da 62 a 78%.
Le parentesi
Ogni evento di scorrimento, mentre la sezione è sullo schermo, manda le parentesi verso l’esterno di SPREAD centesimi della larghezza con un tween di OPEN secondi. Il ciclo dei fotogrammi guarda quando è arrivato l’ultimo scorrimento: passati IDLE millisecondi, le richiude con un tween di CLOSE secondi.
Il tempo dell’attesa
L’attesa prima di richiudere si conta nel ciclo dei fotogrammi e non con un timer: così segue lo stesso orologio delle animazioni, anche quando il banco del sito rallenta o ferma l’anteprima.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TRAIL | script.js | ['top top', 'bottom bottom'] | Dove la colonna comincia e smette di muoversi: un punto della sezione incontra un punto dello schermo. |
BLUR | script.js | [0, 10] | La sfocatura della parola fra le parentesi e delle altre, in pixel (nel sito 2 e 10). |
SPREAD | script.js | [1.6, 4.2] | Quanto si apre ogni parentesi mentre si scorre, in centesimi della larghezza, al computer e al telefono (quelli del sito). |
OPEN | script.js | 0.35 | I secondi in cui le parentesi si aprono (come nel sito). |
CLOSE | script.js | 0.45 | I secondi in cui si richiudono (come nel sito). |
IDLE | script.js | 140 | I millisecondi senza scorrere prima che si richiudano (come nel sito). |
Quando usarla
Per un elenco breve di servizi, di capitoli o di valori che merita di essere letto una voce alla volta: lo scorrimento lo sfoglia, e le parentesi fanno sentire che la pagina risponde.
Sul telefono
Uguale, con le parole più grandi rispetto allo schermo e le parentesi che si aprono di più, 4,2 centesimi della larghezza.
Con il movimento ridotto
La colonna resta ferma con tutte le parole in vista: scorrendo, le parentesi saltano alla parola del momento senza muoversi, e cambiano solo la nitidezza e il colore, in dissolvenza.
Trappole
- La parola dentro va calcolata dal progresso, non dalla posizione sullo schermo: con la colonna che si muove a ogni fotogramma, misurare dove sta ogni parola costa e sbaglia di un fotogramma.
- Un carattere caricato dopo cambia l’altezza delle parole: ScrollTrigger va rimisurato quando i caratteri sono arrivati, altrimenti le parole si fermano fuori dalle parentesi.
- Le parentesi le muove GSAP: non devono avere un transform scritto nel CSS, che GSAP cancellerebbe.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Saira (font variabile, asse della larghezza) 5.3.0, JetBrains Mono (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 4,1 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 10 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Da fare
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.
