Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
La parola sulle paillettes
Nello stile minimal: un tessuto di paillettes quadrate sottilissime, chiare da un lato e scure dall'altro. Il puntatore ci passa sopra come una mano: le paillettes si girano in 3D nella direzione del gesto e ricadono con una molla, ma quelle di una parola nascosta restano sul lato scuro, così dietro la mano resta scritto Hush. Dopo un poco la parola si rigira da sola, una paillette alla volta.
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>Hush</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a cloth of thin square sequins, pale on one side and ink on the other: a hand brushing over it turns them, and
a hidden word stays written on the dark side for a while -->
<main class="stage" data-stage>
<canvas class="cloth" data-cloth aria-hidden="true"></canvas>
<h1 class="sr" data-word>Hush.</h1>
<p class="note note--top" data-top aria-hidden="true">
<span class="note__l">Sequin cloth</span>
<span class="note__r" data-size></span>
</p>
<p class="note note--bottom" data-bottom>
<span class="note__l" data-hint>Brush over the sequins.</span>
<span class="note__r" aria-hidden="true"><span class="note__label">Written</span> <b class="note__value" data-read>0%</b></span>
</p>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.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.
21 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 parola sulle paillettes» da Animorio e adattala al mio sitoCosa fa
Su un fondo color carta c'è un rettangolo di piccole paillettes quadrate, tutte bianche e separate da un filo di vuoto, con due scritte piccole sopra (il nome del tessuto e le sue misure in paillettes) e due sotto. All'inizio le paillettes arrivano di taglio, come righe sottili, e si aprono piatte da sinistra a destra come una tapparella, con un piccolo rimbalzo. Poi una mano invisibile passa una volta lungo il tessuto: le paillettes sotto di lei si girano in 3D, le altre ricadono subito tremando un poco, e quelle di una parola nascosta atterrano sul lato nero e ci restano: compare Hush., col punto in vermiglio. Passando col puntatore si fa lo stesso: le paillettes vicine al gesto si girano nella sua direzione (in orizzontale, in verticale o sulla diagonale), quelle al centro del gesto per prime e quelle ai lati un attimo dopo; mentre si girano prendono la luce da in alto a sinistra e il lato nero manda un riflesso grigio. Le paillettes della parola restano scure per qualche secondo dopo il passaggio, poi si rigirano piano, una alla volta, e il tessuto torna bianco. Ripassando su una parte già scritta, quelle paillettes fanno solo un piccolo brivido sul posto. In basso a destra una scritta dice quanta parte della parola è scritta, con la cifra che si fa più pesante quando cresce. Se il tessuto resta pulito e nessuno lo tocca, la mano invisibile ripassa, ogni volta dall'altra parte.
Come funziona
La parola come mappa di paillettes
La parola si scrive una volta sola su un canvas nascosto, dieci pixel per paillette, un carattere alla volta e con una paillette di aria fra un carattere e l'altro (così le lettere non si toccano mai). Una paillette appartiene a un carattere quando poco meno di metà del suo quadrato è inchiostro: si leggono pochi punti del quadrato con getImageData e se ne fa la media. Le paillettes dei segni di punteggiatura ricevono il colore d'accento sul retro. La grandezza delle maiuscole in paillettes è LETTER: più paillettes, lettere più fini e paillettes più piccole.
Una paillette che gira, disegnata a mano
Ogni paillette è un oggetto con un angolo e un asse che sta nel piano del tessuto. Per disegnarla si girano in 3D i suoi quattro angoli intorno all'asse e si guardano in prospettiva da davanti alla paillette; il segno del coseno dice quale lato si vede. La normale del lato visibile, confrontata con una luce in alto a sinistra, schiarisce o scurisce il bianco e accende il riflesso sul nero. Quando la paillette è quasi di taglio si disegna anche il suo bordo sottile, così non sparisce mai. Le paillettes ferme si disegnano in tre gruppi, uno per colore, con un solo fill ciascuno; quelle che girano una per una sopra le altre.
La mano: un tratto e un asse
A ogni movimento del puntatore si prende il segmento dal punto precedente a quello nuovo e si toccano le paillettes il cui centro è entro BRUSH paillettes dal segmento. L'asse del giro è perpendicolare al gesto, ma arrotondato a una delle otto direzioni in cui un quadrato girato di mezzo giro torna sulla sua griglia (orizzontale, verticale e le due diagonali): con un asse qualsiasi le paillettes nere sarebbero rimaste storte. L'asse cambia solo quando la paillette è piatta, e una paillette appena toccata ignora la mano per un attimo, così non riparte a ogni fotogramma.
Scrivere, increspare, rigirare
Ogni tocco è una piccola timeline GSAP sulla paillette. Fuori dalla parola: si alza fino a RUFFLE di mezzo giro e ricade con elastic.out, un tremolio misurato. Nella parola: va sul lato scuro con back.out (BOUNCE è l'overshoot), poi, dopo HOLD secondi più un piccolo ritardo diverso per ognuna, torna indietro in RETURN secondi con back.inOut, così la parola si sfalda una paillette alla volta. Una paillette già scritta che viene ripassata fa solo un brivido con elastic.out e il suo ritorno riparte da capo. Il ritardo di ogni tocco cresce con la distanza dal centro del gesto: prima il centro, poi i lati.
La regia: l'apertura e la mano invisibile
L'apertura è una timeline GSAP: tutte le paillettes partono di taglio sull'asse orizzontale e si aprono con back.out sfalsate per colonna, come una tapparella; poi entrano le scritte. La mano invisibile è un tween che porta un punto da un capo all'altro della parola su un arco leggero, con un raggio alto quanto la parola, e chiama la stessa funzione del puntatore: la parola si scrive in un passaggio solo. Torna IDLE secondi dopo che il tessuto è di nuovo pulito, dall'altra parte; un puntatore vero la manda via. Il canvas si ridisegna solo quando qualcosa si muove.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'Hush.' | La parola nascosta nel tessuto (fino a 10 caratteri; corta resta grande). La punteggiatura ha il retro color accento. |
LETTER | script.js | 13 | Quanto sono alte le maiuscole, in paillettes: di più vuol dire lettere più fini e paillettes più piccole (sul telefono un po' meno). |
BRUSH | script.js | 2.8 | La larghezza della mano, in paillettes dal centro del gesto. |
RUFFLE | script.js | 0.62 | Quanto si alzano le paillettes fuori dalla parola: 0.3 un'increspatura, 0.9 quasi un giro intero (0 = restano ferme). |
BOUNCE | script.js | 1.9 | Quanto va oltre una paillette che atterra sul lato scuro prima di posarsi (0 = niente). |
HOLD | script.js | 2.4 | Per quanti secondi la parola resta scritta dopo il passaggio della mano. |
RETURN | script.js | 1.5 | In quanti secondi una paillette della parola si rigira. |
IDLE | script.js | 3 | Dopo quanti secondi di tessuto pulito la mano invisibile ripassa (0 = mai). |
--back | style.css | #161514 | Il lato scuro delle paillettes, dove si scrive la parola. |
--accent | style.css | #e0462a | Il retro del punto (e di ogni segno di punteggiatura). |
Quando usarla
Per un nome o una parola da scoprire: la copertina di un marchio di moda o di abiti da sera, l'invito a una festa o a una serata, la pagina di un locale, la 404 di un portfolio. Funziona con qualunque parola corta, anche con un punto esclamativo o di domanda.
Sul telefono
Le stesse paillettes e gli stessi giri: la parola usa un po' meno paillettes in altezza, così ognuna resta abbastanza grande da vederla girare, e il tessuto si fa più alto per riempire lo schermo. Si scrive trascinando il dito, che non fa scorrere la pagina; la scritta d'aiuto diventa «Drag a finger over the sequins.». Se cambia solo l'altezza (la barra del browser che va e viene) il tessuto si sposta e non perde quello che c'è scritto.
Con il movimento ridotto
Niente gira: ogni paillette è un quadrato piatto che sfuma dal bianco al nero e torna, con gli stessi tempi. Il tessuto e le scritte compaiono in dissolvenza, la mano invisibile scrive la parola sfumandola, e quelle fuori dalla parola non si increspano.
Trappole
- Con l'asse del giro preso esattamente perpendicolare al gesto, un gesto storto lasciava le paillettes nere ruotate rispetto alla griglia: mezzo giro intorno a una retta qualsiasi è uno specchio, e un quadrato specchiato su una retta storta si storce. L'asse si arrotonda alle otto direzioni di simmetria del quadrato.
- La mano invisibile è larga quanto la parola e una paillette le resta sotto per quasi un secondo: con il blocco breve del puntatore ripartiva più volte e alla fine della scritta alcune paillettes erano ancora storte. Per la mano invisibile il blocco dura quanto la paillette resta sotto di lei.
- Cambiare l'asse a una paillette a metà giro la faceva saltare: l'asse nuovo vale solo quando è piatta.
- Con la parola scritta a undici paillettes la esse si leggeva male: a tredici, con una paillette d'aria fra le lettere, si legge; sul telefono si scende un poco per non avere paillettes troppo piccole.
- Ridisegnare novecento paillettes a ogni fotogramma anche da ferme è inutile: il canvas si ridisegna solo quando una timeline lo segna, e le paillettes ferme vanno in tre fill soltanto.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,1 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 14 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.
