Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo nel pacco regalo
L’intro di un logo che arriva come un regalo: il pacco cade e rimbalza, il fiocco si scioglie e il nastro vola via con la fisica, la carta si strappa a zig zag e si apre ai lati, il coperchio salta via girando e il logo spunta su una molla a fisarmonica fra strisce di carta velina. Nel Playground ci metti il tuo nome o carichi il tuo logo.
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 gift-box logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/baloo-2@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script measures it, wraps the gift, drops it, unties it and lets the logo spring out -->
<svg class="palco" data-stage role="img" aria-label="Boxbloom" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- the room: lighter in the middle -->
<radialGradient id="room" cx="0.5" cy="0.42" r="0.75">
<stop offset="0" class="stanza-luce" />
<stop offset="1" class="stanza" />
</radialGradient>
<!-- the wrapping paper: wide stripes and a thin pale line, at a slant -->
<pattern id="wrap" patternUnits="userSpaceOnUse" width="40" height="40" patternTransform="rotate(35)" data-wrap>
<rect class="carta" width="40" height="40" data-wrap-base />
<rect class="carta-riga" width="17" height="40" data-wrap-band />
<rect class="carta-filo" x="26" width="3" height="40" data-wrap-line />
</pattern>
<!-- the soft shadow on the floor -->
<radialGradient id="shade">
<stop offset="0" class="ombra" stop-opacity="0.32" />
<stop offset="1" class="ombra" stop-opacity="0" />
</radialGradient>
<!-- each half of the paper only shows its own side of the tear -->
<clipPath id="clip-left" clipPathUnits="userSpaceOnUse"><path data-clip-left /></clipPath>
<clipPath id="clip-right" clipPathUnits="userSpaceOnUse"><path data-clip-right /></clipPath>
</defs>
<rect fill="url(#room)" data-room />
<rect class="pavimento" data-floor />
<ellipse fill="url(#shade)" data-shadow />
<!-- things lying on the floor behind the box -->
<g data-back></g>
<!-- the gift: the box, the logo inside it, the lid, the paper -->
<g data-gift>
<g data-inside></g>
<g data-pop>
<g data-spring></g>
<g data-logo-holder><g data-logo></g></g>
</g>
<g data-body></g>
<g data-lid></g>
</g>
<!-- the wrapping paper: two halves that tear apart, swing open and fall flat on the floor -->
<g data-paper></g>
<!-- the ribbon and its bow, then the tissue paper over everything -->
<g data-ribbon></g>
<g data-fly></g>
</svg>
<p class="nota">Click or tap to see it again</p>
</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.
36 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 «Il logo nel pacco regalo» da Animorio e adattala al mio sitoCosa fa
In una stanza color pesca, dall’alto cade un pacco regalo incartato in una carta verde petrolio a righe, con un nastro dorato e un fiocco. Si allunga cadendo, si schiaccia toccando terra, fa due rimbalzi sempre più piccoli e il fiocco trema a ogni colpo. Poi qualcuno tira un capo del nastro: dopo uno strattone, l’asola di destra si stringe e passa nel nodo, poi quella di sinistra, e il capo si alza verso l’alto. Il nastro scivola su per il davanti del pacco, passa sopra il coperchio e vola via, si attorciglia in aria e ricade sul pavimento davanti alla scatola in riccioli morbidi, coi capi tagliati a coda di rondine. Qualcosa dentro spinge: il pacco si gonfia e la carta si strappa lungo una linea a zig zag, dall’alto in basso, mostrando il bordo bianco dello strappo. Le due metà si aprono ai lati come due ante, girandosi e mostrando il rovescio chiaro della carta, e cadono piatte sul pavimento. Sotto c’è una scatola corallo vista di tre quarti, col fianco in ombra e il coperchio: trema, il coperchio bussa due volte da dentro, la scatola si schiaccia e il coperchio salta via girando fuori dallo schermo. Dalla scatola spunta il logo di un marchio inventato, Boxbloom, in piedi su un vassoio dorato in cima a una molla a fisarmonica di carta che esce dall’interno scuro della scatola: un boing elastico lo porta su, oscilla a destra e a sinistra, le lettere rimbalzano partendo da quelle in mezzo. Insieme escono decine di strisce di carta velina rosa, menta, lilla, gialle e bianche, che volteggiano girandosi e si posano sul pavimento o sul bordo della scatola. La scatola fa un balletto contento, poi il logo resta lì, dondolando piano sulla molla. Dopo qualche secondo il logo rientra nella scatola, la scatola sparisce con un saltello e cade un pacco nuovo, con le strisce e il volo del coperchio ogni volta un po’ diversi. Un clic lo fa ripartire. Al posto della parola si può mettere un’immagine: spunta dalla scatola allo stesso modo.
Come funziona
Una sola misura
Il palco è un SVG con il viewBox grande quanto la finestra, così un’unità è un pixel. Tutto si conta in larghezze della scatola: il coperchio è largo 1,1 volte, la carta copre coperchio e scatola, il nastro è un decimo. Le lettere si misurano su una canvas con lo stesso carattere (measureText, actualBoundingBoxAscent per l’altezza vera) e la loro grandezza si sceglie perché il logo, la molla e la scatola ci stiano uno sopra l’altro con un po’ d’aria in cima; su uno schermo alto la scatola è più larga.
Il nastro, calcolato prima
Il nastro è una catena di 36 punti con l’integrazione di Verlet: ogni passo i punti avanzano con la loro velocità, la gravità li tira giù e diciotto giri di vincoli rimettono ogni tratto alla sua lunghezza (più un vincolo morbido fra un punto e il secondo dopo, perché un nastro non si piega su se stesso). I punti ancora appoggiati al pacco possono solo salire; il capo è tirato da una mano invisibile lungo un arco sempre più veloce e poi lasciato; il pavimento ha l’attrito e la scatola è un rettangolo da cui i punti vengono spinti fuori. La simulazione gira tutta in build, a 240 passi al secondo, e salva un fotogramma ogni sessantesimo: la timeline anima solo il tempo e il disegno sceglie il fotogramma giusto, così si può fermare, riavvolgere e saltare.
La carta che si strappa
La carta sono due metà, con un bordo a zig zag in comune lungo il centro. Ogni metà è un tracciato ridisegnato a ogni fotogramma: i punti dello zig zag si allontanano solo sopra il fronte dello strappo, che scende dall’alto in basso, e una linea chiara mostra la carta strappata. Le righe sono un pattern ritagliato da un clipPath con la stessa forma. Per aprirsi, ogni metà riceve una matrice che la comprime intorno al bordo esterno col coseno dell’angolo (con un filo di inclinazione per la prospettiva): quando il coseno diventa negativo si vede il rovescio. Per cadere piatta, la stessa matrice la schiaccia verso il pavimento.
La molla e il boing
La molla a fisarmonica sono dieci fasce, larghe e strette a turno, chiare e scure, fra il fondo della scatola e il tappo del logo: quando si allunga le pieghe si aprono, quando si schiaccia si stringono. La sua altezza va con elastic.out, lo spostamento della cima con una serie di oscillazioni che si smorzano, e le fasce lo seguono col quadrato dell’altezza, così la molla si piega. Il logo sta sul tappo, ruota con la cima e si allunga e schiaccia con un fotogramma chiave per ogni rimbalzo; le lettere salgono una dopo l’altra dal centro.
La regia e il tuo logo
Tutta l’entrata è una timeline sola, con le etichette start, arrive, land, untie, ribbon, tear, open, knock, pop, happy, rest e timeScale per la velocità. Le strisce di velina sono tracciati a S: salgono con power2.out, cadono con sine.in, girano e si mostrano di taglio con scaleX avanti e indietro, e si posano sul bordo della scatola o sul pavimento schiacciandosi un poco. Se IMAGE ha un indirizzo, al posto delle lettere spunta l’immagine; nel Playground accanto al campo c’è il tasto per caricare un file, che entra nel codice come indirizzo data:.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'Boxbloom' | Il logo scritto: spunta dalla scatola sulla molla, con le lettere che rimbalzano dal centro. |
IMAGE | script.js | '' | Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola. |
BOUNCE | script.js | 1 | Quanto è elastico tutto: i rimbalzi del pacco, lo schiacciamento, il boing della molla e quanto oscilla (0 = un atterraggio secco). |
SPRING | script.js | 1 | Quanto è alta la molla col logo sopra: 0.6 corta, 1.5 alta (il logo si rimpicciolisce per starci). |
TISSUE | script.js | 40 | Quante strisce di carta velina escono dalla scatola (0 = nessuna). |
SPEED | script.js | 1 | La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà. |
REST | script.js | 4 | Quanti secondi il logo resta in mostra prima che arrivi un pacco nuovo. |
LOOP | script.js | true | Se il logo rientra e cade un pacco nuovo. Con false il logo resta fuori, dondolando sulla molla. |
Quando usarla
Per presentare un logo come una sorpresa: l’apertura del sito di un negozio di regali, di una pasticceria, di un marchio per bambini o di una festa, un lancio, una pagina di auguri, un caricamento, un post per i social. Funziona con un marchio scritto e con un’immagine.
Sul telefono
La stessa animazione con le misure adattate: su uno schermo alto la scatola è più larga e il logo è largo quasi quanto lo schermo; le metà della carta si aprono solo quanto basta a restare dentro lo schermo e il nastro rimbalza sui bordi e si posa davanti alla scatola. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove: il pacco incartato compare in dissolvenza, poi sfuma nella scatola aperta col logo in piedi sulla molla e le strisce di velina già posate. Se l’animazione ricomincia, tutto se ne va in dissolvenza.
Trappole
- Una simulazione fisica fatta a ogni fotogramma con requestAnimationFrame non si può fermare né riavvolgere insieme alla timeline: il nastro si calcola tutto prima e la timeline anima solo il tempo da cui si legge il fotogramma.
- Il nastro, schiacciato sul pavimento, si piegava su se stesso in nodi stretti: un secondo vincolo fra un punto e quello dopo il successivo, che spinge solo quando sono troppo vicini, lo tiene in riccioli morbidi.
- Lo zig zag della carta si vedeva già prima dello strappo, come una cucitura: il contorno di ogni metà disegna solo il bordo esterno, e lo strappo è una linea a parte che si allunga con stroke-dasharray mentre il fronte scende.
- Un logo largo il triplo della scatola non si può nascondere dentro la scatola prima del salto: si nasconde rimpicciolito a zero sul tappo della molla e cresce con back.out mentre sale.
- Seek con suppressEvents salta anche onUpdate: quando si ferma la timeline su un istante, il disegno va chiamato a mano, altrimenti resta quello di prima.
- Il pacco, il nastro e la carta seguono gli stessi rimbalzi finché sono legati, poi no: il nastro lasciato e la carta caduta non devono ballare con la scatola contenta, quindi la trasformazione del pacco si applica a loro solo prima che si stacchino.
- Il logo, appoggiato su un tappo stretto, sembrava galleggiare appena oscillava: ora sta su un vassoio largo quasi quanto il logo, con la base delle lettere sul vassoio, e vassoio e lettere ruotano insieme.
- Una scatola vista solo di fronte, col bordo in alto disegnato a trapezio, non si capiva aperta: è disegnata in tre quarti con una proiezione obliqua (fronte, fianco spostato in su e a destra, bordo superiore con lo spessore, interno scuro e pareti interne ritagliate da un clipPath), e tutta la scatola è spostata a sinistra di metà profondità perché l’apertura stia al centro.
- Il nastro finiva tagliato dritto e su un telefono cadeva fuori dallo schermo: i capi hanno una coda di rondine disegnata a parte, con il contorno solo sui lati, e nella simulazione il nastro cade sul pavimento davanti alla scatola e rimbalza sui bordi dello schermo.
Librerie
GSAP 3.15.0, Baloo 2 (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 16 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 11 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.
