Il marchio da ritagliare

Intro, TransizioniGSAPImpegnativaPeso compresso: Demo 13 KBGSAP 28 KBGratisScarica lo zip

L’intro di un logo per una sartoria: lo schermo è coperto da due pezzi di lana con una linea di gesso in mezzo. Le lettere cadono dal centro, le forbici tagliano lungo la linea, un contatore sale di cinque in cinque, i bottoni rotolano; poi il taglio si apre e i due pezzi si ritirano verso i bordi, e sotto c’è la pagina. 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 logo cut along the line</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/400-italic.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena" data-scene>
    <!-- the page of the tailor's shop: it waits under the cloth and comes in line by line once the cloth is cut -->
    <div class="pagina" data-page>
      <header class="testa riga" data-line>
        <span>Made to measure</span>
        <nav aria-label="Main"><a href="#fittings">Fittings</a><a href="#cloth">Cloth</a><a href="#visit">Visit</a></nav>
      </header>
      <div class="eroe">
        <h1 class="marchio riga" data-line data-page-logo>Bias Cut</h1>
        <!-- the seam under the logo: the stitches run in behind a little needle -->
        <svg class="cucitura riga" data-line data-seam aria-hidden="true">
          <defs><clipPath id="seam-clip"><rect data-seam-clip /></clipPath></defs>
          <path class="cucitura-punti" clip-path="url(#seam-clip)" data-seam-stitches />
          <g data-needle>
            <path class="ago" d="M-26 -1.6L2 -0.6Q5 0 2 0.6L-26 1.6Q-29 0 -26 -1.6Z" />
            <ellipse class="ago-cruna" cx="-22" cy="0" rx="2.6" ry="0.7" />
          </g>
        </svg>
        <p class="motto riga" data-line><em>Suits cut by hand,</em></p>
        <p class="motto riga" data-line><em>made to your measure.</em></p>
        <p class="orari riga" data-line>Fittings by appointment</p>
        <p class="riga" data-line>
          <a class="bottone" href="#fittings">
            <span class="bottone__fondo"></span>
            <span class="bottone__testo">Book a fitting</span>
            <svg class="bottone__freccia" viewBox="0 0 20 12" aria-hidden="true"><path d="M1 6H18M13 1.5L18 6L13 10.5" /></svg>
          </a>
        </p>
      </div>
      <p class="nota">Click or tap to see it again</p>
    </div>

    <!-- the cloth: two pieces of a sewing pattern with a chalk line between them. The script draws their cut edges every frame -->
    <svg class="palco" data-stage aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- the twill of the wool: fine diagonal ribs -->
        <pattern id="twill" patternUnits="userSpaceOnUse" width="7" height="7" patternTransform="rotate(-38)">
          <rect class="trama-fondo" width="7" height="7" />
          <path class="trama" d="M0 1.6H7M0 5.1H7" />
        </pattern>
        <clipPath id="clip-top"><path data-clip-top /></clipPath>
        <clipPath id="clip-bottom"><path data-clip-bottom /></clipPath>
        <clipPath id="clip-count"><rect data-clip-count /></clipPath>
        <!-- the shade a lifting piece of cloth throws on the page -->
        <linearGradient id="shade-down" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" class="ombra" stop-opacity="0.32" />
          <stop offset="1" class="ombra" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="shade-up" x1="0" y1="1" x2="0" y2="0">
          <stop offset="0" class="ombra" stop-opacity="0.32" />
          <stop offset="1" class="ombra" stop-opacity="0" />
        </linearGradient>
        <!-- a picture logo, written in chalk: its dark and coloured parts become chalk, its light parts stay cloth -->
        <filter id="chalk" color-interpolation-filters="sRGB">
          <feColorMatrix type="matrix" data-chalk-matrix values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  -0.48 -0.94 -0.18 0 1.6" />
          <feComposite in2="SourceAlpha" operator="in" />
        </filter>
      </defs>

      <rect fill="url(#shade-down)" data-shade-top />
      <rect fill="url(#shade-up)" data-shade-bottom />

      <!-- the upper piece: the logo, the counter and the cutting note -->
      <g clip-path="url(#clip-top)">
        <rect class="stoffa" data-cloth-top />
        <rect fill="url(#twill)" data-twill-top />
        <g data-top></g>
      </g>
      <!-- the lower piece: the grainline and the buttons -->
      <g clip-path="url(#clip-bottom)">
        <rect class="stoffa" data-cloth-bottom />
        <rect fill="url(#twill)" data-twill-bottom />
        <g data-bottom></g>
      </g>
      <path class="cimosa" data-edge-top />
      <path class="cimosa" data-edge-bottom />

      <!-- the chalk line: dashed ahead of the shears, a clean cut behind them -->
      <g data-line-all>
        <path class="linea-tratteggio" data-dash />
        <path class="linea-taglio" data-cut />
      </g>

      <!-- the tailor's shears; the pivot screw is 0 0, the blades point right -->
      <g data-shears>
        <g data-blade-b>
          <g transform="scale(1 -1)">
            <path class="anello-bordo" d="M-3 2C-10 6 -17 10 -24 14" />
            <ellipse class="anello-bordo" cx="-34" cy="18" rx="11" ry="7.5" transform="rotate(-24 -34 18)" />
            <path class="anello" d="M-3 2C-10 6 -17 10 -24 14" />
            <ellipse class="anello" cx="-34" cy="18" rx="11" ry="7.5" transform="rotate(-24 -34 18)" />
            <path class="lama" d="M-6 0.8L62 0.8Q66.5 0.4 64 -1.2C48 -4.6 22 -9 2 -9.5C-5 -9.5 -9 -4 -6 0.8Z" />
            <path class="lama-filo" d="M4 -0.6L59 -0.6" />
          </g>
        </g>
        <g data-blade-a>
          <path class="anello-bordo" d="M-3 2C-10 6 -17 10 -24 14" />
          <ellipse class="anello-bordo" cx="-34" cy="18" rx="11" ry="7.5" transform="rotate(-24 -34 18)" />
          <path class="anello" d="M-3 2C-10 6 -17 10 -24 14" />
          <ellipse class="anello" cx="-34" cy="18" rx="11" ry="7.5" transform="rotate(-24 -34 18)" />
          <path class="lama" d="M-6 0.8L62 0.8Q66.5 0.4 64 -1.2C48 -4.6 22 -9 2 -9.5C-5 -9.5 -9 -4 -6 0.8Z" />
          <path class="lama-lume" d="M6 -6.4C24 -6.6 44 -4.4 58 -1.8" />
        </g>
        <circle class="vite" r="3.4" />
        <circle class="vite-lume" cx="-0.9" cy="-0.9" r="1.1" />
      </g>
    </svg>
  </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.

