Il logo tagliato al laser

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

L’intro di un logo in officina: una testa laser corre sulle guide e taglia le lettere in una lastra di acciaio spazzolato, col taglio rovente che si raffredda, scintille che rimbalzano e un filo di fumo; poi le lettere si staccano con uno scatto, si sollevano e si girano mostrando il bordo lucido. 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 laser-cut logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script traces the logo, builds the plate, the machine and the pieces, and cuts them out -->
    <svg class="palco" data-stage role="img" aria-label="Kerfly" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- brushed steel: a soft light across the plate, and a tile of fine streaks the script paints on a canvas -->
        <linearGradient id="steel" gradientUnits="userSpaceOnUse" data-steel>
          <stop offset="0" class="acciaio acciaio--medio" />
          <stop offset="0.32" class="acciaio acciaio--chiaro" />
          <stop offset="0.56" class="acciaio acciaio--scuro" />
          <stop offset="0.8" class="acciaio acciaio--chiaro" />
          <stop offset="1" class="acciaio acciaio--medio" />
        </linearGradient>
        <linearGradient id="steel-back" gradientUnits="userSpaceOnUse" data-steel-back>
          <stop offset="0" class="acciaio acciaio--retro-scuro" />
          <stop offset="0.5" class="acciaio acciaio--retro" />
          <stop offset="1" class="acciaio acciaio--retro-scuro" />
        </linearGradient>
        <linearGradient id="wall" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" class="parete-stop parete-stop--alta" />
          <stop offset="1" class="parete-stop" />
        </linearGradient>
        <pattern id="brush" patternUnits="userSpaceOnUse" width="320" height="90">
          <image width="320" height="90" data-brush-image />
        </pattern>
        <!-- the glint that slides over the pieces at rest -->
        <linearGradient id="sheen" gradientUnits="userSpaceOnUse" data-sheen>
          <stop offset="0" class="lampo lampo--via" />
          <stop offset="0.5" class="lampo" />
          <stop offset="1" class="lampo lampo--via" />
        </linearGradient>
        <!-- the light of the beam on the metal, and a puff of smoke -->
        <radialGradient id="hotspot">
          <stop offset="0" class="caldo caldo--bianco" />
          <stop offset="0.16" class="caldo caldo--giallo" />
          <stop offset="0.42" class="caldo caldo--arancio" />
          <stop offset="1" class="caldo caldo--via" />
        </radialGradient>
        <radialGradient id="puff">
          <stop offset="0" class="fumo-stop" />
          <stop offset="0.55" class="fumo-stop fumo-stop--meta" />
          <stop offset="1" class="fumo-stop fumo-stop--via" />
        </radialGradient>
        <filter id="soft" x="-30%" y="-30%" width="160%" height="160%">
          <feGaussianBlur stdDeviation="4" data-soft-blur />
        </filter>
        <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="3" data-glow-blur />
        </filter>
      </defs>

      <g data-world>
        <!-- the bed of the machine: dark slats under the plate, seen through the holes once the letters are out -->
        <g data-bed></g>

        <!-- the plate: its cut walls (a copy pushed down by its thickness), the holed plate, the heat tint -->
        <g data-plate>
          <path class="parete" fill-rule="evenodd" data-wall />
          <path fill="url(#steel)" fill-rule="evenodd" data-plate-base />
          <path class="spazzolato" fill="url(#brush)" fill-rule="evenodd" data-plate-brush />
          <path class="bordo-lastra" fill-rule="evenodd" data-plate-edge />
          <g class="alone" data-tint></g>
        </g>
        <g class="ombre" filter="url(#soft)" data-shadows></g>
        <g data-pieces></g>
        <!-- the whole plate, before the cut: it hides the pieces until they drop -->
        <g data-cover>
          <path fill="url(#steel)" data-cover-base />
          <path class="spazzolato" fill="url(#brush)" data-cover-brush />
          <path class="bordo-lastra" data-cover-edge />
        </g>
        <!-- the cut: the glow, the hot line, the line cooling to red, the cold kerf -->
        <g data-kerf>
          <g class="taglio-alone" filter="url(#glow)" data-kerf-glow></g>
          <g class="taglio-freddo" data-kerf-cool></g>
          <g class="taglio-tiepido" data-kerf-warm></g>
          <g class="taglio-caldo" data-kerf-hot></g>
        </g>
        <ellipse fill="url(#hotspot)" data-hotspot />
        <g class="scintille" data-sparks></g>

        <!-- the machine: two rails, the bridge that rides on them, the head that rides on the bridge -->
        <g data-rails></g>
        <g data-bridge></g>
        <g data-head></g>

        <g data-smoke></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.

