Il logo stampato dal timbro

Intro, SVG, TestoGSAPImpegnativaPeso compresso: Demo 17 KBGSAP 28 KBGratisScarica lo zip

L’intro di un logo con un timbro di legno e gomma: si intinge nel tampone, carica e stampa con un colpo che piega il foglio e schizza inchiostro; il logo resta stampato con la grana vera dell’inchiostro, che si asciuga. 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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The rubber-stamp logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/familjen-grotesk@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script measures it, builds the sheet, the ink pad and the stamp's block, and prints the logo -->
    <svg class="palco" data-stage role="img" aria-label="Pressly" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- the grain of the paper: a little tile of specks and fibres the script paints on a canvas -->
        <pattern id="grain" patternUnits="userSpaceOnUse" width="180" height="180">
          <image width="180" height="180" data-grain-image />
        </pattern>
        <!-- the ink texture: blotches of more and less ink, and a few pin holes where the rubber did not touch -->
        <filter id="ink-noise" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-noise>
          <feTurbulence type="fractalNoise" numOctaves="3" result="blot" data-noise-blot />
          <feColorMatrix in="blot" type="matrix" result="soft" data-noise-soft />
          <feTurbulence type="fractalNoise" numOctaves="2" result="dust" data-noise-dust />
          <feColorMatrix in="dust" type="matrix" result="holes" data-noise-holes />
          <feComposite in="soft" in2="holes" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
        </filter>
        <mask id="ink-mask" maskUnits="userSpaceOnUse" data-ink-mask>
          <rect fill="#fff" filter="url(#ink-noise)" data-ink-mask-rect />
        </mask>
        <!-- the rough edges of a rubber print: the shapes pushed about by a fine noise, a bleed when there is a lot of ink -->
        <filter id="ink-rough" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-rough>
          <feMorphology operator="dilate" radius="0" result="fat" data-rough-fat />
          <feTurbulence type="fractalNoise" numOctaves="2" result="wobble" data-rough-turb />
          <feDisplacementMap in="fat" in2="wobble" xChannelSelector="R" yChannelSelector="G" data-rough-disp />
        </filter>
        <!-- the fresh-ink shine shows only on the print -->
        <mask id="print-alpha" maskUnits="userSpaceOnUse" style="mask-type: alpha" data-print-alpha>
          <use href="#print-dry" />
        </mask>
        <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>
        <!-- soft shadows -->
        <filter id="soft" x="-30%" y="-80%" width="160%" height="260%" data-soft>
          <feGaussianBlur stdDeviation="6" data-soft-blur />
        </filter>
        <!-- the turned handle, to keep its shade, grain and grooves inside it -->
        <clipPath id="handle-clip">
          <path d="M-54 0L54 0L54 -10C54 -13 51 -14 46 -15C34 -17 26 -24 24 -34C21 -50 18 -66 19 -84C24 -86 28 -88 28 -91L28 -98C28 -101 24 -103 22 -106C36 -112 48 -126 48 -146C48 -170 26 -188 0 -188C-26 -188 -48 -170 -48 -146C-48 -126 -36 -112 -22 -106C-24 -103 -28 -101 -28 -98L-28 -91C-28 -88 -24 -86 -19 -84C-18 -66 -21 -50 -24 -34C-26 -24 -34 -17 -46 -15C-51 -14 -54 -13 -54 -10Z" />
        </clipPath>
      </defs>

      <g data-world>
        <!-- the sheet of paper, with the print on it -->
        <g data-paper-place>
          <g data-paper>
            <path class="foglio-ombra foglio-ombra--larga" data-paper-shadow-2 />
            <path class="foglio-ombra" data-paper-shadow />
            <path class="foglio" data-sheet />
            <path class="foglio-grana" fill="url(#grain)" data-sheet-grain />
            <path class="foglio-bordo" data-sheet-edge />
            <g data-rings></g>
            <g filter="url(#ink-rough)" mask="url(#ink-mask)" data-print-holder>
              <g id="print-dry" class="stampa" data-print-dry></g>
              <g class="stampa-bagnata" data-print-wet></g>
              <g class="stampa" data-specks></g>
            </g>
            <g mask="url(#print-alpha)"><path fill="url(#gloss-grad)" data-gloss /></g>
          </g>
        </g>

        <!-- the ink pad: a tin with its lid open and the felt soaked in ink -->
        <g data-pad-place>
          <g data-pad></g>
        </g>

        <!-- the stamp and its shadow; the point in the middle of the rubber's bottom edge is 0 0 -->
        <g data-stamp-all>
          <rect class="timbro-ombra" filter="url(#soft)" data-stamp-shadow />
          <g data-stamp-place>
            <!-- the face of the rubber, with the logo the wrong way round: seen only when the stamp tips it towards us -->
            <g data-face></g>
            <g data-rubber></g>
            <g data-upper>
              <g data-block></g>
              <!-- the turned wooden handle: drawn once, standing on the top of the block -->
              <g data-handle-place>
                <g data-handle>
                  <ellipse class="appoggio" cx="0" cy="1" rx="62" ry="9" />
                  <path class="manico" d="M-54 0L54 0L54 -10C54 -13 51 -14 46 -15C34 -17 26 -24 24 -34C21 -50 18 -66 19 -84C24 -86 28 -88 28 -91L28 -98C28 -101 24 -103 22 -106C36 -112 48 -126 48 -146C48 -170 26 -188 0 -188C-26 -188 -48 -170 -48 -146C-48 -126 -36 -112 -22 -106C-24 -103 -28 -101 -28 -98L-28 -91C-28 -88 -24 -86 -19 -84C-18 -66 -21 -50 -24 -34C-26 -24 -34 -17 -46 -15C-51 -14 -54 -13 -54 -10Z" />
                  <g clip-path="url(#handle-clip)">
                    <path class="manico-ombra" d="M24 6C36 -18 28 -52 15 -84C30 -100 42 -122 32 -152C27 -168 20 -180 8 -194L80 -194L80 6Z" />
                    <path class="manico-vena" d="M-6 -118C-13 -138 -11 -160 2 -180M10 -120C8 -140 14 -160 22 -176M-28 -136C-34 -152 -30 -166 -20 -178M-6 -40C-8 -56 -7 -70 -5 -82M6 -38C4 -54 6 -68 8 -80" />
                    <path class="manico-riga" d="M-56 -10Q0 -3 56 -10M-30 -91Q0 -86 30 -91M-30 -98Q0 -93 30 -98M-23 -106Q0 -102 23 -106" />
                    <path class="manico-lucido" d="M-36 -146C-36 -162 -27 -174 -13 -179M-15 -42C-14 -56 -13 -68 -13 -80M-46 -5L-26 -5M-22 -94L-12 -94" />
                    <ellipse class="manico-riflesso" cx="-22" cy="-160" rx="7" ry="11" transform="rotate(28 -22 -160)" />
                  </g>
                  <path class="manico-bordo" d="M-54 0L54 0L54 -10C54 -13 51 -14 46 -15C34 -17 26 -24 24 -34C21 -50 18 -66 19 -84C24 -86 28 -88 28 -91L28 -98C28 -101 24 -103 22 -106C36 -112 48 -126 48 -146C48 -170 26 -188 0 -188C-26 -188 -48 -170 -48 -146C-48 -126 -36 -112 -22 -106C-24 -103 -28 -101 -28 -98L-28 -91C-28 -88 -24 -86 -19 -84C-18 -66 -21 -50 -24 -34C-26 -24 -34 -17 -46 -15C-51 -14 -54 -13 -54 -10Z" />
                </g>
              </g>
              <!-- its face on the front of the block: cheeks, eyes with lids, brows, a mouth -->
              <g data-eyes-place>
                <g data-eyes>
                  <ellipse class="guancia" cx="-52" cy="17" rx="10" ry="6" data-cheek />
                  <ellipse class="guancia" cx="52" cy="17" rx="10" ry="6" data-cheek />
                  <ellipse class="occhio" cx="-26" cy="0" rx="14" ry="16" />
                  <ellipse class="occhio" cx="26" cy="0" rx="14" ry="16" />
                  <g data-pupils>
                    <circle class="iride" cx="-26" cy="2" r="9" />
                    <circle class="pupilla" cx="-26" cy="2" r="5" />
                    <circle class="riflesso" cx="-29.5" cy="-1.6" r="2.6" />
                    <circle class="iride" cx="26" cy="2" r="9" />
                    <circle class="pupilla" cx="26" cy="2" r="5" />
                    <circle class="riflesso" cx="22.5" cy="-1.6" r="2.6" />
                  </g>
                  <g data-lids>
                    <ellipse class="palpebra" cx="-26" cy="0" rx="15.4" ry="17.4" />
                    <ellipse class="palpebra" cx="26" cy="0" rx="15.4" ry="17.4" />
                  </g>
                  <path class="ciglio" d="M-41 -25Q-27 -32 -12 -26" data-brow-l />
                  <path class="ciglio" d="M12 -26Q27 -32 41 -25" data-brow-r />
                  <path class="bocca" d="M-10 22Q0 31 10 22" data-smile />
                  <ellipse class="bocca-aperta" cx="0" cy="26" rx="5.5" ry="6.5" data-oh />
                </g>
              </g>
            </g>
          </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.

