Il logo che si spiega da un origami

Intro, SVG, TransizioniGSAPImpegnativaPeso compresso: Demo 16 KBGSAP 28 KBGratisScarica lo zip

L’entrata di un logo tutta di carta: una gru origami arriva in volo battendo le ali, si posa e si spiega faccia dopo faccia fino a diventare un foglio quadrato, che si piega a fisarmonica in strisce; le strisce si girano una dopo l’altra e sul lato bianco compare il logo, steso piatto e pulito. 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 origami-unfolding logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/manrope@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script measures it, writes the logo in it and folds the paper -->
    <svg class="palco" data-stage role="img" aria-label="Wrenfold" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- the grain of the paper: a fine noise multiplied over everything made of paper -->
        <filter id="grain" x="-10%" y="-10%" width="120%" height="120%" color-interpolation-filters="sRGB">
          <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" seed="7" stitchTiles="stitch" result="noise" />
          <feColorMatrix in="noise" type="matrix" values="0.33 0.33 0.33 0 0  0.33 0.33 0.33 0 0  0.33 0.33 0.33 0 0  0 0 0 0 1" result="grey" />
          <feComponentTransfer in="grey" result="tone">
            <feFuncR type="linear" slope="0.26" intercept="0.84" />
            <feFuncG type="linear" slope="0.26" intercept="0.84" />
            <feFuncB type="linear" slope="0.26" intercept="0.84" />
          </feComponentTransfer>
          <feBlend in="SourceGraphic" in2="tone" mode="multiply" result="printed" />
          <feComposite in="printed" in2="SourceGraphic" operator="in" />
        </filter>
        <!-- the light that runs over the paper once the logo is flat -->
        <linearGradient id="shine-fill" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" class="lampo lampo--via" />
          <stop offset="0.5" class="lampo" />
          <stop offset="1" class="lampo lampo--via" />
        </linearGradient>
        <clipPath id="card-clip"><path data-card-clip /></clipPath>
        <!-- the logo, written once and shown on every strip and on the flat card -->
        <g id="logo-art" data-art></g>
        <g data-clips></g>
      </defs>

      <g data-world>
        <g data-ground>
          <ellipse class="ombra" data-crane-shadow />
          <ellipse class="ombra" data-paper-shadow />
        </g>
        <g data-fx-back></g>

        <g filter="url(#grain)" data-paper>
          <!-- the logo flat on its card: the corner that lifts in the wind and the light that runs over it -->
          <g data-card>
            <rect class="foglio-ombra" data-card-back />
            <path class="foglio" id="card-shape" data-card-shape />
            <use href="#logo-art" />
            <polygon class="angolo-ombra" data-flap-shade />
            <polygon class="angolo" data-flap />
            <!-- the clip sits on a group: on the moving band it would move with it -->
            <g clip-path="url(#card-clip)"><rect class="lampo-striscia" fill="url(#shine-fill)" data-shine /></g>
          </g>
          <g data-tiles></g>
          <g data-creases></g>
          <g data-mesh></g>

          <!-- the crane: drawn facing right, the point under its body is 0 0. Every face is a triangle with its own
               light, and the script reads them to unfold the paper -->
          <g data-crane-place>
            <g data-part="wing-far" data-wing-far>
              <polygon class="faccia faccia--lontana-scura" data-face points="-74,-178 -44,-56 -26,-60" />
              <polygon class="faccia faccia--lontana" data-face points="-74,-178 -26,-60 -6,-62" />
              <polygon class="faccia faccia--lontana-chiara" data-face points="-74,-178 -6,-62 14,-60" />
              <polygon class="ala-sotto" points="-74,-178 -44,-56 14,-60" data-under-far />
            </g>
            <g data-part="tail" data-tail>
              <polygon class="faccia faccia--scura" data-face points="-66,-42 -140,-130 -52,-49" />
              <polygon class="faccia faccia--chiara" data-face points="-52,-49 -140,-130 -38,-56" />
            </g>
            <g data-part="neck">
              <polygon class="faccia faccia--ombra" data-face points="38,-56 112,-138 52,-49" />
              <polygon class="faccia faccia--chiara" data-face points="52,-49 112,-138 66,-42" />
            </g>
            <g data-part="body">
              <polygon class="faccia faccia--ombra" data-face points="-66,-42 0,-40 0,0" />
              <polygon class="faccia faccia--media" data-face points="0,-40 66,-42 0,0" />
              <polygon class="faccia faccia--scura" data-face points="-66,-42 0,-64 0,-40" />
              <polygon class="faccia faccia--chiara" data-face points="0,-64 66,-42 0,-40" />
            </g>
            <!-- the head: it nods on the top of the neck; its eye has an iris, a glint and a lid that blinks -->
            <g data-part="head" data-head>
              <polygon class="faccia faccia--chiara" data-face points="112,-138 152,-110 124,-126" />
              <polygon class="faccia faccia--ombra" data-face points="124,-126 152,-110 104,-122" />
              <g data-eye>
                <ellipse class="guancia" cx="131" cy="-117.5" rx="4.2" ry="2.2" />
                <circle class="occhio" cx="118" cy="-127" r="4.2" />
                <g data-pupil>
                  <circle class="iride" cx="118.6" cy="-127" r="2.8" />
                  <circle class="pupilla" cx="118.9" cy="-127" r="1.5" />
                  <circle class="riflesso" cx="117.9" cy="-128.2" r="0.8" />
                </g>
                <ellipse class="palpebra" cx="118" cy="-127" rx="4.9" ry="4.9" data-lid />
              </g>
            </g>
            <!-- the near wing, in front of the body; underneath it is darker -->
            <g data-part="wing-near" data-wing-near>
              <polygon class="faccia faccia--scura" data-face points="-36,-198 -38,-54 -16,-58" />
              <polygon class="faccia faccia--media" data-face points="-36,-198 -16,-58 6,-60" />
              <polygon class="faccia faccia--chiara" data-face points="-36,-198 6,-60 28,-56" />
              <polygon class="ala-sotto" points="-36,-198 -38,-54 28,-56" data-under-near />
            </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.

