Il rilievo a trattini
WebGL, 3D, Hover
Gratis
Torna alla libreria
La fila di dischi
Sei dischi in Three.js, in fila e visti di sbieco, con la copertina di un film stampata davanti e il metallo iridescente dietro: scorrono con la rotella o trascinando, si piegano mentre corrono, e un pennarello cerchia quello davanti.
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="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>La fila di dischi</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.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",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.178.0/examples/jsm/"
} }
</script>
</head>
<body>
<main class="galleria" data-galleria>
<!-- i dischi in WebGL, e sopra un secondo canvas per lo scarabocchio a pennarello -->
<canvas class="galleria__tela" data-tela aria-hidden="true"></canvas>
<canvas class="galleria__segno" data-segno aria-hidden="true"></canvas>
<p class="attesa" data-attesa>I dischi stanno arrivando</p>
<section class="scheda" aria-live="polite">
<h1 class="scheda__titolo"><span class="maschera"><span data-titolo>Il faro</span></span></h1>
<dl class="crediti">
<div><dt>Regia</dt><dd class="maschera"><span data-regia>Nora Valli</span></dd></div>
<div><dt>Anno</dt><dd class="maschera"><span data-anno>2019</span></dd></div>
<div><dt>Con</dt><dd class="maschera"><span data-con>Livio Sarti, Ada Moretti</span></dd></div>
</dl>
</section>
<p class="nota" data-nota>Scorri con la rotella, trascina o usa le frecce: i dischi scorrono in fila. Sul disco davanti un pennarello fa un giro intorno; cliccalo per girarlo e vedere il retro.</p>
<div class="comandi">
<button class="comandi__tasto" type="button" data-prima aria-label="Film precedente">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6" /></svg>
</button>
<button class="comandi__tasto" type="button" data-dopo aria-label="Film successivo">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
</button>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<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.
68 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 fila di dischi» da Animorio e adattala al mio sitoCosa fa
Sei dischi, come DVD, in fila di sbieco su un fondo carta; ognuno ha stampata la copertina di un film di una rassegna d’estate, col titolo sopra il buco e una scritta che corre lungo il bordo. In alto a sinistra la scheda del film davanti: titolo e crediti su righe sottili. Con la rotella, trascinando o con le frecce la fila scorre di un disco alla volta, si ferma con un piccolo rimbalzo e mentre corre i dischi si piegano nel verso della corsa; la scheda cambia, le righe escono in alto ed entrano le nuove. Il disco davanti gira piano su sé stesso e si inclina verso il puntatore; passandoci sopra un pennarello gli disegna intorno due giri che tremano come fatti a mano. Un clic lo gira: dietro c’è il metallo iridescente dei dischi veri.
Come funziona
Un disco vero
Ogni disco ha cinque pezzi: la faccia con la copertina, un RingGeometry da 0,2 a 0,988 del raggio con un MeshPhysicalMaterial lucido e un velo di clearcoat; il retro, lo stesso anello girato, di metallo con l’iridescenza accesa (indice 1,45, spessore del film da 120 a 1100 nanometri); un bordo cilindrico sottile; un anello di metallo e il mozzo trasparente. I riflessi vengono da una RoomEnvironment passata al PMREMGenerator, più una luce calda davanti e una azzurra di taglio.
Le copertine si disegnano
Ogni copertina è un canvas di 1024 pixel dipinto dallo script a caratteri caricati: un disegno semplice, il titolo in Instrument Serif sopra il buco e una scritta lungo il bordo, lettera per lettera ruotata sul cerchio. Il RingGeometry porta con sé le coordinate giuste, quindi l’immagine quadrata cade sul disco senza tagli.
La testa della fila
La fila è un gruppo ruotato di −24° e −28,6°; il disco i sta a x = (i − testa) × 2,2 e z = −(i − testa)² × 0,12, e quelli lontani scendono all’80%. La testa è un numero continuo che una molla porta sul disco scelto (80 di forza, 11 di freno, un piccolo rimbalzo); la sua velocità fa piegare i dischi di √velocità × 0,11, fino a 0,3.
Il pennarello
Si prendono 30 punti sul bordo del disco davanti, ognuno spostato a caso del 3%, e si proiettano sullo schermo: due giri di curve morbide su un secondo canvas, rifatti dieci volte al secondo, così il tratto trema. Il pennarello entra in 0,45 secondi quando il puntatore sta dentro al contorno proiettato del disco, ed esce in 0,3.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PASSO, CURVA | script.js | 2.2, 0.12 | La distanza fra i dischi (1,7 in verticale) e quanto la fila si allontana ai lati. |
MOLLA, FRENO | script.js | 80, 11 | La molla che ferma la fila sul disco scelto: più freno, meno rimbalzo. |
PIEGA | script.js | 0.11 | Quanto i dischi si piegano mentre la fila corre. |
INCLINA, GIRA | script.js | 0.24, 0.12 | Quanto il disco davanti si inclina verso il puntatore, e quanto gira da solo. |
PENNARELLO | script.js | 2 giri, 10 fps | I giri del pennarello, i punti, quanto trema e quante volte al secondo si ridisegna. |
FILM | script.js | 6 | I film: titolo, crediti, colori e il disegno della copertina. |
Quando usarla
Per un catalogo di cose rotonde o di cose con un davanti e un dietro: dischi, film, piatti, spille, sottobicchieri, etichette. Il disco si può girare, e il retro dice qualcosa anche lui.
Sul telefono
In verticale la fila si rimpicciolisce finché il disco davanti ci sta in larghezza e il vicino spunta dal bordo; si trascina di lato col dito, e un tocco sul disco lo gira. Il pennarello, che vive col puntatore, lì non c’è.
Con il movimento ridotto
La fila salta al disco scelto senza molla, i dischi non si piegano, non girano da soli e non inclinano; il pennarello non trema.
Trappole
- L’iridescenza senza un ambiente da riflettere è un metallo grigio: serve la RoomEnvironment nel PMREMGenerator, o un’immagine HDR.
- Troppo clearcoat e troppo ambiente sulla faccia coprono la copertina con un riflesso bianco: la faccia ha l’ambiente al 55%, il retro al 100%.
- Il pennarello va attaccato al gruppo dell’inclinazione e non a quello che gira: altrimenti ruoterebbe col disco invece di stare fermo intorno.
- Se la rotella fa uno scatto per ogni evento, un solo gesto del trackpad scorre tutta la fila: si somma il delta, si scatta a 60 e poi si aspetta 320 millesimi che il gesto si calmi.
Librerie
Three.js 0.178.0, GSAP 3.15.0, Instrument Serif 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,5 KB; le librerie: GSAP 28 KB, Three.js + RoomEnvironment 176 KB.
Collaudo
Provata il 3 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.
