La parola a strati

Hover, 3DGSAP, Solo CSSMediaPeso compresso: Demo 5,4 KBGSAP 28 KBGratisScarica lo zip

Animazione di hover in stile minimal: una parola grande che in realtà è una pila di copie in 3D vero. A riposo è piatta; col puntatore vicino la pila si inclina verso di lui e le copie si aprono in profondità, ognuna più leggera e stretta di quella davanti, fino all’ultima nell’accento, come il taglio di una risma di carta.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ream</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>
  <main class="stage" data-stage>
    <!-- the word people read; the stack below is only its picture -->
    <h1 class="sr" data-read>Ream</h1>

    <!-- the stack: the script fills it with copies of the word, one behind the other in real 3D. At rest they line up
         into one flat word; near the pointer the stack tilts and the copies fan out in depth like a ream of paper -->
    <div class="scena" data-scena aria-hidden="true">
      <div class="pila" data-pila></div>
    </div>

    <p class="nota" data-nota>Paper mill &amp; press</p>
    <p class="aiuto" data-aiuto>Hover the word</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.

17 valori da cambiare

Apri il Playground

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 a strati» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina bianco caldo c’è una parola sola, «Ream», grande e piena, in Archivo, con sopra in piccolo il nome di una cartiera inventata. Sembra una parola stampata e basta: in realtà è una pila di dieci copie della stessa parola, una dietro l’altra in 3D vero, perfettamente allineate. Quando il puntatore si avvicina, la pila si inclina verso di lui su una molla, come un blocco di carta preso in mano, e le copie si aprono in profondità una dopo l’altra, dalla prima verso il fondo: ognuna è un po’ più leggera, più stretta e più chiara di quella davanti, così si vede lo spessore della parola come il taglio di una risma, e l’ultima, la più lontana, è vermiglia. Spostando il puntatore la pila lo segue con un piccolo ritardo e un filo di rimbalzo. Quando il puntatore se ne va, le copie si richiudono dal fondo verso la prima, ognuna con un piccolo assestamento, e la parola torna piatta. Quando nessuno muove il puntatore, un puntatore finto gira intorno alla parola e la fa aprire e chiudere da sola.

Come funziona

Una pila di copie

La parola è scritta dieci volte in dieci div, dentro un contenitore con transform-style: preserve-3d e una prospettiva grande sette volte il corpo del carattere. Nel DOM la copia più lontana viene prima e quella davanti per ultima: a riposo stanno tutte alla profondità zero, e così si vede quella davanti, che è dipinta sopra le altre. La prima copia è nel flusso e dà la misura; le altre stanno sopra di lei con position absolute.

Aprire in profondità

Ogni copia ha un suo numero, quanto è aperta, che segue con una molla un obiettivo da 0 a 1. Aprire vuol dire translateZ di meno la sua posizione per un passo che è una frazione del corpo del carattere: la copia più lontana va più indietro di tutte. Mentre si apre, il peso e la larghezza (assi wght e wdth di Archivo) scendono verso quelli della copia di fondo e l’opacità cala, così la parola mostra lo spessore. La copia di fondo è nel colore d’accento.

Prima davanti, poi dietro

Gli obiettivi delle copie non cambiano tutti insieme: un tween di GSAP con stagger li porta a 1 dalla copia davanti verso il fondo quando il puntatore arriva, e a 0 dal fondo verso davanti quando se ne va. Le molle fanno il resto: ogni copia arriva con un filo di troppo e si assesta, e il ritardo fra una e l’altra si vede come un’onda.

L’inclinazione

La pila intera ruota con rotateX e rotateY verso il puntatore, in proporzione a dov’è rispetto al centro della parola, su due molle con un piccolo rimbalzo. Le molle girano sul ticker di GSAP con quattro piccoli passi per fotogramma, così restano stabili anche quando un fotogramma è lungo e il banco può rallentarle. Quando nessuno muove il puntatore, un puntatore finto fa un giro di dieci secondi intorno alla parola in una timeline che si ripete uguale.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORD`	script.js	`'Ream'`	La parola: le parole corte si leggono meglio (fino a circa 8 lettere).
`LAYERS`	script.js	`10`	Quante copie fanno la pila, da 4 a 16.
`DEPTH`	script.js	`0.09`	Quanto si aprono le copie l’una dall’altra, in parti del corpo del carattere.
`TILT`	script.js	`24`	Quanto si inclina la pila verso il puntatore, in gradi.
`SPRING`	script.js	`1`	Quanto sono vivaci le molle: 0.5 lente e morbide, 2 svelte e rimbalzanti.
`STAGGER`	script.js	`0.045`	Secondi fra una copia e l’altra quando si aprono e si chiudono.
`FRONT_WEIGHT`	script.js	`820`	Il peso della copia davanti, da 100 a 900.
`BACK_WEIGHT`	script.js	`260`	Il peso della copia più lontana quando la pila è aperta.
`BACK_WIDTH`	script.js	`74`	La larghezza (asse wdth) della copia più lontana quando è aperta: quella davanti resta a 100.
`REACH`	script.js	`0.9`	Quanto vicino deve arrivare il puntatore perché la pila si apra, in larghezze della parola intorno a lei.

Provali nel Playground

Quando usarla

Per il titolo di una cartiera, una stamperia, una casa editrice o uno studio di grafica, il nome di un prodotto in cima a una pagina di presentazione, la copertina di un portfolio: una parola sola che, toccata, mostra di avere uno spessore.

Sul telefono

La stessa animazione con le misure adattate: la parola sta nella larghezza dello schermo; il dito sopra la parola la fa aprire e inclinare, e se il telefono dà già gli angoli senza chiedere il permesso basta inclinarlo. A riposo il puntatore finto gira intorno alla parola.

Con il movimento ridotto

Niente 3D né inclinazione: la parola resta piatta, e col puntatore vicino cambia solo il peso, in dissolvenza.

Trappole

Con tutte le copie alla profondità zero conta l’ordine nel DOM: l’ultima è dipinta sopra. Le copie si creano dalla più lontana alla più vicina, così a riposo si vede quella davanti e non quella vermiglia.
La misura della parola va presa con tutte le copie allo stesso peso: la prima copia, quella nel flusso, è la più lontana e da aperta è più leggera e stretta; misurata così il riquadro sarebbe stato troppo piccolo.
L’entrata anima il peso della copia davanti con un tween: il ciclo delle molle parte solo dopo, altrimenti a ogni fotogramma rimetteva il peso finale e l’entrata saltava.

Librerie

GSAP 3.15.0, Archivo (font variabile, assi wght e wdth) 5.3.0.

Compressi con gzip, i tre file della demo pesano 5,4 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 21 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.