27 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 che si spiega da un origami» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo color sabbia arriva da sinistra una gru di carta arancione, piegata come un origami vero: ogni faccia è un triangolo con la sua luce e la sua ombra, le pieghe hanno una linea scura e la carta ha una grana leggera. Vola battendo le ali piegate (sotto sono più scure), fa una piccola picchiata, plana con le ali aperte, alza il becco e frena con due colpi d’ala, poi si posa con uno schiacciamento e due sbuffi di polvere. Ci guarda, sbatte l’occhio, fa un inchino e chiude l’occhio. Allora comincia a spiegarsi: prima la testa, poi il collo e la coda, poi le ali e il corpo; ogni faccia gira lungo la sua piega come carta vera, si accorcia mentre si alza, cambia luce e, passato l’angolo retto, mostra per un attimo il lato bianco. Alla fine è un foglio quadrato in piedi, pieno di segni di pieghe. Il foglio si ripiega a fisarmonica in strisce, che fanno un saltello e si allargano fino alla misura del logo; poi si girano una dopo l’altra, dal retto arancione al lato bianco, dove è stampato il logo di un marchio inventato, Wrenfold. Le strisce si stendono, i segni delle pieghe svaniscono e resta il logo pulito, che fa un piccolo rimbalzo fra coriandoli di carta mentre un riflesso gli passa sopra. Fermo, ogni tanto un riflesso attraversa la carta e un soffio d’aria solleva un angolo, che si piega mostrando il retro colorato e ricade. Dopo qualche secondo il logo torna strisce, poi foglio, poi gru: la gru riapre l’occhio, si accuccia e vola via in alto a destra, e l’entrata ricomincia con un volo un po’ diverso. Un clic la fa ripartire da capo. Al posto della parola si può mettere un’immagine: finisce divisa sulle strisce come il logo scritto.

Come funziona

Il palco a misura

Il palco è un SVG con il viewBox grande quanto la finestra, così un’unità è un pixel. Il logo si misura su una canvas con lo stesso carattere (measureText, con actualBoundingBoxLeft e Right per l’inchiostro vero e non per l’avanzamento), e da lì vengono il cartoncino, la gru e il foglio: una sola grandezza per tutto. Su uno schermo alto il cartoncino prende quasi tutta la larghezza e la gru è un po’ più grande; con un nome lungo la gru tiene comunque una misura minima.

La gru

La gru è disegnata una volta sola nella pagina: sedici triangoli, ognuno con la sua classe di luce (chiara, media, in ombra, scura), il contorno scuro su ogni piega, l’occhio con iride, riflesso e palpebra. Posizione, grandezza, inclinazione e schiacciamento vanno in un oggetto scritto come attributo transform; le ali si piegano sulla linea della spalla con scale(1, f), e quando f scende sotto zero un triangolo scuro sopra l’ala mostra il lato di sotto. Testa e coda girano sulla loro articolazione, calcolata con getBBox. Il volo è un percorso con una picchiata che si spegne all’arrivo, e l’inclinazione viene dalla sua pendenza.

La carta che si spiega

Lo script legge i sedici triangoli della gru e li abbina ai sedici spicchi di un quadrato: tutti e due in ordine di angolo intorno al loro centro, con lo spostamento che li fa combaciare meglio, e i vertici scelti in modo che il triangolo non si rovesci. Per ogni faccia due vertici sono la piega e scivolano dalla gru al foglio; il terzo gira intorno alla piega di un angolo che sale e scende: visto di fronte si avvicina alla piega di coseno dell’angolo, come carta che si alza verso di noi. La luce viene dalla normale della faccia girata; oltre i novanta gradi si vede il lato bianco.