47 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 tagliato al laser» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo scuro d’officina c’è il piano di una macchina da taglio laser, con le stecche e due guide ai lati. Da sinistra scivola una lastra di acciaio spazzolato, si posa con un piccolo dondolio e un colpo sordo; dall’alto scende il ponte giallo con la testa, rimbalza sulle molle e la testa ondeggia prima di fermarsi. Poi il taglio: il ponte corre sulle guide, la testa corre sul ponte e l’ugello di rame segue il contorno di ogni lettera di un marchio inventato, Kerfly. A ogni lettera il raggio prima buca la lastra con una raffica di scintille, poi gira tutto intorno: dietro l’ugello il taglio è bianco e arancio, rovente, poi diventa rosso scuro e infine una riga fredda e scura. Le scintille sono piccole strisce che saltano in alto, ricadono sulla lastra e rimbalzano perdendo forza, dal giallo all’arancio al rosso; un filo di fumo sale e si allarga. Come in una macchina vera, i buchi interni (l’occhiello della e) si tagliano prima del contorno. Finito il taglio il ponte esce in alto, le lettere scendono di un pelo dentro la lastra e si vede la fessura tutto intorno; poi, una dopo l’altra, si staccano con uno scatto, si sollevano, fanno un giro intero mostrando lo spessore e il bordo lucido, che manda lampi mentre girano, e restano sospese sopra la lastra, un po’ inclinate verso di noi, con l’ombra sotto. La lastra resta col logo vuoto: dai buchi si vedono le pareti del taglio e le stecche del piano, con un alone bruno di calore intorno. Le lettere galleggiano ondeggiando ognuna per conto suo e un riflesso ci passa sopra ogni tanto; dopo qualche secondo la lastra esce a destra con le lettere e ne arriva una nuova, con scintille e fumo un po’ diversi. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine: le sue parti scure o colorate vengono tagliate allo stesso modo.

Come funziona

Il contorno, preso da una canvas

Per tagliare serve il contorno delle lettere, che un elemento text non dà. Così il logo si disegna su una canvas nascosta (la parola col suo carattere, o l’immagine), ogni pixel diventa un valore da 0 a 1 e l’algoritmo marching squares segue la linea dove il valore passa per 0,5: il punto si interpola dentro il pixel, quindi il contorno è morbido anche da un’immagine piccola. Ne escono anelli chiusi, sfoltiti con Ramer-Douglas-Peucker. Un anello dentro un numero dispari di altri è un buco: va al pezzo che lo contiene, e ogni pezzo è un path con fill-rule evenodd.

Il taglio che si raffredda

Ogni anello ha quattro tratti uguali: un alone sfocato, il tratto rovente, quello rosso e quello freddo. Ognuno mostra un pezzo diverso del contorno con stroke-dasharray (lunghezza del pezzo, poi un vuoto più lungo dell’anello) e stroke-dashoffset (dove comincia). Il rovente va da dove era l’ugello 0,22 secondi fa a dove è adesso, il rosso da 0,8 secondi fa a 0,22, il freddo dall’inizio a 0,8: così il colore si raffredda col tempo, anche dopo che l’ugello è passato all’anello dopo. Prima si tagliano i buchi, poi il contorno, e ogni anello parte dal punto più vicino all’ugello.

Un orologio solo

Tutto il taglio è un orario calcolato una volta: spostamenti a raggio spento, foratura, giro del contorno, con la velocità scelta perché tutto stia nei secondi di CUT. La timeline muove un solo numero, l’orologio, e una funzione disegna il momento: la posizione dell’ugello, del ponte e della testa, i tratti del taglio, la luce sulla lastra. Anche scintille e fumo nascono una volta, con un generatore casuale col seme (il primo giro è sempre uguale, per il poster): ogni scintilla ha una nascita, una direzione e una velocità, e la sua altezza si calcola a mano coi rimbalzi. Si può fermare e riavvolgere la timeline in qualsiasi punto.