39 valori da cambiare

Apri il Playground

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 stampato dal timbro» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una scrivania color sabbia scivola da sinistra un foglio di carta con la grana e si posa con un piccolo fremito; da destra arriva un tampone d’inchiostro, una scatoletta di latta col coperchio aperto e il feltro blu. Dall’alto scende un grande timbro di legno, con il manico tornito e lucido, le venature e un nodo nel blocco e una faccina sul davanti: scende inclinato e mostra la gomma rossa, dove il logo di un marchio inventato, Pressly, è scritto al contrario. Guarda il tampone, sbatte gli occhi e ci si intinge una o due volte, dondolando: il feltro si schiaccia, resta il segno bagnato e saltano gocce d’inchiostro. Si alza, si inclina per controllare la gomma ora blu, il tampone se ne va, e lui carica in alto aggrottando le sopracciglia e tremando per lo sforzo. Poi il colpo: il timbro si schiaccia, il foglio si incurva e vibra, un’onda d’urto corre sulla carta, ai bordi schizzano strisce e gocce d’inchiostro e tutta la scena trema. Il timbro ci si appoggia ancora un attimo, poi si stacca con un leggero risucchio (si allunga, il foglio si solleva un poco e ricade) e sotto c’è il logo, stampato con i bordi irregolari, zone più cariche e più chiare e qualche puntino dove la gomma non ha toccato. Un luccichio di inchiostro fresco ci passa sopra e il blu, asciugando, si schiarisce. Il timbro fa un inchino contento e vola via. Il logo resta lì, col foglio che respira appena e un luccichio ogni tanto; dopo qualche secondo il foglio scivola via a destra e arriva un foglio nuovo, con una stampa ogni volta un po’ diversa. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine: viene incisa sulla gomma e stampata in tinta d’inchiostro, oppure con i suoi colori e la stessa grana.

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: la gomma è larga quanto il logo più un margine, il blocco è alto quanto il logo più mezza lettera (così, schiacciato, lo copre ancora), il foglio un po’ più largo, il tampone sotto il foglio. La grandezza si sceglie perché ci stiano il timbro sospeso sopra la stampa e il tampone sotto; su uno schermo alto il foglio diventa verticale.

