Il menu sotto il foglio
Menu, 3D, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Le schede a faccette
La guida ai tagli di un gioielliere in quattro schede, Round, Oval, Pear ed Emerald, con la pietra sotto che ondeggia sotto le luci: la scheda scelta sta in una scheggia di cristallo tagliata come la sua pietra. Scegliendone un’altra il cristallo scivola lì e si ritaglia per strada, passando per ogni forma che incontra, e la pietra si ritaglia con lui mentre fa un giro nella luce: le faccette scorrono, si dividono e si uniscono, il contorno si allunga, mette la punta, si squadra nei gradini dello smeraldo. Il cristallo si può trascinare, e la pietra segue la mano.
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 faceted tabs</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/noto-serif-display@5.3.0/wdth.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/urbanist@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- a jeweller's guide to the shapes of a diamond, in four tabs. The chosen tab sits in a sliver of crystal cut
like its stone; choosing another, the crystal slides there and is re-cut on the way, and the stone under the
tabs re-cuts itself with it while it turns in the light. The crystal and the stone are drawn by the script -->
<div class="guide" data-guide>
<div class="seg" data-seg>
<canvas class="seg__crystal" aria-hidden="true" data-crystal></canvas>
<div class="seg__tabs" role="tablist" aria-label="Diamond shapes" data-tabs>
<button class="seg__tab" type="button" role="tab" id="tab-round" aria-controls="cut-round" aria-selected="true"><span class="seg__name">Round</span></button>
<button class="seg__tab" type="button" role="tab" id="tab-oval" aria-controls="cut-oval" aria-selected="false" tabindex="-1"><span class="seg__name">Oval</span></button>
<button class="seg__tab" type="button" role="tab" id="tab-pear" aria-controls="cut-pear" aria-selected="false" tabindex="-1"><span class="seg__name">Pear</span></button>
<button class="seg__tab" type="button" role="tab" id="tab-emerald" aria-controls="cut-emerald" aria-selected="false" tabindex="-1"><span class="seg__name">Emerald</span></button>
</div>
</div>
<div class="stone" aria-hidden="true" data-stone-box>
<canvas class="stone__view" data-stone></canvas>
</div>
<div class="pages" data-pages>
<section class="page" role="tabpanel" id="cut-round" aria-labelledby="tab-round" tabindex="0">
<h2 class="page__title">The one that shines most</h2>
<p class="page__text">Every facet is angled to send the light back up through the top, so no other shape sparkles as much. The classic for a solitaire.</p>
<dl class="page__facts">
<div><dt>Length to width</dt><dd>1.00</dd></div>
<div><dt>One carat</dt><dd>6.5 mm</dd></div>
<div><dt>Facets</dt><dd>Brilliant</dd></div>
</dl>
</section>
<section class="page" role="tabpanel" id="cut-oval" aria-labelledby="tab-oval" tabindex="0" hidden>
<h2 class="page__title">Longer, and looks larger</h2>
<p class="page__text">A brilliant drawn out lengthwise. It looks bigger than a round stone of the same weight, and it slims the finger.</p>
<dl class="page__facts">
<div><dt>Length to width</dt><dd>1.40</dd></div>
<div><dt>One carat</dt><dd>7.7 × 5.5 mm</dd></div>
<div><dt>Facets</dt><dd>Brilliant</dd></div>
</dl>
</section>
<section class="page" role="tabpanel" id="cut-pear" aria-labelledby="tab-pear" tabindex="0" hidden>
<h2 class="page__title">A drop with a point</h2>
<p class="page__text">Round at one end and pointed at the other. Worn with the point towards the nail, it makes the hand look longer.</p>
<dl class="page__facts">
<div><dt>Length to width</dt><dd>1.55</dd></div>
<div><dt>One carat</dt><dd>8.5 × 5.5 mm</dd></div>
<div><dt>Facets</dt><dd>Brilliant</dd></div>
</dl>
</section>
<section class="page" role="tabpanel" id="cut-emerald" aria-labelledby="tab-emerald" tabindex="0" hidden>
<h2 class="page__title">Steps of clear light</h2>
<p class="page__text">Long flat steps instead of sparkle: broad flashes, like a hall of mirrors, and a clear look deep into the stone.</p>
<dl class="page__facts">
<div><dt>Length to width</dt><dd>1.40</dd></div>
<div><dt>One carat</dt><dd>7.0 × 5.0 mm</dd></div>
<div><dt>Facets</dt><dd>Step</dd></div>
</dl>
</section>
</div>
</div>
</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.
56 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 schede a faccette» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una vaschetta scura con quattro schede, Round, Oval, Pear ed Emerald. Quella scelta sta dentro una scheggia di cristallo fumé tagliata come la sua pietra: una pillola per il tondo, un occhio per l’ovale, una goccia per la pera, un ottagono a gradini per lo smeraldo, con le faccette del bordo che prendono la luce. Sotto c’è la pietra, un diamante a faccette che ondeggia piano sotto le luci di uno studio: dalla tavola si vede la stella del padiglione, le faccette vanno dal nero al bianco e le più piccole mandano lampi di colore. Più sotto un titolo, due righe e tre dati: il rapporto fra lunghezza e larghezza, la misura di un carato e il tipo di faccette. Scegliendo un’altra scheda il cristallo scivola lì su una molla e si ritaglia per strada, prendendo la forma di ogni scheda che attraversa, e il nome sotto di lui si accende e ingrassa mentre arriva; quando si posa, un riflesso gli corre sopra. La pietra lo segue un attimo dopo: si ritaglia passando per gli stessi tagli e fa un giro su sé stessa nella luce, poi torna a guardarti; se nel giro esce dal suo riquadro si allontana quanto basta. Il testo vecchio esce sfocandosi dal lato che si lascia e il nuovo entra dall’altro, una riga dopo l’altra. Il cristallo si prende e si trascina: la pietra segue la mano attraverso i tagli e, lasciato, il cristallo va sulla scheda più vicina, lanciato un poco più in là dalla velocità della mano. La pietra si inclina verso il mouse e si gira col dito o trascinandola; cliccando di nuovo la scheda scelta fa un giro. All’apertura le faccette si incidono nel cristallo e la pietra entra girando.
Come funziona
La pietra
Sei anelli di sedici punti: tavola, corona, i due bordi della cintura, padiglione e culetta. Ogni anello è il contorno del taglio (un cerchio, un’ellisse, una goccia, un ottagono) rimpicciolito e messo alla sua altezza; nel brillante la corona e il padiglione sono girati di mezzo passo e fra gli anelli nascono aquiloni e triangoli, nello smeraldo restano allineati e nascono i gradini. I quattro tagli hanno gli stessi punti nello stesso ordine, quindi per passare da uno all’altro basta mescolarli punto per punto.
Le faccette e la luce
A ogni fotogramma la pietra viene girata e guardata dall’alto (VIEW gradi), si calcolano le normali e si disegna dal fondo al davanti. Le faccette dietro sono piene: il raggio dell’occhio rimbalza su di loro e sulla faccetta opposta, e dove esce la luce la dà uno studio fatto di una softbox in alto, un anello di strisce luminose con dei buchi scuri, un pavimento fioco e la testa di chi guarda. Rosso, verde e blu escono un poco separati (FIRE), ma solo sulle faccette piccole. Le faccette davanti aggiungono il loro riflesso secondo Fresnel in modalità lighter, e ogni spigolo si vede tanto quanto le due faccette sono diverse.
Il cristallo
Le quattro forme piatte (lo stadio e l’ottagono trovati col raggio che parte dal centro, l’ellisse, la goccia) campionate per angolo e mescolate secondo dove si trova il cristallo, contato in schede. Tre anelli di faccette con le loro altezze danno le normali per una luce che si inclina con la velocità; all’arrivo una banda obliqua di luce lo attraversa. Ogni nome prende colore e peso da quanto cristallo ha sotto: lo script scrive --lit, il CSS lo usa in color-mix e in font-weight.
Le molle
Il cristallo va alla sua scheda su una molla (SLIDE), più dura quando è in mano; la pietra segue la posizione del cristallo su una seconda molla (RECUT), quindi passa per i tagli in mezzo. Il giro è una molla verso il giro intero successivo (SPIN); girata con la mano scorre frenata dall’attrito e poi si posa sul giro intero più vicino. Si calcola in passi di un duecentoquarantesimo di secondo, e fuori dallo schermo tutto si ferma.
Mano, tastiera e telefono
È un tablist vero: role tab e tabpanel, aria-selected, aria-controls e una sola scheda raggiungibile col tasto Tab; le frecce, Home e End cambiano scheda e portano il focus. Il cristallo si trascina col puntatore catturato, cede come gomma oltre i capi e, lasciato, tiene conto della velocità; touch-action pan-y lascia scorrere la pagina in verticale.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
START | script.js | 0 | La scheda scelta quando si apre la pagina (0 Round, 1 Oval, 2 Pear, 3 Emerald). |
SLIDE | script.js | [240, 24] | La molla su cui scivola il cristallo: la durezza, e lo smorzamento (meno, più va oltre e torna). |
RECUT | script.js | [110, 19] | La molla con cui la pietra si ritaglia seguendo il cristallo, un attimo dopo di lui. |
SPIN | script.js | 1 | Quanti giri fa la pietra quando cambia la scheda (0 nessuno). |
SWAY | script.js | 10 | Quanto ondeggia la pietra a riposo, in gradi (0 ferma). |
VIEW | script.js | 74 | Quanto dall’alto si guarda la pietra, in gradi (90 dritti sulla tavola). |
FIRE | script.js | 0.6 | Quanto la pietra separa la luce nei colori (0 niente, 1 tanto). |
TEXT | script.js | 0.5 | I secondi in cui entra il testo nuovo. |
Quando usarla
Per scegliere fra poche varianti di un prodotto che cambiano forma, materiale o finitura: i tagli di una pietra, le forme di una montatura, le finiture di un metallo. Da tre a cinque schede con nomi corti.
Sul telefono
Tutto sta in 390 pixel: le schede si stringono e la pietra si rimpicciolisce col suo riquadro. Il cristallo si trascina col dito mentre la pagina scorre in verticale come sempre, e la pietra si gira col dito; senza mouse non si inclina verso il puntatore.
Con il movimento ridotto
Niente scivolate né giri: il cristallo e la pietra svaniscono dove sono e ricompaiono sulla scheda nuova, e il testo cambia con una dissolvenza. La pietra sta ferma e dritta, non ondeggia e non si trascina.
Trappole
- Il ResizeObserver sul componente intero faceva saltare il cristallo a ogni cambio di scheda, perché il testo sotto cambia altezza: si osservano solo la vaschetta e il riquadro della pietra, si reagisce solo quando cambia la larghezza, e il cristallo tiene il suo posto contato in schede.
- Durante il giro la pera, con la punta verso chi guarda, usciva dalla tela e veniva tagliata: a ogni fotogramma si misura quanto è grande la pietra e, se serve, si allontana quanto basta per restare dentro.
- Il fuoco su tutte le faccette faceva sembrare la tavola dello smeraldo un vetro colorato marrone: la separazione dei colori si riduce con l’area della faccetta sullo schermo.
- La culetta come punto unico dava triangoli senza area e senza normale, e la mappa degli spigoli si rompeva: la culetta è un anello minuscolo (una faccetta piccolissima nel tondo, una chiglia corta negli altri), così la maglia è chiusa e ogni spigolo ha due faccette.
- Ogni gradino dello smeraldo è fatto di due triangoli, e disegnando tutti gli spigoli si vedeva la diagonale: gli spigoli prendono l’opacità dall’angolo fra le due faccette, e due metà dello stesso piano non mostrano linea.
- Il nome della scheda scelta diventava bianco subito, prima che il cristallo arrivasse: colore e peso seguono la posizione del cristallo.
- Stringere gli anelli del cristallo lungo le normali incrociava i punti vicino alla punta della goccia: gli anelli si stringono in larghezza e in altezza separatamente, e restano dentro anche sulla punta.
Librerie
GSAP 3.15.0, Noto Serif Display (font variabile) 5.3.0, Urbanist (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 17 KB; le librerie: GSAP 28 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.
