Il rilievo a trattini
WebGL, 3D, Hover
Gratis
Torna alla libreria
Le lettere piene di film
Quattro carte con le lettere della parola FILM: ogni lettera è un solido che gira piano su due assi, e la sua sagoma è riempita dal film della sua categoria, piatto, come se la lettera fosse un buco nello schermo. Cambia solo il contorno, l’immagine dentro resta ferma e continua a scorrere.
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>Letters full of film</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/schibsted-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
<script type="importmap">
{ "imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.178.0/build/three.module.min.js"
} }
</script>
</head>
<body>
<!-- the reels of a made-up film studio, one per letter of its word: each letter is a solid that turns slowly in 3D,
and its outline is filled with that reel's footage, flat, as if the letter were a hole cut in a screen -->
<main class="sala">
<header class="sala__testa">
<p class="sala__etichetta">Mango Pictures</p>
<h1 class="sala__titolo">Four reels, one word.</h1>
</header>
<div class="griglia" data-griglia>
<canvas class="griglia__tela" data-tela aria-hidden="true"></canvas>
<a class="carta" href="#" data-carta data-lettera="F" aria-label="Fashion, 12 films">
<span class="carta__lettera" data-lettera-box><canvas class="carta__film" data-film aria-hidden="true"></canvas></span>
<span class="carta__riga"><span>Fashion</span><span class="carta__numero">(12)</span></span>
</a>
<a class="carta" href="#" data-carta data-lettera="I" aria-label="Illustration, 21 films">
<span class="carta__lettera" data-lettera-box><canvas class="carta__film" data-film aria-hidden="true"></canvas></span>
<span class="carta__riga"><span>Illustration</span><span class="carta__numero">(21)</span></span>
</a>
<a class="carta" href="#" data-carta data-lettera="L" aria-label="Live, 5 films">
<span class="carta__lettera" data-lettera-box><canvas class="carta__film" data-film aria-hidden="true"></canvas></span>
<span class="carta__riga"><span>Live</span><span class="carta__numero">(5)</span></span>
</a>
<a class="carta" href="#" data-carta data-lettera="M" aria-label="Music videos, 9 films">
<span class="carta__lettera" data-lettera-box><canvas class="carta__film" data-film aria-hidden="true"></canvas></span>
<span class="carta__riga"><span>Music videos</span><span class="carta__numero">(9)</span></span>
</a>
</div>
</main>
<script type="module" 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 lettere piene di film» da Animorio e adattala al mio sitoCosa fa
La pagina scura di una casa di produzione inventata, Mango Pictures, con il titolo «Four reels, one word.» e sotto quattro carte bordate da una riga sottile: Fashion, Illustration, Live e Music videos, ognuna con il numero dei suoi film. In ogni carta c’è una lettera della parola FILM, un solido spesso che gira su sé stesso senza fermarsi, attorno a due assi a velocità quasi uguali, così non ripete mai lo stesso giro. Dentro la sua sagoma scorre il film della carta: un tramonto a righe sul mare, macchie di colore che si inseguono in una stanza viola, i fasci di luce di un palco sopra la folla, onde al neon. Il film non gira con la lettera: resta fermo nella carta, ed è il contorno della lettera a cambiare, largo quando la si vede di fronte, sottile quando la si vede di taglio. Col puntatore sopra una carta, o col fuoco della tastiera, la lettera gira quattro volte più in fretta e il film si avvicina. Al telefono le carte stanno due per riga.
Come funziona
Le lettere
Ogni lettera è disegnata su un quadrato di 32 per 32 come elenco di punti, con un buco tondo nella I e un angolo arrotondato nella L. Con Three.js diventa una forma estrusa spessa 8, con un piccolo smusso, centrata sull’origine. Gli stessi punti fanno anche una maschera SVG piatta per quando WebGL manca.
Una camera che non taglia mai
La camera è ortogonale e larga √768, cioè la distanza più grande che una lettera di 32 può avere dal centro mentre gira: così la lettera, comunque sia girata, non tocca mai i bordi della carta. Ogni fotogramma la lettera riparte da zero e gira prima attorno a y e poi attorno a x, di angoli che crescono di 0,0008 e 0,00082 radianti al millisecondo.
Il film piatto
Lo shader della lettera non accende luci: legge il film al pixel dello schermo, gl_FragCoord meno l’angolo della carta, diviso per la sua misura. Per questo l’immagine non gira con la lettera e il solido si vede solo dal contorno. Un parametro facoltativo, SHADE, aggiunge un poco di luce sulle facce.
Un canvas per quattro carte
Un solo canvas WebGL sta dietro tutta la griglia; per ogni carta lo script ne misura il quadrato, ci mette viewport e scissor e disegna la sua scena. In WebGL l’asse y parte dal basso, quindi la carta si misura dal fondo della griglia. Il ciclo gira solo mentre la griglia è sullo schermo.
I quattro film
Ogni film è dipinto dallo script su un canvas da 384 pixel: righe e gradienti per il tramonto, gradienti radiali sommati per le macchie, triangoli sfumati per i fasci, sinusoidi per le onde. Si ridipinge trenta volte al secondo e ogni volta diventa la texture della sua lettera. Col puntatore sopra, una molla porta la velocità a quattro volte e lo zoom del film a 1,18.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SPEED | script.js | [0.0008, 0.00082] | Quanto in fretta gira una lettera attorno ai suoi due assi, in radianti al millisecondo (come nel sito). |
HOVER | script.js | 4 | Quante volte più in fretta gira una lettera col puntatore sopra. |
ZOOM | script.js | 1.18 | Quanto si avvicina il film col puntatore sopra. |
SCALE | script.js | 1 | Quanto è grande la lettera nella sua carta (1 = non tocca mai i bordi). |
DEPTH | script.js | 8 | Quanto sono spesse le lettere (una lettera è larga 32). |
SHADE | script.js | 0 | Un poco di luce sulle facce (0 = film piatto, come nel sito). |
FPS | script.js | 30 | Quante volte al secondo si ridipinge il film. |
Quando usarla
Per le categorie di un portfolio, le sezioni di un archivio video o le lettere di un marchio che fanno anche da finestra sul lavoro: dove ogni voce ha un filmato da mostrare e una lettera da dargli.
Sul telefono
Le carte stanno due per riga e le lettere girano allo stesso modo; col dito la lettera accelera e il film si avvicina finché si tiene premuta la carta.
Con il movimento ridotto
Niente 3D e niente movimento: ogni carta mostra un fotogramma fermo del suo film dentro la sagoma piatta della lettera.
Trappole
- Se lo shader legge il film con le coordinate della forma, l’immagine gira insieme alla lettera e sembra stampata sopra: va letta al pixel dello schermo, con gl_FragCoord.
- In WebGL viewport e scissor contano dal basso, il DOM dall’alto: la carta va misurata dal fondo della griglia, altrimenti le lettere finiscono nella carta sbagliata quando la griglia va a capo.
- Uno ShaderMaterial non converte i colori: la texture del canvas va lasciata senza spazio colore, così il film ha gli stessi colori che ha nel canvas 2D.
- Un film scuro fa sparire la lettera sulla pagina scura, perché la lettera è fatta solo del film: i fasci del palco erano su un fondo nero e sono passati su un gradiente viola e magenta.
- Sommare a ogni fotogramma piccole rotazioni porta la lettera in pose sempre diverse da quelle del sito: la si rigira da zero, prima attorno a y e poi a x, con i due angoli accumulati.
Librerie
Three.js 0.178.0, Schibsted Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,7 KB; le librerie: Three.js 174 KB.
Collaudo
Provata il 6 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.
