Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
Il prisma di parole
Scorri dentro l’anteprima
Tre parole enormi stanno su tre pareti di una stanza quadrata intorno a chi guarda. Scorrendo, la stanza gira di un quarto alla volta: la parola davanti esce a sinistra crescendo e sfumando, la prossima entra da destra, e quando ti fermi lo scorrimento si posa sulla parola. Sotto, due righe per parola entrano mettendosi a fuoco.
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 word prism</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bodoni-moda@5.3.0/wght-italic.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/familjen-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="bar">
<a class="brand" href="#">Vela Atelier</a>
<nav class="bar__nav" aria-label="Sections">
<a href="#">Houses</a>
<a href="#">Method</a>
<a href="#">Contact</a>
</nav>
</header>
<section class="intro">
<p class="intro__kicker">Architecture for slow houses</p>
<h1 class="intro__title">Every house we draw starts from three words.</h1>
<p class="intro__hint">Scroll, and the room turns.</p>
</section>
<!-- the room: three words on three walls around you; scrolling turns the room a quarter at a time -->
<section class="room" data-room>
<div class="stage">
<div class="walls" data-walls>
<p class="word" data-word>Light</p>
<p class="word" data-word>Shade</p>
<p class="word" data-word>Air</p>
</div>
<div class="captions">
<div class="caption" data-caption>
<span>We start from the sun: where it rises,</span>
<span>where it sets, how long it stays on the kitchen table.</span>
</div>
<div class="caption" data-caption>
<span>Then we draw the shade: porches, deep windows,</span>
<span>the trees we keep, so summer stays cool without machines.</span>
</div>
<div class="caption" data-caption>
<span>Last, the air: rooms that open into each other,</span>
<span>so a breeze can cross the house from end to end.</span>
</div>
</div>
<!-- how far the room has turned: a ruler on the right edge -->
<div class="ruler" aria-hidden="true">
<span class="ruler__mark" data-mark></span>
<span class="ruler__value" data-value>0%</span>
</div>
</div>
</section>
<section class="outro">
<h2 class="outro__title">Light, shade and air. The rest is walls.</h2>
<a class="outro__link" href="#">Book a site visit</a>
</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.
35 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 prisma di parole» da Animorio e adattala al mio sitoCosa fa
La home di uno studio di architettura inventato, Vela Atelier, su un fondo color carta. Si apre con una frase in corsivo, «Every house we draw starts from three words.». Poi la pagina si ferma e diventa una stanza: le tre parole del metodo, LIGHT, SHADE e AIR, in un Bodoni corsivo enorme colorato dal rosso mattone al giallo zafferano, stanno su tre pareti intorno a te. Scorrendo, la stanza gira: la parola davanti scivola a sinistra, si ingrandisce perché la sua parete si avvicina e sfuma, mentre la prossima arriva da destra in prospettiva; il colore le scorre addosso mentre girano. Ogni terzo dello scorrimento gira nel suo primo 30% e poi sta fermo, e quando ti fermi lo scorrimento si posa al centro del tratto fermo più vicino. Sotto la parola davanti entrano le sue due righe, che salgono e si mettono a fuoco; a destra un righello segna quanto ha girato la stanza. Dopo la terza parola la pagina riparte con una frase di chiusura.
Come funziona
La stanza
La prospettiva del palco è la distanza dell’occhio dallo schermo: LENS volte la larghezza della finestra, almeno 640 pixel. Ogni parola sta su una parete: il centro della parete è su un cerchio di raggio ROOM volte quella distanza, con il davanti che tocca lo schermo, quindi x = r · sen a e z = r · (1 − cos a), e la parete guarda il centro con rotateY(−a). Con ROOM sotto 0,5 l’occhio resta appena fuori dalla stanza e niente gli passa dietro.
Il giro
La stanza resta ferma per LENGTH altezze di finestra e un tween GSAP con scrub di 1,5 secondi porta un valore da 0 a 1. È il giro dell’originale: il valore diviso in terzi, nel primo TURN (il 30%) di ogni terzo l’angolo avanza di 90 gradi con power1.out, poi sta fermo. Si parte da −90 gradi, con niente davanti, e si arriva a 180; la parola k sta a k · 90 meno l’angolo.
Lo scatto
Lo snap di ScrollTrigger con la funzione dell’originale: si posa su 0,2, 0,5 o 0,8, il centro di ogni tratto fermo, ed è libero dopo 0,8, così dall’ultima parola si esce scorrendo. Dura da 0,2 a 0,6 secondi, power1.inOut, senza attesa.
Il colore e la dissolvenza
Le parole hanno un gradiente ritagliato sul testo (background-clip: text) largo il 220%: la sua posizione segue l’angolo, così il colore scorre sulla parola mentre gira. Fra 35 e 75 gradi la parola sfuma (una smoothstep), oltre è nascosta.
Le righe e il righello
Le righe appartengono alla parola quasi davanti, entro 20 gradi: entrano salendo di 14 pixel e passando da 8 pixel di sfocatura a zero, in 0,7 secondi con power3.out, una 0,08 dopo l’altra; escono salendo e sfocandosi in 0,35. Il righello ha una tacca e la percentuale, che scendono con il valore.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TURN | script.js | 0.3 | La parte di ogni terzo dello scorrimento in cui la stanza gira; nel resto sta ferma. |
SNAP | script.js | [0.2, 0.5, 0.8] | Dove si posa lo scorrimento quando ti fermi, come parti della stanza: il centro di ogni tratto fermo. |
SCRUB | script.js | 1.5 | I secondi che la stanza impiega a raggiungere lo scorrimento. |
LENS | script.js | 0.85 | La distanza dell’occhio dallo schermo (la prospettiva CSS), come parte della larghezza della finestra. |
ROOM | script.js | 0.48 | Il raggio della stanza, come parte di quella distanza: sotto 0,5 si sta appena fuori. |
FADE | script.js | [35, 75] | Fra questi due angoli, in gradi, una parola che gira sfuma. |
LENGTH | script.js | 3 | Per quanto la stanza resta ferma sullo schermo, in altezze di finestra. |
GRADIENT | script.js | ['#c4361f', '#e8712c', '#f0ad3f'] | I colori che scorrono sulle parole. |
Quando usarla
Per dire tre cose in ordine con una parola ciascuna: un metodo, tre servizi, tre valori, tre tappe di un viaggio. Funziona con parole corte e diverse, da tre a sei lettere; con frasi lunghe la stanza diventa un corridoio di testo che non si legge.
Sul telefono
La distanza dell’occhio non scende sotto i 640 pixel, quindi su un telefono la stanza è più profonda e le parole che girano escono prima dallo schermo. Le parole sono alte il 21% della larghezza della finestra, le righe vanno su più linee, il righello è più corto e senza la percentuale, che toccherebbe la fine della parola. Il dito fa girare la stanza e si posa sulla parola come la rotella.
Con il movimento ridotto
La stanza non gira: le parole stanno al centro una alla volta e si passa dall’una all’altra con una dissolvenza; le righe entrano senza salire e senza sfocatura. Lo scatto sulla parola resta.
Trappole
- Con il CSS 3D l’occhio non può stare dentro la stanza: un elemento che passa dietro il punto di vista si disegna capovolto o enorme. Con il raggio sotto metà della distanza dell’occhio e le parole nascoste oltre 75 gradi, niente ci arriva mai.
- Le righe vanno decise dall’angolo e non dal terzo dello scorrimento: durante lo scatto il valore attraversa il confine fra due terzi e le righe lampeggerebbero.
- Lo scatto dell’originale porta avanti anche chi si ferma appena entrato nella stanza: sotto 0,35 si va a 0,2. È voluto: la stanza non resta mai vuota.
Librerie
GSAP 3.15.0, Bodoni Moda (font variabile) 5.3.0, Familjen Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,1 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 2 ottobre 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.