35 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 marchio da ritagliare» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Lo schermo è coperto da due pezzi di lana blu notte con la trama diagonale, come i pezzi di un cartamodello: sopra c’è scritto «Front panel», sotto «Back panel», e fra i due corre una linea tratteggiata di gesso con la scritta «Cut on the chalk line» e tre frecce. Sulla linea spuntano un paio di forbici da sarto, con i manici rossi, e fanno due tagli a vuoto. Dall’alto cadono le lettere del marchio di una sartoria inventata, Bias Cut: arrivano prima quelle del centro, un po’ storte, e si raddrizzano mentre si posano. Intanto le forbici corrono lungo la linea aprendo e chiudendo le lame e dietro di loro il tratteggio diventa un taglio netto; le frecce si accendono una dopo l’altra; a sinistra un contatore a rulli sale fino a 100 centimetri di cinque in cinque, come un piccolo contachilometri; sul pezzo di sotto si disegna il drittofilo, la freccia del verso della stoffa, e da sinistra arrivano rotolando cinque bottoni, dal rombo al tondo, che si mettono in fila. Finito il taglio, la fessura si apre con una molla e mostra i denti a zigzag delle forbici dentellate, i bottoni ripartono rotolando verso destra e i due pezzi si ritirano verso i bordi: quello di sopra, il 60% dello schermo, sale, quello di sotto, il 40%, scende, piano all’inizio e poi sempre più veloci, come stoffa tirata via dal tavolo, con un’ombra morbida sulla pagina. Sotto c’è la pagina della sartoria, color carta: entra riga per riga uscendo da una sfocatura, col marchio in rosso, e un ago cuce sotto il marchio una cucitura a punti. Dopo qualche secondo la pagina svanisce, i due pezzi tornano a chiudersi sulla linea con un piccolo rimbalzo e tutto ricomincia. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine: sulla stoffa diventa gesso, sulla pagina resta coi suoi colori.

