La valutazione a stelle
Valutazioni, SVG, Hover
NuovaGratis
Tutti i componenti
La card della scatola di matite
La card di prodotto di un negozio di belle arti: una scatola di latta laccata verde petrolio, piena di matite acquerellabili, su un tavolo chiaro. La card si inclina verso il puntatore e una striscia di luce scivola sul coperchio. Un tocco apre il coperchio sulla sua cerniera e mostra il metallo nudo di dentro; le matite sono lì, una sopra l’altra. Sotto il puntatore (o il dito) la matita di quella fila scivola fuori su una molla e fa uno scarabocchio del suo colore sulla striscia di carta sotto, come le prove di colore di chi dipinge. Add to cart chiude la scatola con un tintinnio, la fa saltare sul tavolo e la conta sul carrello.
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 pencil tin card</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the product card of an art supply shop: a lacquered tin of watercolour pencils on a table. The card tilts
towards the pointer and the light slides over the lid; a tap opens the lid on its hinge and the pencils are
there, side by side. Under the pointer a pencil slides out of the row and scribbles its colour on the strip
of paper below. Add to cart closes the tin with a clink. Everything is drawn by the script -->
<article class="card" data-card>
<div class="tilt" data-tilt>
<button class="tin" type="button" data-tin data-autoclic aria-label="Open the tin" aria-expanded="false">
<svg class="scene" viewBox="0 0 300 210" aria-hidden="true" data-scene></svg>
</button>
<div class="words">
<p class="eyebrow" data-brand>Halftone art supply</p>
<h2 class="title"><span data-product>Watercolour pencils</span>, <span class="title__soft">tin of <span data-count>12</span></span></h2>
<div class="strip" aria-hidden="true">
<svg class="strip__paper" viewBox="0 0 260 40" preserveAspectRatio="none" data-strip></svg>
<span class="strip__name" data-name>Tap the tin to open it</span>
</div>
<div class="buy">
<p class="price"><span class="price__num" data-price>€34</span><span class="price__note">Free shipping over €50</span></p>
<button class="add" type="button" data-add>
<span class="add__icon" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M3.5 4.5h2.2l2.1 10.2a1.6 1.6 0 0 0 1.6 1.3h7.7a1.6 1.6 0 0 0 1.6-1.2l1.5-6.3H6.6" /><circle cx="10" cy="19.6" r="1.3" /><circle cx="17" cy="19.6" r="1.3" /></svg>
<span class="add__badge" data-badge hidden>1</span>
</span>
<span class="add__words"><span class="add__label" data-add-label>Add to cart</span></span>
<svg class="add__tick" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.4 6.4 11.6 13 4.6" data-tick /></svg>
</button>
</div>
</div>
</div>
<p class="sr" aria-live="polite" data-live></p>
</article>
</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.
53 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 card della scatola di matite» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una card color crema larga 300 pixel, con gli angoli tondi. In alto, su un tavolo grigio chiaro, una scatola di latta laccata verde petrolio, vista dall’alto un poco di sbieco, col bordo arrotolato che prende la luce, due cerniere sul lato di dietro e la sua ombra morbida. Sul coperchio un’etichetta di carta color avorio col nome del negozio, Halftone, in un carattere stretto e nerissimo, una mezzaluna di puntini vermigli stampati a retino, «12 watercolour pencils», una riga di piccole lettere e, in fondo, una fascia di dodici strisce nei colori delle matite. Sul tavolo un temperamatite d’ottone, due trucioli di legno arricciati col bordo colorato e una matita vermiglia appuntita lasciata di traverso. Sotto: Halftone art supply in vermiglio, Watercolour pencils, tin of 12, una striscia di carta strappata a destra, il prezzo €34 e il pulsante nero Add to cart col carrello. Col puntatore la card si inclina verso di lui in 3D, una striscia di luce corre sul coperchio e l’ombra della scatola scivola dall’altra parte. Un tocco sulla scatola apre il coperchio: si alza sulla cerniera, va un poco oltre e si assesta, e quando passa la verticale mostra il metallo nudo di dentro con la scritta impressa. Dentro ci sono le dodici matite una sopra l’altra, esagonali, coi due spigoli lucidi e quello in ombra, la scritta in oro, il legno appuntito e la mina del colore. Sotto il puntatore la matita di quella fila scivola fuori su una molla, con l’ombra che si allunga, e sulla striscia di carta si disegna uno scarabocchio del suo colore, a cera, con la grana della carta; il nome del colore compare a destra. Add to cart richiude il coperchio con un colpo e due trattini di tintinnio, la scatola salta sul tavolo e ricade rimbalzando, sul carrello compare il numero e la scritta diventa Added to cart con la spunta.
Come funziona
La scatola disegnata dallo script
Tutta la scena è un SVG di 300 × 210 scritto dallo script: il tavolo con la sua grana, la latta (faccia di sopra, fascia davanti in ombra, interno di metallo), le matite e il coperchio. I colori vengono dalle variabili di :root, letti una volta con getComputedStyle, così la Palette del Playground ridipinge anche il disegno, e le sfumature (lacca, metallo, ombra) sono calcolate da quei colori.
Il coperchio sulla cerniera
Il coperchio è un gruppo scalato in verticale attorno al suo spigolo di dietro: translate, scale(1, s) e translate indietro, scritti a mano a ogni fotogramma da un oggetto che GSAP anima. Da 1 a −0,44 il coperchio si alza e si ribalta; quando s passa per zero l’esterno stampato lascia il posto all’interno di metallo con la scritta capovolta, come si vede un coperchio vero. Si apre con power3.out passando un poco il segno e si chiude con power2.in, poi un colpetto elastico.
Le matite esagonali
Ogni matita è un gruppo: il corpo del suo colore con due bande (lucida sopra, in ombra sotto) che danno l’esagono, la scritta in oro, il legno appuntito con la sua venatura, il colletto di vernice e la mina. Quante sono decide l’altezza della fila; sotto il puntatore lo script trova la fila con getScreenCTM e la matita scivola fuori di LIFT con back.out, mentre la sua ombra si allarga.
Lo scarabocchio a cera
Ogni prova di colore è un percorso a curve quadratiche che va avanti e indietro come una mano che prova una matita, disegnato da sinistra con stroke-dashoffset. La grana viene da un filtro SVG: rumore frattale trasformato in buchi e messo in composizione con la linea, così il tratto ha i vuoti della cera sulla carta. Le prove si mettono in fila e la sesta prende il posto della prima.
La card che si inclina
La card ruota in 3D verso il puntatore con due quickTo (rotationX e rotationY, TILT gradi), e due altri quickTo spostano la striscia di luce sul coperchio e l’ombra della scatola dall’altra parte. Add to cart chiude il coperchio, fa saltare la scatola con bounce.out mentre l’ombra si stringe e si riallarga, fa entrare il numero sul carrello con back.out e scambia la scritta con la spunta disegnata.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PENCILS | script.js | [{ name: 'Cadmium yellow', color: '#f2c230' }, …] | Le matite nella scatola, dall’alto in basso: il nome e il colore. Da 6 a 12; il numero sull’etichetta e nel titolo si aggiorna da solo. |
BRAND | script.js | Halftone | Il nome del negozio, sul coperchio e sopra il titolo. |
PRICE | script.js | €34 | Il prezzo della scatola. |
TILT | script.js | 7 | Di quanti gradi la card si inclina verso il puntatore. |
LID_TIME | script.js | 0.8 | I secondi che il coperchio ci mette ad aprirsi. |
LIFT | script.js | 16 | Di quanto una matita scivola fuori dalla scatola, in pixel del disegno. |
SCRIBBLE | script.js | 3.4 | Lo spessore degli scarabocchi sulla striscia di carta. |
Quando usarla
Per la scheda di un prodotto in un negozio online di belle arti, cancelleria o regali: una scatola di matite, di acquerelli o di pennarelli, un astuccio, un kit; anche per un negozio di giocattoli creativi o per la pagina di un corso di disegno.
Sul telefono
La card è larga 300 pixel, o lo schermo meno 32, e mai più alta della finestra: la sua larghezza segue anche l’altezza. Le scritte sono in unità del contenitore. Un tocco apre la scatola, un tocco su una matita la fa uscire e scarabocchiare, un tocco sul tavolo la richiude. Molle e tempi sono quelli del computer.
Con il movimento ridotto
Niente inclinazione, niente matite che scivolano e niente salti: il coperchio si apre e si chiude con una dissolvenza, la matita scelta resta piena e le altre si attenuano, lo scarabocchio compare già disegnato e la scritta del pulsante cambia senza movimento.
Trappole
- Un coperchio che si ribalta in SVG 2D è uno scale verticale attorno alla cerniera: con s negativo il disegno si capovolge, quindi l’esterno va nascosto e l’interno (con la scritta già capovolta) mostrato proprio quando s passa per zero.
- La fila sotto il puntatore va cercata nelle coordinate del disegno, non in quelle della pagina: getScreenCTM tiene conto anche dell’inclinazione 3D e della card rimpicciolita sul telefono.
- Un clic dello script o della tastiera non ha coordinate: senza distinguerlo, il tocco sulla scatola aperta la chiuderebbe sempre. Così la tastiera e l’anteprima provano il colore dopo, e solo un tocco vero sul tavolo la richiude.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,9 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 23 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.
