Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
Il cartellone a prismi
Nello stile minimal, il manifesto di una sala da concerti inventata fatto come un cartellone a prismi: una fila di prismi sottili a tre facce, e su ogni lato della fila una parola, «Quiet», «Loud» e «Live» in vermiglio, allargata o stretta sull’asse della larghezza per riempire il cartellone. Ogni pochi secondi i prismi girano in 3D in un’onda da sinistra a destra, ognuno oltre di un soffio, e a metà onda si leggono mezza parola e mezza l’altra.
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 prism billboard</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the poster of a made-up concert hall as a trivision billboard: a row of thin three-sided prisms, one word on each
side, each word stretched or squeezed on the width axis to fill the board. The prisms turn in a wave from left
to right, each going a hair past its face and settling; the pointer nudges the one under it. The script builds
the prisms -->
<main class="stage" data-stage>
<div class="poster" data-poster>
<p class="caption" data-caption><span>Kestrel Hall</span><span>Three nights in March</span></p>
<div class="board" data-board aria-hidden="true"></div>
<p class="caption caption--under"><span>14, 15, 16 March</span><span>Doors at 19:30</span></p>
</div>
<h1 class="sr" data-sr>Kestrel Hall: Quiet, Loud, Live.</h1>
</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.
19 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 «Il cartellone a prismi» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo c’è un cartellone con una cornice sottile, sopra due righe piccole (il nome della sala e «Three nights in March») e sotto altre due (le date e l’ora delle porte). Il cartellone è una fila di prismi stretti a tre facce, separati da fili appena visibili: entrano di sbieco e girano in un’onda fino alla prima faccia, dove si legge «QUIET» in nero, larga e pesante. Ogni parola è messa sull’asse della larghezza di Anybody in modo da riempire il cartellone: una parola corta si allarga, una lunga si stringe, e se anche alla larghezza massima non basta si spazia. Ogni due secondi e mezzo i prismi girano alla faccia dopo, uno dopo l’altro da sinistra a destra: ognuno va oltre di qualche grado e si assesta, e mentre gira la faccia che se ne va si scurisce. A metà onda il cartellone mostra la fine di «QUIET» e l’inizio di «LOUD»; poi «LIVE» in vermiglio, poi di nuovo «QUIET». Passando il puntatore sul cartellone il prisma sotto la mano prende un colpetto nel verso della mano e torna con un elastico; un clic fa girare subito tutto il cartellone.
Come funziona
Una fila di prismi
Ogni prisma è un elemento con preserve-3d largo una fetta del cartellone, con tre facce: ognuna ruotata di 120° e spinta fuori dal suo asse dell’apotema, larghezza / (2 · tan 60°). Il prisma si sposta indietro della stessa misura, così la faccia che guarda te sta a filo del cartellone. Per mostrare la faccia k basta ruotarlo di −120° · k.
Una parola tagliata a fette
Ogni faccia contiene la parola intera, larga come il cartellone e spostata a sinistra di tante fette quante ne vengono prima, con overflow: hidden: ogni prisma ne mostra la sua fetta. Le facce sono un pixel più larghe del prisma, perché fra due fette in 3D non si apra un filo chiaro.
La parola che riempie il cartellone
Lo script misura ogni parola alla larghezza 100 di Anybody, alta quasi quanto il cartellone, e calcola la larghezza (da 50 a 150) che la porta al 92% del cartellone; se è ancora troppo larga rimpicciolisce il corpo, se è ancora corta la spazia, e sposta il testo di mezza spaziatura per tenerlo al centro.
L’onda e l’ombra
Ogni giro una timeline GSAP porta l’angolo di ogni prisma di 120° più avanti, sempre nello stesso verso, con un back.out(OVERSHOOT) di TURN secondi, sfalsati di WAVE da sinistra a destra. A ogni aggiornamento ogni faccia prende un’ombra (un velo d’inchiostro) che vale (1 − cos dell’angolo verso di te) · 0,55: la faccia di fronte è chiara, quella che se ne va si scurisce.
La mano
Il puntatore che passa da un prisma all’altro dà a quello nuovo un colpetto di 14° nel verso della mano e lo riporta con un elastic.out: è un angolo a parte che si somma a quello dell’onda, così i due movimenti non litigano. Un clic gira subito il cartellone e fa ripartire il conto.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORDS | script.js | ['Quiet', 'Loud', 'Live'] | Le tre facce del cartellone; l’ultima è nel colore d’accento. Ognuna si allarga o si stringe per riempirlo. |
PRISMS | script.js | 14 | Quanti prismi ci sono nel cartellone (al telefono meno). |
HOLD | script.js | 2.4 | I secondi in cui ogni parola resta ferma. |
WAVE | script.js | 0.055 | I secondi fra un prisma che gira e il successivo. |
TURN | script.js | 0.95 | I secondi che un prisma ci mette a girare. |
OVERSHOOT | script.js | 1.6 | Quanto un prisma va oltre la sua faccia: 0 niente, 3 molto. |
WEIGHT | script.js | 720 | Il peso delle parole, da 100 a 900. |
Quando usarla
Per la pagina di un concerto, di un festival, di una stagione teatrale o di una mostra con tre parole da dire (tre serate, tre artisti, tre sale), o per la prima pagina di un negozio che alterna tre promozioni come un cartellone di strada.
Sul telefono
Lo stesso cartellone, largo quasi tutto lo schermo e più alto in proporzione, con nove prismi invece di quattordici: l’onda e le parole sono le stesse, e un tocco fa girare subito il cartellone.
Con il movimento ridotto
Niente gira: il cartellone svanisce e ricompare con la parola dopo, ogni due secondi e mezzo.
Trappole
- Fra due fette, girate in 3D, si apriva un filo chiaro che tagliava le lettere: le facce sono un pixel più larghe del prisma e si sovrappongono appena.
- «LIVE» e «LOUD», anche alla larghezza 150 di Anybody, non arrivavano al bordo e il cartellone sembrava mezzo vuoto: se la larghezza non basta la parola si spazia, e il testo si sposta di mezza spaziatura per restare al centro.
Librerie
GSAP 3.15.0, Anybody (font variabile, assi wdth e wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