Come funziona

Una sola misura

Il palco è un SVG con il viewBox grande quanto la finestra, così un’unità è un pixel, e sotto c’è la pagina vera, in HTML. La linea taglia lo schermo al 60% dell’altezza (TOP): il logo si misura su una canvas con lo stesso carattere (measureText, actualBoundingBoxAscent per l’altezza vera) e prende la grandezza più grande che sta nella larghezza e nello spazio fra le scritte del pezzo di sopra. Le scritte, le forbici, i bottoni e i denti del bordo si contano sul lato corto della finestra, con un minimo e un massimo, così al telefono restano leggibili e sul monitor grande non diventano enormi.

Due pezzi disegnati a ogni fotogramma

Ogni pezzo di stoffa è un tracciato ricostruito a ogni fotogramma da due numeri: quanto si è ritirato e quanto si è aperto il taglio. Il bordo tagliato è uno zigzag: i denti del pezzo di sopra cadono esattamente nei vuoti di quello di sotto, così da chiusi non si vede niente. Lo stesso tracciato fa da clipPath al contenuto del pezzo (logo, contatore, scritte, bottoni), che quindi viene tagliato via mentre la stoffa si ritira. Sotto ogni bordo un rettangolo con un gradiente fa l’ombra sulla pagina, più forte quando i pezzi sono vicini e spenta quando sono usciti.

Le forbici e il contatore

Le forbici sono due metà uguali (lama e anello) che girano sulla vite: una è la copia dell’altra capovolta con scale(1 -1), e lo script le apre di ±SNIP/2 gradi. Corrono dal 7% della larghezza a fuori schermo in 3 secondi con power1.inOut, cioè inOutQuad, e la linea piena va dal 9% al 102,5% con lo stesso avanzamento; nove tagli con yoyo le aprono e chiudono per strada. Il contatore sono tre strisce di cifre dentro una finestra ritagliata: le unità scorrono sempre (STEP alla volta), le decine e le centinaia girano solo quando le unità passano il loro ultimo passo, come in un contachilometri. Un oggetto va da 0 a 100 in 3 secondi con power2.inOut e le strisce lo seguono.

La regia

Tutta l’entrata è una timeline sola, con le etichette start, fall, cut, open, reveal, rest e close e timeScale per la velocità. Le lettere cadono in 2 secondi con power1.out e stagger 0,05 dal centro; i bottoni arrivano da −80% della larghezza in 2,8, 2,7, 2,6… secondi con power2.inOut (inOutCubic) e girano di tanto quanto viaggiano diviso il raggio, quindi rotolano davvero. Finito il taglio la fessura si apre con elastic.out, i bottoni ripartono, e dopo 0,15 secondi i pezzi si ritirano in 1,5 secondi con la curva cubic-bezier(0.55, 0.055, 0.675, 0.19): GSAP non la ha fra le sue, quindi lo script la calcola da sé (Newton e, se serve, bisezione) e la passa come funzione.

La pagina e il tuo logo

