Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo uscito dalla stampante
L’intro di un logo con una stampante a getto d’inchiostro vista dall’alto: la testina corre avanti e indietro riga per riga, spruzza puntini di ciano, magenta, giallo e nero che si gonfiano e si fondono nel colore del marchio, e il foglio esce e si posa sulla scrivania con un piccolo rimbalzo. 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 inkjet-printer logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/lexend@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script measures it, builds the printer and the sheet, and prints the logo row by row -->
<svg class="palco" data-stage role="img" aria-label="Mixtone" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- soft shadows on the desk -->
<filter id="soft" x="-30%" y="-60%" width="160%" height="220%">
<feGaussianBlur stdDeviation="6" data-soft-blur />
</filter>
<!-- the shade the printer's lip throws on the paper coming out of the slot -->
<linearGradient id="lip-grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" class="labbro-stop" />
<stop offset="1" class="labbro-stop labbro-stop--via" />
</linearGradient>
<!-- the shine of fresh ink -->
<linearGradient id="gloss-grad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" class="lucido-stop lucido-stop--via" />
<stop offset="0.5" class="lucido-stop" />
<stop offset="1" class="lucido-stop lucido-stop--via" />
</linearGradient>
<!-- while it prints, the sheet shows only below the slot -->
<clipPath id="paper-clip">
<rect data-paper-clip />
</clipPath>
</defs>
<g data-world>
<!-- the printer: shadow, paper trays, body, the window with the rail and the print head -->
<g data-printer-place>
<g data-printer></g>
</g>
<!-- the sheet, with the dots and the print on it -->
<g clip-path="url(#paper-clip)">
<g data-paper></g>
</g>
<!-- the shade of the printer's lip, over the paper -->
<g data-printer-over-place>
<g data-printer-over></g>
</g>
<g data-fx></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.
32 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 uscito dalla stampante» da Animorio e adattala al mio sitoCosa fa
Su una scrivania grigio azzurro cade dall’alto una stampante a getto d’inchiostro, vista da sopra: tocca il piano, si schiaccia e torna su con un elastico, le cartucce saltellano e ai piedi escono due sbuffi d’aria. Un tasto si abbassa, il vassoio d’uscita scivola fuori con un rimbalzo e la testina, un carrello con le quattro cartucce di ciano, magenta, giallo e nero, corre lungo la guida fino all’inizio della riga; il foglio in cima alla risma viene tirato dentro ed esce dalla fessura in due scatti. Poi la stampa, riga per riga, dal basso del logo verso l’alto (il foglio esce verso di noi): a ogni riga la testina corre verso destra spruzzando goccioline dei quattro colori, che sulla carta diventano una retinatura di puntini (ogni colore con il suo angolo, come in tipografia, e grande quanto la sua parte nel colore del marchio); poi torna indietro e dietro di lei i puntini si gonfiano, si sovrappongono e si fondono nel colore pieno del marchio, un corallo acceso. Il foglio avanza di uno scatto, la stampante dà un piccolo colpo a ogni passata e le cartucce sobbalzano a ogni cambio di direzione. Finita l’ultima riga la testina torna a casa e il foglio esce tutto; la stampante si solleva e vola via, il vassoio rientra, e il foglio con il logo di un marchio inventato, Mixtone, plana al centro della scrivania, si posa, fa un piccolo rimbalzo e vibra appena. Un luccichio d’inchiostro fresco passa sul logo. Il foglio resta lì, respira e luccica ogni tanto; dopo qualche secondo scivola via e la stampante torna per un foglio nuovo. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine: viene stampata nel colore del marchio, oppure con i suoi colori.
Come funziona
Una sola misura
Il palco è un SVG con il viewBox grande quanto la finestra, così un’unità è un pixel. Le lettere si misurano su una canvas con lo stesso carattere (measureText, actualBoundingBoxAscent per l’altezza vera) e tutto si conta in altezze di lettera: il foglio è largo quanto il logo più un margine, la stampante un po’ di più, con la guida abbastanza lunga perché la testina passi oltre le due estremità del logo. La grandezza si sceglie perché, mentre stampa, ci stiano il vassoio d’entrata, la stampante e il foglio appeso alla fessura. Il foglio è disegnato nelle coordinate del suo posto finale, al centro: durante la stampa è solo spostato in su e ritagliato sotto la fessura da un clipPath fermo.
La retinatura in quadricromia
Ogni riga ha quattro pattern SVG, uno per inchiostro, con un cerchio per tessera e un patternTransform che lo ruota di 15, 75, 0 e 45 gradi: sono i retini della tipografia. I quattro rettangoli riempiti coi pattern hanno mix-blend-mode multiply, così dove i puntini si toccano i colori si mescolano come inchiostri. Una maschera alfa con un use del logo li tiene dentro le lettere. Il colore del marchio, letto dalla variabile CSS, si scompone in ciano, magenta, giallo e nero e l’area di ogni puntino è proporzionale alla sua parte: un corallo dà puntini grandi di magenta e giallo e piccoli di ciano e nero.
La testina e le righe
Ogni passata della testina è un oggetto con un valore v che una tween porta da 0 a 1 con sine.inOut. Una funzione sola disegna tutto da quei valori: la testina sta dove l’ha portata l’ultima passata cominciata; per ogni riga un clipPath mostra i puntini dall’inizio fino alla testina, un altro mostra il colore pieno dalla fine fino a poco dietro la testina in ritorno, e il raggio dei puntini cresce con la seconda passata, così si vedono gonfiarsi e fondersi prima di diventare pieni. La stessa funzione gira anche su gsap.ticker: una timeline spostata con seek non chiama onUpdate.
Il foglio che si posa
Fra una riga e l’altra il foglio avanza di un’altezza di riga con back.out, mentre la stampante dà un piccolo colpo e le cartucce sobbalzano a scalare. Alla fine il ritaglio della fessura sparisce, la stampante si alza con back.in e il foglio, che sta sopra di lei, cresce un poco e allarga l’ombra (si alza verso di noi), plana al centro e scende: si schiaccia appena, risale un poco e ricade con bounce.out, mentre il suo contorno, un tracciato di quattro curve quadratiche, vibra con una serie di curvature che si smorzano.
La regia e il tuo logo
Tutta l’entrata è una timeline sola, con le etichette start, land, wake, print, eject, release, reveal, rest e timeScale per la velocità. Finita la stampa le righe lasciano il posto al logo intero in un pezzo solo, così fra le righe non resta nessuna giunta. Se IMAGE ha un indirizzo, il logo diventa quell’immagine: la sua trasparenza fa da maschera per i puntini, e un filtro la stampa nel colore del marchio (le parti chiare e lo sfondo trasparente restano carta), oppure resta coi suoi colori. 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 | 'Mixtone' | Il logo scritto: la stampante lo stampa riga per riga. |
IMAGE | script.js | '' | Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola. |
ROWS | script.js | 6 | In quante righe si stampa il logo: ogni riga è una passata di gocce e una di ritorno che le fonde. Più righe, stampa più lunga e fitta. |
DOTS | script.js | 1 | Quanto sono grandi i puntini dei quattro colori prima di fondersi: 0.6 fini, 1.8 grossi. |
BOUNCE | script.js | 1 | Quanto rimbalza il foglio quando si posa sulla scrivania (0 = si posa piano). |
TINT | script.js | true | Un’immagine si stampa nel colore del marchio; con false resta coi suoi colori. |
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 stampato resta in mostra prima che il foglio scivoli via. |
LOOP | script.js | true | Se il foglio scivola via e la stampante torna per un foglio nuovo. Con false il logo resta, col foglio che respira e il luccichio. |
Quando usarla
Per presentare un logo con un gesto che sa di stampa e di colore: l’apertura del sito di una tipografia, di una copisteria, di uno studio grafico o di un marchio di cartoleria, l’anteprima di un logo per un cliente, 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 i margini del foglio e della stampante sono più stretti, così il logo è largo quasi tre quarti dello schermo. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove: la stampante compare in dissolvenza, poi svanisce e al suo posto compare il foglio col logo già stampato. Se l’animazione ricomincia, anche il foglio se ne va in dissolvenza.
Trappole
- Le funzioni che disegnano a mano (la testina, i ritagli delle righe, il foglio) giravano solo in onUpdate: con la timeline spostata da seek, come fanno le prove e le miniature, la testina restava ferma e il logo non compariva. Ora girano anche su gsap.ticker.
- Un’immagine stampata in tinta ha zone semitrasparenti: le righe, che si sovrappongono di mezzo pixel per non lasciare fessure, lasciavano strisce più scure. Finita la stampa le righe lasciano il posto al logo intero, e il filtro della tinta rende pieni i colori.
- Dove il colore pieno era trasparente (il buco bianco di un’immagine) si vedevano ancora i puntini sotto: i puntini di ogni riga ora si fermano dove comincia il colore pieno.
- L’ombra del foglio, sfocata e spostata in giù, spuntava sotto la fessura prima che il foglio uscisse: all’inizio il foglio sta più in alto dentro la stampante.
- La riga stampata per prima è quella in basso: il foglio esce verso chi guarda, quindi la prima parte che esce è il fondo del logo. Stampando dall’alto il logo sarebbe uscito capovolto.
- La prima stampa è sempre uguale (stesso angolo dei retini e del foglio), così il fotogramma del poster cade sempre sul foglio appena posato; dalla seconda cambiano un poco.
Librerie
GSAP 3.15.0, Lexend (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 13 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.