La grana dell’inchiostro

La stampa è un gruppo con un filtro e una maschera. Il filtro sposta i bordi con un feDisplacementMap guidato da un feTurbulence fine (e, con tanto inchiostro, li allarga con feMorphology). La maschera è un rettangolo bianco con un filtro di rumore: un feTurbulence largo, portato con feColorMatrix fra il grigio e il bianco, dà le zone più cariche e più chiare; uno fitto e sogliato dà i puntini dove la gomma non ha toccato; feComposite arithmetic li moltiplica. Ogni foglio ha semi nuovi, quindi ogni stampa è diversa. Sopra c’è una copia più scura, l’inchiostro bagnato, che sparisce piano: è l’asciugatura.

Il timbro

Il manico tornito è disegnato una volta nella pagina, con l’ombra, le venature, gli anelli e i riflessi ritagliati dentro la sua sagoma; il blocco, la gomma e il tampone li costruisce lo script, perché dipendono dalla lunghezza del logo. Posizione, altezza da terra, inclinazione, schiacciamento e quanto il timbro è girato verso di noi stanno in un oggetto solo, scritto come attributo transform: l’origine è il centro del bordo della gomma, quindi lo squash parte da lì. Quando si inclina, la parte alta si accorcia e sotto compare la faccia della gomma, un trapezio col logo specchiato con scale(-1 1). Il manico ondeggia con skewX intorno alla base, così non si stacca mai dal blocco.

