Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Torna alla libreria
La scatola che si piega
Un’intro di logo nello stile minimal per uno studio di packaging inventato: visto dall’alto, il fustellato piatto di una scatola si disegna a linee sottili, tagli pieni e pieghe tratteggiate; la camera si inclina e il cartone si piega da solo, i fianchi, il fronte e il retro, poi il coperchio con la sua linguetta. Le pieghe tratteggiate diventano spigoli, la scatola si posa con un piccolo schiacciamento e sul fronte si stampa il nome in vermiglio. 3D vero, tutto in SVG.
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 box that folds itself</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage aria-label="Hatch packaging: a flat die-cut box folds itself up. Click to fold it again.">
<!-- a flat die-cut, cut lines solid and fold lines dashed, folds up into a box and closes; the name is printed on it -->
<svg class="scene" data-scene aria-hidden="true">
<g data-faces></g>
</svg>
<div class="caption" data-caption>
<p class="caption__title" data-title>Ships flat.</p>
<p class="caption__note" data-note>Hatch, packaging studio</p>
</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.
17 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 scatola che si piega» da Animorio e adattala al mio sitoCosa fa
Su una pagina bianco caldo, vista dritta dall’alto, si disegna il fustellato di una scatola: una croce di rettangoli con il fondo in mezzo, i fianchi ai lati, il fronte sotto e, sopra, il retro, il coperchio e la linguetta smussata. Le linee di taglio, nere e sottili, si tracciano dalla linguetta verso il fronte e i pannelli si riempiono del grigio chiaro del lato interno; le linee di piega compaiono tratteggiate. Poi la camera si inclina e gira un poco intorno alla scatola, e il cartone si piega da solo: prima i due fianchi, che vanno un capello oltre la verticale e tornano, poi il fronte e il retro; mentre il retro si alza il coperchio comincia già a girare, passa sopra e si chiude, e la sua linguetta si infila dentro il fronte. A ogni piega il tratteggio si chiude e diventa uno spigolo pieno, e le facce che girano verso la luce schiariscono: il coperchio è il più chiaro, il fianco a destra il più scuro. La scatola chiusa si posa con un piccolo schiacciamento e un rimbalzo, e sul fronte si stampa in vermiglio il nome dello studio inventato, Hatch, sdraiato sulla faccia come se fosse stampato davvero. Sotto sale la frase Ships flat. e la riga dello studio. Dopo un respiro tutto si riapre all’indietro, la camera torna in alto e il fustellato si cancella; poi tutto ricomincia. Un clic lo fa ripartire.
Come funziona
Pannelli sulle cerniere
Ogni pannello è un rettangolo nelle sue coordinate (a, b) con una funzione che lo porta nel mondo: b è la distanza dalla sua piega e l’angolo della piega lo fa girare (y = d/2 + b·cos α, z = b·sin α per il fronte). Il coperchio è attaccato al bordo del retro e somma il suo angolo a quello del retro; la linguetta somma il suo a quello del coperchio. Con tutti gli angoli a un quarto di giro la scatola è chiusa.
Una camera in tre righe
La proiezione è ortogonale: un giro attorno all’asse verticale (TURN), poi un’inclinazione (TILT). Dà la x e la y sullo schermo e una profondità; le facce si ordinano da dietro in avanti e si riempiono col colore della pagina, così coprono quello che sta dietro. La linguetta, una volta dentro, si mette d’ufficio dietro al fronte e sotto il coperchio.
Pieghe tratteggiate che si chiudono
Ogni pannello ha tre path: la faccia, i suoi bordi di taglio (pieni, con pathLength=1 per disegnarli) e i suoi bordi di piega, con stroke-dasharray «3.5 g» dove g scende a zero man mano che la piega arriva a 90 gradi. La faccia che mostra l’interno prende il colore --inside; quella esterna si schiarisce o si scurisce con il prodotto fra la sua normale e una luce in alto a sinistra.
Il nome stampato sulla faccia
Una faccia piana vista in proiezione ortogonale è una trasformazione affine: il nome è un text SVG con transform=matrix(a b c d e f), dove (a, b) è dove va un passo lungo la larghezza del fronte e (c, d) un passo verso il basso. Così le lettere stanno sdraiate sul cartone con la sua stessa inclinazione.
Scala, giro e movimento ridotto
La scala passa da quella del fustellato a quella della scatola chiusa, ma a ogni fotogramma non supera quella che tiene tutti i pannelli dentro il palco: il coperchio dritto in aria non esce mai. Tutto è una timeline sola in pausa che a onComplete riparte; un clic la fa ripartire da capo. Con il movimento ridotto la scatola chiusa, col nome e la frase, compare in dissolvenza e resta.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'Hatch' | Il nome stampato sul fronte della scatola. |
BOX | script.js | { w: 1.3, d: 0.9, h: 0.72 } | Larghezza, profondità e altezza della scatola. |
TILT | script.js | 56 | I gradi di cui la camera si inclina dall’alto quando la scatola è su. |
TURN | script.js | 32 | I gradi di cui la camera gira intorno alla scatola, per mostrare un fianco. |
FOLD | script.js | 0.75 | I secondi che ogni pannello impiega a piegarsi. |
SETTLE | script.js | 1.5 | Quanto ogni parete va oltre la verticale prima di posarsi: 0 = si ferma secca. |
HOLD | script.js | 2 | I secondi in cui la scatola chiusa resta ferma prima di riaprirsi. |
Quando usarla
Come intro del marchio di uno studio di packaging, di un negozio online o di un servizio di spedizioni; nella pagina «dopo l’ordine» quando il pacco viene preparato; come illustrazione di un servizio di scatole su misura o di abbonamenti a domicilio.
Sul telefono
Le stesse animazioni con le misure adattate: il fustellato riempie l’altezza dello schermo, la scatola chiusa è grande quasi quanto la larghezza e la frase sta sotto; la scala non lascia mai uscire un pannello dallo schermo.
Con il movimento ridotto
Niente si muove: la scatola chiusa, col nome stampato in vermiglio e la frase sotto, compare in dissolvenza e resta.
Trappole
- La linguetta chiusa ha il centro più in alto del fronte, quindi per profondità media finirebbe davanti al fronte e si vedrebbe attraverso la scatola: una volta dentro va messa d’ufficio dietro al fronte e sotto il coperchio.
- A metà inclinazione, con la scala presa a metà fra il fustellato e la scatola chiusa, il coperchio dritto in aria usciva dallo schermo: a ogni fotogramma la scala si limita a quella che tiene tutto dentro.
- Le facce si riempivano tutte insieme prima che i tagli fossero disegnati, e alla fine del giro restava un’ombra senza contorni: ogni faccia compare con il suo contorno.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