La fisarmonica e le tessere

Ogni striscia è la sua fetta del cartoncino (un retro arancione, un fronte bianco con un use del logo ritagliato da un clipPath) portata dove serve da una sola matrice: larghezza, altezza e una pendenza verticale che si alterna fra una striscia e l’altra, così i bordi si toccano e formano lo zigzag della fisarmonica. Quattro numeri guidano tutto: spread (dal quadrato alla misura del logo), pleat (la profondità della piega), flip (il giro, una striscia dopo l’altra) e seam (i segni delle pieghe). Il giro schiaccia la striscia col coseno e, passato lo zero, mostra il fronte.

Il logo pulito e lo stato

Quando le strisce sono stese, sopra di loro compare in dissolvenza il cartoncino intero, identico ma senza cuciture: i segni delle pieghe svaniscono. L’angolo che si solleva è un taglio del cartoncino lungo una diagonale e un triangolo che va dal suo angolo al suo riflesso: oltre metà strada è il retro colorato. Il riflesso è una banda con un gradiente bianco che scorre, ritagliata dal contorno del cartoncino.

La regia e il tuo logo

Tutta la storia è una timeline sola, con timeScale per la velocità e un’etichetta per ogni momento (arrive, land, unfold, sheet, pleat, flip, reveal, flat, rest, leave). L’uscita usa gli stessi numeri all’indietro: strisce, foglio, gru, poi il volo via e la ripartenza da «arrive», con una picchiata nuova. Se IMAGE ha un indirizzo, il logo è quell’immagine e si divide sulle strisce allo stesso modo. Nel Playground accanto al campo c’è il tasto per caricare un file dal computer, che entra nel codice come indirizzo data:.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`NAME`	script.js	`'Wrenfold'`	Il logo scritto: si stampa sul lato bianco della carta e si divide sulle strisce.
`IMAGE`	script.js	`''`	Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola.
`STRIPS`	script.js	`8`	In quante strisce si piega il foglio, a fisarmonica: ognuna si gira per conto suo.
`FOLD`	script.js	`0.7`	Quanto sono profonde le pieghe della fisarmonica: 0 piatte, 1 quasi chiuse.
`FLIGHT`	script.js	`1`	Quanto la gru fa la picchiata arrivando: 0 è una planata dritta.
`CRANE`	script.js	`1.5`	Quanto è alta la gru, in altezze del cartoncino del logo.
`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 fermo prima di tornare gru.
`LOOP`	script.js	`true`	Se il logo torna gru, vola via e l’entrata ricomincia. Con false resta, col riflesso e l’angolo che si solleva.

Provali nel Playground

Quando usarla

Per presentare un logo con delicatezza e un po’ di meraviglia: l’apertura del sito di una cartoleria, di uno studio di grafica 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: il cartoncino prende quasi tutta la larghezza, la gru è un po’ più grande e parte da abbastanza in basso da non uscire dallo schermo. Un tocco la fa ripartire.

Con il movimento ridotto

Niente si muove: la gru posata compare in dissolvenza, poi al suo posto il foglio quadrato con le pieghe, poi il logo sul cartoncino. Se l’animazione ricomincia, anche l’uscita è una dissolvenza.

Trappole

Strisce accostate lasciano passare righe sottili del fondo dove si toccano (l’antialiasing): finché fanno il quadrato, sotto c’è un foglio intero, e alla fine il cartoncino intero copre le cuciture in dissolvenza.
Un clipPath con userSpaceOnUse segue la trasformazione dell’elemento che lo usa: messo sulla banda del riflesso che scorre, scorreva con lei e il riflesso non si vedeva mai. Va su un gruppo fermo che contiene la banda.
Abbinando a caso i vertici della gru e del foglio metà dei triangoli si rovesciava: i vertici si scelgono fra le permutazioni che tengono il verso del triangolo (il segno dell’area).
Con tutte le facce che partono quasi insieme la gru diventava una nuvola di schegge: i ritardi per parte (testa, collo e coda, ali, corpo) sono brevi e ogni faccia ha una finestra lunga, così la carta resta unita.
Un riflesso bianco su carta quasi bianca non si vede: il lato bianco è un avorio caldo e il riflesso è quasi pieno.
Con un nome lungo il cartoncino è basso e la gru, misurata su di lui, diventava minuscola: ha una misura minima legata allo schermo.
La gru che parte in alto a sinistra usciva dal bordo con le ali sul telefono: la partenza tiene conto della sua altezza e della picchiata.

Librerie

GSAP 3.15.0, Manrope (font variabile) 5.3.0.

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