La pagina sotto è HTML normale: ogni riga passa da opacità 0, sfocatura di 10 pixel e 15 pixel più in basso a nitida in 0,6 secondi con stagger 0,1, poi il filtro si toglie del tutto. La cucitura è un tracciato tratteggiato scoperto da un clipPath che si allarga, e l’ago ne segue la punta salendo e scendendo a ogni punto. Se IMAGE ha un indirizzo, il logo diventa quell’immagine: sulla stoffa un filtro con feColorMatrix la trasforma in gesso (le parti scure e colorate diventano gesso, le chiare e lo sfondo trasparente restano stoffa), sulla pagina resta com’è. 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	`'BIAS CUT'`	Il logo scritto: ogni lettera cade per conto suo, prima quelle del centro. È anche il marchio della pagina sotto.
`IMAGE`	script.js	`''`	Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola: in gesso sulla stoffa, coi suoi colori sulla pagina.
`TOP`	script.js	`0.6`	Dove corre la linea: quanta parte dello schermo prende il pezzo di sopra (0.6 = 60%); quello di sotto prende il resto.
`STEP`	script.js	`5`	Di quanto sale il contatore a ogni scatto dei rulli: 1, 2, 5 o 10.
`BUTTONS`	script.js	`5`	Quanti bottoni arrivano rotolando sul pezzo di sotto: ognuno ha un lato in più, l’ultimo è tondo (0 = nessuno).
`SNIP`	script.js	`28`	Quanto si aprono le forbici a ogni taglio, in gradi (0 = restano chiuse e scivolano).
`SPEED`	script.js	`1`	La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà.
`REST`	script.js	`4`	Quanti secondi la pagina resta in mostra prima che la stoffa torni a coprirla.
`LOOP`	script.js	`true`	Se la stoffa torna a coprire la pagina e tutto ricomincia. Con false la pagina resta scoperta.

Provali nel Playground

Quando usarla

Per il caricamento o l’apertura di un sito che lavora con le mani e con la stoffa: una sartoria, un negozio di tessuti, un marchio di abiti, una merceria, una scuola di cucito; oppure per presentare un logo a un cliente o in un post. Il taglio che si apre è anche una transizione fra una copertina e la pagina vera, buona per qualsiasi sito che vuole un’entrata decisa. Funziona con un marchio scritto e con un’immagine.

Sul telefono

La stessa animazione con le misure adattate: il logo è largo quasi quanto lo schermo, le scritte, le forbici e i bottoni hanno una grandezza minima per restare leggibili, e i denti del bordo si stringono. Un tocco la fa ripartire.

Con il movimento ridotto

Niente si muove: la stoffa si vede già tagliata, col logo al suo posto, il contatore a 100 e i bottoni in fila; poi svanisce in dissolvenza e al suo posto compare la pagina, anche lei senza spostamenti. Se l’animazione ricomincia, la pagina svanisce e la stoffa torna in dissolvenza.

Trappole

Con il pezzo di sopra ritirato del tutto, le punte dei denti a zigzag restavano a sbucare per un pixel in cima allo schermo come una fila di puntini: alla fine della corsa i pezzi vanno un poco oltre il bordo, di due denti.
L’opacità della scritta «CM» accanto al contatore, data come attributo, non spariva: la classe CSS le dava già un’opacità, e il CSS vince sull’attributo di presentazione. Per gli elementi con un’opacità nel CSS si cambia style.opacity.
Nella fessura stretta le due ombre, una per bordo, si sommavano e la riempivano di grigio piatto: l’ombra parte più leggera e prende forza solo quando i pezzi si allontanano davvero.
La curva con cui la stoffa si stacca, cubic-bezier(0.55, 0.055, 0.675, 0.19), non è fra quelle di GSAP e CustomEase è un file in più: una funzione di venti righe la calcola e GSAP accetta direttamente una funzione come ease.
Un contatore con le tre strisce che scorrono insieme fa vedere le centinaia a metà quando il numero è 50: le decine e le centinaia girano solo quando le unità passano il loro ultimo passo, come in un contachilometri.
Finita la sfocatura, filter: blur(0px) resta sulla riga, la tiene su un livello a parte e in qualche browser lascia il testo un poco morbido: alla fine dell’entrata il filtro si toglie con filter: none.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0, Geist Mono (font variabile) 5.3.0, Instrument Serif 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.