Lo spessore e il bordo lucido

La lastra con i buchi ha sotto una sua copia spostata in giù dello spessore: dentro i buchi diventa la parete del taglio, sotto il bordo il fianco della lastra. Fino al distacco sopra le lettere c’è la lastra intera, così non si vede nessuna giuntura. Un pezzo che si gira intorno al suo asse orizzontale è la faccia schiacciata in altezza dal coseno dell’angolo, con sotto una pila di copie spostate dello spessore per il seno: è il bordo. Ogni copia ha un grigio diverso che scorre con l’angolo, e mentre il pezzo gira il bordo manda lampi. Quando il coseno diventa negativo la pila cambia ordine e la faccia diventa il retro, più scuro.

La regia e il tuo logo

La timeline ha le etichette start, arrive, cut, drop, snap, lift, reveal, rest e leave, e timeScale per la velocità. Il distacco è un abbassamento di 12 centesimi di secondo, uno scatto in su con power4.out e la salita con back.out, mentre il giro dura di più con power2.inOut; i pezzi partono uno dopo l’altro da sinistra. A riposo l’ampiezza dell’ondeggiamento sale da zero e ogni pezzo ha la sua fase. Se IMAGE ha un indirizzo si taglia l’immagine: le parti scure o colorate diventano pezzi; un logo chiaro su fondo trasparente si taglia dalla sua sagoma. 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	`'Kerfly'`	Il logo scritto: ogni lettera viene tagliata dalla lastra.
`IMAGE`	script.js	`''`	Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola e si tagliano le sue parti scure o colorate.
`CUT`	script.js	`3.6`	Quanti secondi impiega il laser a tagliare tutto il logo.
`SPARKS`	script.js	`1`	Quante scintille saltano dal taglio: 0 nessuna, 2 una pioggia.
`THICK`	script.js	`1`	Lo spessore della lastra: quanto si vedono le pareti nei buchi e il bordo lucido delle lettere.
`FLIP`	script.js	`1`	Quanti giri fanno le lettere salendo (0 = si inclinano soltanto).
`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 la lastra esca.
`LOOP`	script.js	`true`	Se la lastra esce e se ne taglia una nuova. Con false le lettere restano sospese, ondeggiando, col riflesso.

Provali nel Playground

Quando usarla

Per presentare un logo con un gesto che sa di officina e di precisione: l’apertura del sito di un’azienda meccanica, di un laboratorio di taglio laser, di uno studio di design industriale o di un marchio di oggetti in metallo, 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 la lastra è più alta e stretta, le guide più sottili e le lettere salgono più in alto. Un tocco la fa ripartire.

Con il movimento ridotto

Niente si muove e non ci sono scintille né fumo: la lastra compare in dissolvenza, poi il taglio già freddo; la lastra intera svanisce e al suo posto compaiono i buchi e le lettere già sospese. Se l’animazione ricomincia, tutto se ne va in dissolvenza.

Trappole

Senza niente sopra, la lastra mostrava il logo prima ancora del taglio: l’alone di calore intorno ai buchi e il filo scuro sul bordo dei pezzi disegnano già tutte le lettere. Fino al distacco sopra i pezzi c’è la lastra intera, senza buchi, che poi sparisce.
Con tanti contorni (un nome lungo, un’immagine) i piccoli spostamenti fra un anello e l’altro, con la loro durata minima, sforavano il tempo di CUT: alla fine l’orario intero si stringe di nuovo dentro CUT. Anche le attese fra un pezzo e l’altro hanno un tetto, così l’entrata resta sotto i nove secondi.
Scintille e fumo simulati fotogramma per fotogramma sarebbero sbagliati riavvolgendo la timeline (e nel poster): nascono tutti una volta, col seme, e la loro posizione è una funzione del tempo, rimbalzi compresi.
Le scintille disegnate sopra la macchina sembravano sporco sulla testa: stanno sotto il ponte e la testa, e si vedono quelle che schizzano di lato e ricadono sulla lastra.
Un’immagine presa da un altro sito senza permesso CORS non si può leggere dalla canvas (getImageData dà errore): la si carica prima con crossOrigin e, se non va, si taglia come un rettangolo.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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