Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo dietro il sipario
L’entrata di un logo a teatro: qualcuno si muove dietro il sipario di velluto rosso, una mano guantata tamburella dal varco, il sipario si apre raccogliendo le pieghe, un occhio di bue cerca il logo sul palco buio e lo trova, le luci della ribalta si accendono una alla volta e il logo fa l’inchino fra coriandoli e rose. 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 theatre-curtain logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bodoni-moda@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the theatre: the script measures it, builds the stage around the logo and draws the curtain every frame -->
<svg class="palco" data-stage role="img" aria-label="Bravessa" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- one pleat of velvet: dark in the folds, a soft sheen on the crest -->
<linearGradient id="pleat" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" class="velluto-fondo" />
<stop offset="0.3" class="velluto-pieno" />
<stop offset="0.52" class="velluto-lume" />
<stop offset="0.74" class="velluto-pieno" />
<stop offset="1" class="velluto-fondo" />
</linearGradient>
<!-- the shade over the curtain: dark under the pelmet, lighter in the middle, dark again at the hem -->
<linearGradient id="pleat-shade" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" class="ombra" stop-opacity="0.55" />
<stop offset="0.22" class="ombra" stop-opacity="0" />
<stop offset="0.8" class="ombra" stop-opacity="0" />
<stop offset="1" class="ombra" stop-opacity="0.35" />
</linearGradient>
<!-- the swags of the pelmet -->
<linearGradient id="swag" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" class="velluto-fondo" />
<stop offset="0.55" class="velluto-pieno" />
<stop offset="0.85" class="velluto-lume" />
<stop offset="1" class="velluto-pieno" />
</linearGradient>
<!-- gilded wood: the frame of the stage and the trim of the apron -->
<linearGradient id="gilt" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" class="oro-lume" />
<stop offset="0.35" class="oro-pieno" />
<stop offset="0.6" class="oro-fondo" />
<stop offset="0.8" class="oro-pieno" />
<stop offset="1" class="oro-lume" />
</linearGradient>
<linearGradient id="gilt-bar" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" class="oro-lume" />
<stop offset="0.5" class="oro-pieno" />
<stop offset="1" class="oro-fondo" />
</linearGradient>
<!-- where something pushes the velvet from behind, it catches the light -->
<radialGradient id="bulge">
<stop offset="0" class="velluto-lume" stop-opacity="0.75" />
<stop offset="1" class="velluto-lume" stop-opacity="0" />
</radialGradient>
<!-- the hole the spotlight makes in the dark, soft at its edge -->
<radialGradient id="spot-hole">
<stop offset="0" stop-color="#000" />
<stop offset="0.72" stop-color="#000" />
<stop offset="1" stop-color="#fff" />
</radialGradient>
<!-- the warm pool of the spotlight -->
<radialGradient id="spot-pool">
<stop offset="0" class="luce" stop-opacity="0.24" />
<stop offset="0.7" class="luce" stop-opacity="0.13" />
<stop offset="1" class="luce" stop-opacity="0" />
</radialGradient>
<!-- the beam: strong at the lens, thin by the time it reaches the stage -->
<linearGradient id="beam" gradientUnits="userSpaceOnUse" data-beam-fill>
<stop offset="0" class="luce" stop-opacity="0.5" />
<stop offset="1" class="luce" stop-opacity="0.1" />
</linearGradient>
<!-- the footlights wash the stage from below -->
<linearGradient id="wash" x1="0" y1="1" x2="0" y2="0">
<stop offset="0" class="ribalta" stop-opacity="0.55" />
<stop offset="0.5" class="ribalta" stop-opacity="0.12" />
<stop offset="1" class="ribalta" stop-opacity="0" />
</linearGradient>
<linearGradient id="backdrop" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" class="fondale-alto" />
<stop offset="1" class="fondale" />
</linearGradient>
<!-- the logo goes a little darker while it bows, turned away from the light -->
<filter id="dim" color-interpolation-filters="sRGB">
<feComponentTransfer data-dim>
<feFuncR type="linear" slope="1" />
<feFuncG type="linear" slope="1" />
<feFuncB type="linear" slope="1" />
</feComponentTransfer>
</filter>
<!-- everything on the stage stays inside the opening -->
<clipPath id="opening" clipPathUnits="userSpaceOnUse"><rect data-opening /></clipPath>
<!-- the dark on the stage, with the hole of the spotlight in it -->
<mask id="dark-mask" maskUnits="userSpaceOnUse" data-dark-mask>
<rect fill="#fff" data-dark-full />
<ellipse fill="url(#spot-hole)" data-hole />
</mask>
<!-- the dust only shows inside the beam -->
<clipPath id="beam-clip" clipPathUnits="userSpaceOnUse"><path data-beam-clip /></clipPath>
<!-- a tassel: the point where the cord hangs is 0 0 -->
<g id="t-tassel">
<path class="nappa-cordone" d="M0 0L0 11" />
<path class="nappa" d="M-6 10C-7.5 15 -8.5 20 -7.5 24L7.5 24C8.5 20 7.5 15 6 10Z" />
<ellipse class="nappa" cx="0" cy="10" rx="6" ry="3.4" />
<path class="nappa-lucido" d="M-3.4 13.5Q-4.6 18 -3.6 21.5" />
<rect class="nappa-fascia" x="-8.8" y="23" width="17.6" height="5.4" rx="2.2" />
<path class="nappa" d="M-8 28.4L-11.5 53Q0 57.5 11.5 53L8 28.4Z" />
<path class="nappa-fili" d="M-5 31L-7.6 53.4M-1.8 31L-2.6 55.2M1.8 31L2.6 55.2M5 31L7.6 53.4" />
</g>
<!-- a footlight: a pear of glass on a brass screw, with its filament; the middle of the base is 0 0 -->
<g id="t-bulb">
<path class="vetro" d="M-5 -9C-5 -13 -10 -16 -10 -24C-10 -31 -5.5 -35 0 -35C5.5 -35 10 -31 10 -24C10 -16 5 -13 5 -9Z" />
<path class="vetro-acceso" data-glass-on d="M-5 -9C-5 -13 -10 -16 -10 -24C-10 -31 -5.5 -35 0 -35C5.5 -35 10 -31 10 -24C10 -16 5 -13 5 -9Z" />
<path class="supporto" d="M-2.4 -9L-3.6 -22M2.4 -9L3.6 -22" />
<path class="filamento" d="M-3.6 -22L-2.4 -25L-1.2 -22L0 -25L1.2 -22L2.4 -25L3.6 -22" />
<path class="filamento-acceso" data-wire-on d="M-3.6 -22L-2.4 -25L-1.2 -22L0 -25L1.2 -22L2.4 -25L3.6 -22" />
<path class="riflesso-vetro" d="M-6.4 -26Q-6.6 -30.5 -3 -32.4" />
<path class="zoccolo" d="M-6 -9.5L6 -9.5L6 -1L3.4 1.6L-3.4 1.6L-6 -1Z" />
<path class="zoccolo-righe" d="M-6 -6.8L6 -7.8M-6 -3.6L6 -4.6" />
</g>
<!-- a rose: the middle of the flower is 0 0, the stem hangs down -->
<g id="t-rose">
<path class="stelo-bordo" d="M0 8C2 30 -2 52 1 78" />
<path class="stelo" d="M0 8C2 30 -2 52 1 78" />
<path class="spina" d="M1.4 29L6 25.6L1.8 33.4ZM-0.4 53L-5 49.6L-0.9 57.4Z" />
<path class="foglia" d="M1 46C7 37 18 36 23 40C17 48 8 50 1 46Z" />
<path class="venatura" d="M2.5 45.4Q12 41.5 21 40.2" />
<path class="foglia" d="M-10 8.6L-3.4 4.4L0 9.6L3.4 4.4L10 8.6L4.6 13L0 10.6L-4.6 13Z" />
<path class="rosa" d="M-14.5 -2C-16.5 -12 -8.5 -19.5 0 -18.5C8.5 -19.5 16.5 -12 14.5 -2C12.5 6 6.5 10.5 0 10.5C-6.5 10.5 -12.5 6 -14.5 -2Z" />
<path class="rosa-cuore" d="M-8.5 -5.5C-9 -12 -3 -14.5 2 -13C7 -11.4 8 -5.4 4 -2C0.6 0.6 -4.4 -1 -3.6 -5C-3 -8 1.6 -8.4 2.4 -5.4" />
<path class="rosa-piega" d="M-14.5 -2C-10 2.6 -4.4 4.4 0 3.4M14.5 -2C10 2.6 4.4 4.4 0 3.4M-11 -12.5C-8 -9 -8.6 -5 -8.5 -5.5" />
<path class="rosa-lucido" d="M-10.5 -11Q-6.6 -15.6 -1 -15.6" />
</g>
</defs>
<rect class="sala" data-house />
<!-- the stage, seen through the opening -->
<g clip-path="url(#opening)">
<g data-set></g>
<ellipse class="ombra-logo" data-logo-shadow />
<g data-logo></g>
<rect class="buio" mask="url(#dark-mask)" data-dark />
<ellipse fill="url(#spot-pool)" class="schermo" data-pool />
<g class="pulviscolo" clip-path="url(#beam-clip)" data-motes></g>
<!-- the curtain: the left half, the gloved hand that comes out of the gap, the right half on top -->
<g data-curtain-left></g>
<g data-hand>
<g data-finger><path class="guanto" d="M4 -17L-21.75 -17A4.25 4.25 0 0 0 -21.75 -8.5L4 -8.5Z" /><path class="guanto-piega" d="M-10.6 -15Q-11.8 -12.75 -10.6 -10.5" /></g>
<g data-finger><path class="guanto" d="M4 -8.5L-24.75 -8.5A4.25 4.25 0 0 0 -24.75 0L4 0Z" /><path class="guanto-piega" d="M-12 -6.5Q-13.2 -4.25 -12 -2" /></g>
<g data-finger><path class="guanto" d="M4 0L-22.75 0A4.25 4.25 0 0 0 -22.75 8.5L4 8.5Z" /><path class="guanto-piega" d="M-11 2Q-12.2 4.25 -11 6.5" /></g>
<g data-finger><path class="guanto" d="M4 8.5L-17.75 8.5A4.25 4.25 0 0 0 -17.75 17L4 17Z" /><path class="guanto-piega" d="M-8.4 10.5Q-9.6 12.75 -8.4 15" /></g>
</g>
<g data-curtain-right></g>
<g data-floor-fx></g>
<g data-pelmet></g>
<rect class="buio" data-house-dim />
<rect fill="url(#wash)" class="schermo" data-wash />
<path fill="url(#beam)" class="schermo" data-beam />
</g>
<!-- the gilded frame, its shell, and the spotlight hanging from it -->
<g data-frame></g>
<g data-lamp>
<path class="staffa-bordo" d="M-27 6L-27 -16L27 -16L27 6" />
<path class="staffa" d="M-27 6L-27 -16L27 -16L27 6" />
<g data-barrel>
<path class="lampada" d="M-15 -20L-11 -28L11 -28L15 -20Z" />
<rect class="lampada" x="-21" y="-21" width="42" height="69" rx="6" />
<path class="alette" d="M-21 -11L21 -11M-21 -4L21 -4M-21 3L21 3" />
<path class="lampada-lucido" d="M-13.5 -15L-13.5 41" />
<rect class="ghiera" x="-24.5" y="46" width="49" height="12" rx="3" />
<ellipse class="lente" cx="0" cy="60" rx="18" ry="5" />
<ellipse class="lente-accesa" cx="0" cy="60" rx="18" ry="5" data-lens-on />
</g>
<circle class="pomello" cx="-27" cy="0" r="5" />
<circle class="pomello" cx="27" cy="0" r="5" />
</g>
<!-- the apron and the footlights -->
<g data-apron></g>
<g data-bulbs></g>
<!-- confetti and roses, over everything -->
<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.
46 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 dietro il sipario» da Animorio e adattala al mio sitoCosa fa
Un piccolo teatro grande quanto la finestra: una cornice dorata con una conchiglia in cima, una mantovana di festoni di velluto con la frangia d’oro e le nappe, e un sipario rosso a pieghe chiuso. Sotto, sul bordo del palco, una fila di lampadine spente. Qualcuno cammina dietro la metà sinistra: il velluto si gonfia, prende la luce e segue i passi fino al centro. Il varco trema e ne spunta una mano col guanto bianco, che tamburella due volte con le dita, stringe il bordo e sparisce. Il sipario si apre: le pieghe si stringono verso i lati come stoffa vera, l’orlo resta indietro e poi oscilla oltre, le nappe dondolano, dall’orlo si alza polvere e dall’alto ne scende un po’. Il palco è buio. L’occhio di bue appeso alla cornice si accende con uno sfarfallio, gira sulla sua forcella e cerca: il cono di luce scorre sul fondale e sulle assi col suo cerchio, passa oltre il logo, torna indietro e lo trova, e il cerchio prende la forma del marchio inventato, Bravessa, scritto in un Bodoni d’avorio. La luce si allarga, la sala torna visibile e le luci della ribalta si accendono una alla volta, con il filamento che si arroventa. Il logo fa l’inchino: prende fiato, si piega in avanti partendo dalle lettere in mezzo, si scurisce un poco perché volta la faccia alla luce, e torna su con un rimbalzo. Dall’alto cadono coriandoli che sventolano e si posano sulle assi, dal pubblico volano tre rose che girano in aria e atterrano distese con un saltello. Poi il logo resta nella luce: l’occhio di bue ondeggia piano, il velluto respira, la polvere galleggia nel fascio, ogni tanto scende un coriandolo. Dopo qualche secondo le luci calano, il sipario si richiude e lo spettacolo ricomincia, con un percorso della luce e una pioggia di coriandoli diversi. Un clic lo fa ripartire da capo. Al posto della parola si può mettere un’immagine: la luce, l’inchino e le rose funzionano anche lì.
Come funziona
Il teatro a misura
Il palco è un SVG con il viewBox grande quanto la finestra, così un’unità è un pixel. La cornice si calcola dalla finestra (su uno schermo alto il boccascena diventa verticale), poi le lettere si misurano su una canvas con lo stesso carattere (measureText, actualBoundingBoxAscent per l’altezza vera) e il logo prende la grandezza che entra sulle assi senza toccare la mantovana. Tutto il resto, il cerchio della luce, le rose, i coriandoli, le lampadine, viene da queste due misure.
Il sipario che si ridisegna
Ogni metà del sipario è una fila di pieghe: strisce con un gradiente orizzontale (scuro nell’incavo, lucido sulla cresta) e il contorno scuro, più una seconda striscia con l’ombra verticale. I bordi delle pieghe sono condivisi, così non resta mai una fessura, e si ricalcolano a ogni fotogramma da un oggetto di stato: quanto è aperto, quanto l’orlo resta indietro, il respiro del velluto e il rigonfiamento di chi spinge da dietro. Aprendosi, la posizione di ogni piega segue una potenza che cresce con l’apertura: le pieghe vicino al lato si stringono di più, come stoffa raccolta.
La frangia e le nappe
L’orlo è una fila di archi, uno per piega. Il gallone è un tratto dorato lungo gli archi; i fili della frangia sono tanti segmenti verticali che partono dall’arco, ricalcolati con le pieghe, così restano dritti anche quando le pieghe sono strette. Sui festoni della mantovana, che non si muovono, i fili sono invece un tratto largo tratteggiato lungo la curva. Le nappe sono un disegno solo nelle defs, copiato dove serve: ognuna gira intorno al punto dove pende il cordone, calcolato con getBBox.
L’occhio di bue
La luce è un oggetto con il centro e i raggi del cerchio e quanto è accesa. Il buio sul palco è un rettangolo con una maschera: dentro c’è un’ellisse con un gradiente radiale nero al centro e bianco al bordo, il buco morbido della luce. Il fascio parte dai due lati della lente e arriva ai due punti dove tocca l’ellisse (dove la tangente è parallela alla direzione della lampada), girando intorno al lato lontano; lo stesso tracciato fa da clipPath alla polvere, che si vede solo nella luce. La lampada gira sulla forcella verso il cerchio con un rotate calcolato da atan2.
L’inchino e gli applausi
Ogni lettera si piega dal suo piede (transformOrigin in basso) con uno stagger che parte dal centro: un respiro, giù, una pausa e su con elastic.out. Mentre è piegato il logo passa sotto un filtro feComponentTransfer di cui si abbassa la pendenza, così si scurisce un poco senza diventare trasparente. I coriandoli sono rettangoli che cadono girando e sventolano con scaleX avanti e indietro; le rose sono un disegno nelle defs, lanciate dal basso in un arco e posate distese con un saltello.
La regia e il tuo logo
Tutta la storia è una timeline sola, con timeScale per la velocità; il suo onUpdate ridisegna sipario, luce, mano e polvere una volta per fotogramma, dopo che tutti i tween si sono mossi. Alla fine le luci calano, il sipario si richiude e la scena si ricostruisce dall’etichetta «arrive», con un percorso della luce e coriandoli nuovi. Se IMAGE ha un indirizzo, il logo diventa quell’immagine, un pezzo solo che si inchina tutto insieme. Nel Playground accanto al campo c’è il tasto per caricare un file dal computer, che entra nel codice come indirizzo data:.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'Bravessa' | Il logo scritto: ogni lettera si inchina un attimo dopo quella in mezzo. |
IMAGE | script.js | '' | Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola. |
SPOT | script.js | 1 | Quanto è largo il cerchio dell’occhio di bue intorno al logo, e quindi il cono di luce: 0.7 stretto, 1.6 generoso. |
CONFETTI | script.js | 60 | Quanti coriandoli cadono all’inchino. |
BOW | script.js | 1 | Quanto si inchina il logo: 0 resta dritto, 1.6 è un inchino profondo. |
ROSES | script.js | 3 | Quante rose lancia il pubblico sul palco. |
SPEED | script.js | 1 | La velocità di tutto lo spettacolo: 2 è il doppio, 0.5 la metà. |
REST | script.js | 5 | Quanti secondi il logo resta nella luce prima che il sipario si richiuda. |
LOOP | script.js | true | Se il sipario si richiude e lo spettacolo ricomincia. Con false il logo resta nella luce per sempre, con l’occhio di bue che ondeggia. |
Quando usarla
Per presentare un logo con un po’ di cerimonia: l’anteprima per un cliente, l’apertura del sito di un teatro, di un festival, di una compagnia o di un locale, il lancio di un prodotto, un video di presentazione, un post per i social. Funziona con un marchio scritto e con un’immagine.
Sul telefono
Lo stesso spettacolo, con le misure adattate: su uno schermo alto il boccascena diventa verticale, le pieghe sono meno e più larghe, il logo sta più in basso sulle assi e il cono di luce è più lungo. Un tocco lo fa ripartire.
Con il movimento ridotto
Niente si muove: il sipario chiuso si dissolve e lascia il palco buio, poi compare la luce sul logo, poi in dissolvenza si accendono le luci della ribalta e compaiono le rose e i coriandoli già posati. Se lo spettacolo ricomincia, il sipario torna in dissolvenza.
Trappole
- Con tanti tween sullo stesso oggetto di stato, ridisegnare il sipario nell’onUpdate di ciascuno lo disegna con valori vecchi a metà fotogramma (e più volte). Si ridisegna una volta sola, nell’onUpdate della timeline, che arriva dopo tutti i figli: così anche un seek a un tempo qualsiasi mostra il fotogramma giusto.
- I fili della frangia fatti come tratto tratteggiato lungo l’orlo si storcevano a zigzag quando le pieghe si stringono (il tratteggio segue la curva, che diventa quasi verticale): sul sipario sono segmenti verticali ricalcolati a ogni fotogramma.
- Una nappa appesa all’angolo dell’orlo pendeva sotto il bordo del palco e finiva dietro le lampadine: ora pende dal bordo interno, poco sotto la metà.
- Abbassare l’opacità del logo per farlo scurire nell’inchino lo rendeva trasparente sulle assi (con un’immagine si vedeva il pavimento attraverso): si usa un filtro feComponentTransfer messo solo durante l’inchino.
- Le rose e i coriandoli stanno sopra a tutto: nella versione a movimento ridotto restavano visibili sopra il sipario che tornava in dissolvenza. Si dissolvono insieme a lui.
- Il fascio sopra il sipario che si richiude sembrava una macchia chiara sul velluto: le luci calano mentre il sipario si chiude, non dopo.
- La lampada è visibile anche a sipario chiuso: se all’inizio di ogni giro il cerchio partisse da un punto a caso la lampada scatterebbe. Il punto di partenza è fisso e, a luce spenta, la lampada ci torna piano.
Librerie
GSAP 3.15.0, Bodoni Moda (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 18 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 10 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.
