Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo dalla mascherina
Un’intro di logo in stile minimal: una mascherina sottile e trasparente scende sul foglio, un velo di colore la attraversa in una passata obliqua e la vernice passa dai buchi; poi un angolo si solleva, la mascherina si stacca piegandosi su sé stessa e vola via, e il logo resta sul foglio con i piccoli ponti dello stencil, che si chiudono uno dopo l’altro. 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 stencil logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script cuts the logo out of a thin stencil sheet, sprays it and peels the sheet away -->
<svg class="palco" data-stage role="img" aria-label="boada" xmlns="http://www.w3.org/2000/svg">
<defs data-defs></defs>
<g data-world>
<!-- the four crop marks: first around the sheet, at the end around the logo -->
<path class="tacca" data-marks />
<!-- the paint that goes through the holes: what stays on the paper -->
<g data-paint></g>
<!-- the stencil sheet: its shadow, the flat part, the mist of the spray, and the flap that folds back -->
<g data-sheet></g>
</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.
13 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 dalla mascherina» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco caldo e vuoto, quattro tacche di taglio sottili si disegnano agli angoli, una dopo l’altra, dove arriverà la mascherina. La mascherina scende dall’alto: è un foglio sottile e trasparente, grigio appena, con il marchio inventato boada ritagliato dentro, e i bordi del taglio segnati da una linea sottile. Scendendo rimpicciolisce un poco, la sua ombra si stringe sotto di lei, si posa un pixel più in basso del dovuto e si assesta con un piccolo elastico; le tacche sentono il colpo e si allargano di un pixel. Nelle lettere si vedono i ponti dello stencil: le strisce sottili che tengono attaccato al foglio il centro della o, della b, della d e della a, che altrimenti cadrebbe. Poi un velo di colore blu attraversa il foglio in una passata obliqua, come uno spruzzo: dove è passato la vernice resta piena nei buchi, e sul foglio resta solo una nebbia leggera. Un angolo in alto a destra si solleva, trema e ricade un poco; poi la mascherina si stacca piegandosi su sé stessa, si vede il suo retro con le lettere a specchio, e vola via accelerando con la sua ombra. Sul foglio resta il logo, ancora con i ponti aperti. Le tacche si stringono intorno al logo, superano il posto di un pixel e tornano indietro; i ponti si chiudono uno dopo l’altro, da sinistra, come se la vernice ci colasse dentro, e all’ultimo le tacche sentono lo scatto. Dopo qualche secondo le tacche ritirano i bracci e il logo viene cancellato con la stessa passata obliqua; tutto ricomincia. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine: le sue parti scure o colorate (o la sua forma, se ha il fondo trasparente) vengono ritagliate nella mascherina, e la passata scopre l’immagine coi suoi colori.
Come funziona
Lo stencil ritagliato su una canvas
Il palco è un SVG col viewBox grande quanto la finestra, quindi un’unità è un pixel, e tutto si misura in altezze di lettera. Il logo si disegna su una canvas grande quanto la mascherina, con Archivo largo (fontStretch expanded) e pesante, o si disegna l’immagine. Dalla stessa canvas escono tre disegni, con le operazioni di composizione della canvas: la forma bianca del logo, il foglio con i buchi e i bordi del taglio (la forma spostata di un pixel in otto direzioni, meno la forma) e il foglio da solo, che fa da maschera. Diventano tre immagini data: dentro l’SVG.
I ponti, trovati da soli
Sulla canvas un riempimento che parte dai bordi segna tutto il fuori; quello che resta vuoto e non è fuori è un buco chiuso, il centro di una o o di una b, che in uno stencil vero cadrebbe. Per ogni buco si prende la colonna del suo baricentro e si cammina in su e in giù finché si arriva fuori: quello è il ponte, un rettangolo sottile verticale. I ponti vicini si uniscono (la B ne ha uno solo per i due occhielli), e le lettere senza buchi, come la n o la M, restano senza ponti, come in uno stencil vero.
Il velo di colore
La vernice è un rettangolo blu con due maschere: la forma del logo, con i ponti in nero, e la passata, un gradiente lineare da bianco a nero, ruotato di TILT gradi, che scorre attraverso il foglio con sine.inOut. Lo stesso gradiente, più leggero, lascia la nebbia sul foglio, e un terzo gradiente con un picco in mezzo è il velo che si vede passare. Alla fine un gradiente nero, nella stessa maschera, rifà la passata e cancella il logo.
La mascherina che si piega
La piega è una retta che parte dall’angolo in alto a destra e attraversa il foglio. Il foglio si taglia in due poligoni lungo la retta: la parte rimasta è un clipPath, la parte sollevata si ridisegna specchiata sulla retta, con una matrice di riflessione (I meno due volte d per d trasposto). Sono lo stesso gruppo usato due volte con use, e sul retro un velo del colore del fondo lo fa sembrare il lato opaco del foglio. Spostando la retta con power2.in la parte specchiata va a velocità doppia e il foglio vola via; un’ombra sfocata la segue e cresce mentre si solleva.
La regia e il tuo logo
Tutta l’entrata è una timeline sola, con le etichette start, land, veil, lift, peel, reveal, close, rest e leave, e timeScale per la velocità; una sola funzione scrive dopo ogni fotogramma gradienti, ponti, tacche e piega, e riscrive un attributo solo se è cambiato. I ponti si chiudono stringendo il loro rettangolo nella maschera fino a zero, con power3.in. Se IMAGE ha un indirizzo, nella canvas c’è l’immagine e la vernice è l’immagine stessa; 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 | 'boada' | Il logo scritto: viene ritagliato nella mascherina. |
IMAGE | script.js | '' | Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola. |
BRIDGE | script.js | 1 | Quanto sono larghi i ponti dello stencil (1 = come in uno stencil vero, 0 = niente ponti). |
MIST | script.js | 1 | Quanta nebbia di vernice resta sulla mascherina dopo la passata (0 = resta pulita). |
TILT | script.js | 14 | Quanto è obliqua la passata di colore, in gradi. |
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 di essere cancellato. |
LOOP | script.js | true | Se il logo viene cancellato e si ricomincia con una mascherina nuova. Con false il logo resta. |
Quando usarla
Per presentare un logo con un gesto da laboratorio grafico: l’apertura del sito di uno studio di grafica o di serigrafia, di un marchio di abbigliamento o di arredamento, di un locale, di un portfolio, l’anteprima per un cliente, un caricamento, un post per i social. Sta bene dove il resto della pagina è sobrio. Funziona con un marchio scritto e con un’immagine.
Sul telefono
La stessa animazione con le misure adattate: il logo e la mascherina sono più piccoli, così la mascherina e le tacche ci stanno nello schermo; la piega vola via allo stesso modo. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove: la mascherina compare in dissolvenza, la vernice compare nei buchi, la mascherina svanisce, poi i ponti si dissolvono e compaiono le tacche intorno al logo. Se l’animazione ricomincia, anche il logo se ne va in dissolvenza.
Trappole
- L’ombra della mascherina che scende si vedeva attraverso il foglio trasparente e lo faceva diventare grigio scuro: ora sta in un gruppo con una maschera che toglie il rettangolo del foglio, e si vede solo intorno. La maschera va sul gruppo e non sul rettangolo, perché il rettangolo si sposta con GSAP e la maschera si sposterebbe con lui.
- Le maschere SVG usano lo spazio dell’elemento che le chiama: dentro la parte specchiata della piega, il gradiente della passata e la nebbia si specchiano insieme al foglio, ed è giusto così (la vernice è attaccata al foglio). Lo stesso vale per i clipPath dei due pezzi, scritti nelle coordinate del foglio prima della riflessione.
- Sulla canvas la larghezza del carattere si dà con fontStretch, ma va scritta dopo font: assegnare font la riporta a normal, e le lettere uscivano strette. Tutto il resto (buchi, ponti, bordi) nasce dalla stessa canvas, così la mascherina e la vernice combaciano al pixel anche dove fontStretch non c’è.
- Un’immagine con il fondo trasparente si ritaglia lungo la sua forma, una con il fondo pieno lungo le parti scure o colorate: lo script lo decide contando quanti pixel sono trasparenti. Un’isola dentro un buco (un quadrato dentro un quadrato vuoto) resta tenuta da un ponte solo.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 15 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.