Il colpo

Il timbro cade con power4.in, si schiaccia per cinque centesimi di secondo e torna con elastic.out. Nello stesso istante compare la stampa (nascosta sotto il blocco), il foglio si schiaccia, la sua sagoma (un tracciato con quattro curve quadratiche) si piega e vibra con una serie di curvature che si smorzano, due rettangoli arrotondati si allargano come onda d’urto e gli schizzi partono dai bordi della gomma verso l’esterno, fermati dentro il foglio. Il risucchio è il contrario: il timbro si allunga restando attaccato, il foglio si piega all’insù, poi tutto si stacca con power3.out.

La regia e il tuo logo

Tutta l’entrata è una timeline sola, con le etichette start, arrive, ink, load, press, lift, reveal, bow, fly, rest e timeScale per la velocità. Nel riposo il foglio respira e un luccichio passa sulla stampa, mostrato solo sulle lettere da una maschera alfa con un use della stampa. Se IMAGE ha un indirizzo, il logo diventa quell’immagine: un filtro trasforma le parti scure e colorate in inchiostro e lascia carta le chiare e lo sfondo trasparente, e lo stesso filtro, color gomma, la incide sulla faccia del timbro. 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	`'Pressly'`	Il logo scritto: è inciso al contrario sulla gomma e stampato sul foglio.
`IMAGE`	script.js	`''`	Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola.
`INK`	script.js	`1`	Quanto inchiostro: 0.4 dà una stampa secca e a chiazze, 1.5 una stampa piena che sbava un poco.
`PRESS`	script.js	`1`	La forza del colpo: quanto il timbro si schiaccia e quanto trema la scena, si piega il foglio e corre l’onda d’urto.
`SPLATTER`	script.js	`1`	Quanti schizzi d’inchiostro escono dai bordi e quanto lontano arrivano (0 = una stampa pulita).
`TINT`	script.js	`true`	Un’immagine si stampa nel colore dell’inchiostro; con false resta coi suoi colori, con la grana dell’inchiostro.
`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 si stampa un foglio nuovo. Con false il logo resta, col foglio che respira e il luccichio.

Provali nel Playground

Quando usarla

Per presentare un logo con un gesto che sa di carta e di ufficio: l’apertura del sito di una tipografia, di uno studio grafico, di un negozio di cancelleria o di un marchio artigianale, l’anteprima 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 il foglio è verticale, come una lettera, e il logo è largo quasi quanto lo schermo. Un tocco la fa ripartire.

Con il movimento ridotto

Niente si muove: il foglio e il tampone compaiono in dissolvenza, poi il timbro sul tampone; timbro e tampone svaniscono e al loro posto compare il logo stampato. Se l’animazione ricomincia, anche il foglio se ne va in dissolvenza.

Trappole

Il manico, ruotato intorno alla base per farlo ondeggiare, si staccava dal blocco da un lato: con skewX la base resta piatta e appoggiata e si sposta solo la cima.
La faccia della gomma, schiacciata a zero quando il timbro è dritto, lasciava comunque il suo contorno (vector-effect non-scaling-stroke) come una riga più larga del timbro: si nasconde quando l’inclinazione è quasi zero.
Il blocco deve coprire il logo anche quando il timbro si schiaccia, altrimenti la stampa si vede spuntare prima che il timbro si alzi: è alto quanto il logo più mezza lettera e lo schiacciamento ha un limite.
L’ombra del timbro, lontano in alto, restava come una macchiolina sfocata sul bordo dello schermo dopo il volo: la sua opacità arriva a zero, non a un minimo.
Un’immagine con lo sfondo trasparente e i dettagli bianchi, colorata solo con l’alfa, diventava una sagoma piena: il filtro moltiplica l’alfa per quanto è scuro o colorato il pixel, così i bianchi restano carta.
Il numero di tocchi nel tampone e il lato da cui arriva il timbro cambiano a ogni giro, e con loro i tempi: la prima stampa è sempre uguale (due tocchi, da destra), così il fotogramma del poster cade sempre sul timbro appena alzato.

Librerie

GSAP 3.15.0, Familjen Grotesk (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 17 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.