Il logo disegnato dallo stormo

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

L’entrata di un logo in un cielo al tramonto: arriva da lontano uno stormo di rondini che vortica in onde, poi gli uccellini si posano uno dopo l’altro sui punti delle lettere finché il logo è fatto di uccelli; le lettere si riempiono dal basso e tre ritardatarie si appollaiano in cima e cantano. 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 flock-of-birds logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/outfit@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the soft clouds, drawn on a canvas behind everything -->
    <canvas class="nuvole" data-clouds aria-hidden="true"></canvas>

    <!-- the logo: the script writes it here; it fills up from the bottom through a mask -->
    <svg class="palco" data-stage role="img" aria-label="Wrenly" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="fill-edge" gradientUnits="userSpaceOnUse" x1="0" x2="0" y1="0" y2="1" data-fill-edge>
          <stop offset="0" stop-color="#000" />
          <stop offset="1" stop-color="#fff" />
        </linearGradient>
        <mask id="fill" maskUnits="userSpaceOnUse" data-fill-mask>
          <rect fill="url(#fill-edge)" data-fill-rect />
        </mask>
      </defs>
      <g data-world>
        <g data-logo mask="url(#fill)"></g>
      </g>
    </svg>

    <!-- the flock: hundreds of small birds, drawn on a canvas -->
    <canvas class="stormo" data-flock aria-hidden="true"></canvas>

    <!-- the latecomers, the notes and the feathers, over everything -->
    <svg class="palco palco--sopra" data-front aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- the belly stays inside the body (in each bird's own coordinates) -->
        <clipPath id="bird-body-clip">
          <path d="M-20 -30C-18 -44 -4 -50 12 -48C26 -46 32 -34 30 -22C28 -10 16 -4 2 -4C-12 -4 -22 -16 -20 -30Z" />
        </clipPath>

        <!-- a swallow, drawn facing right; the point between its feet is 0 0. The script clones it for every
             latecomer and turns each piece on its own joint -->
        <g id="bird-model" data-bird-model>
          <g data-b-place>
            <g data-b-flip>
              <!-- the legs, under the body; they tuck in when it flies -->
              <g data-b-legs>
                <path class="zampa" d="M-1 -7L-3 0M9 -7L9 0" />
                <path class="zampa zampa--dita" d="M-8 0L1 0M4 0L13 0" />
              </g>
              <g data-b-trunk>
                <!-- the far wing, darker, only seen when the wings go up -->
                <g data-b-wing-far>
                  <path class="uccello-lontano" d="M9 -43C-3 -45 -17 -37 -33 -19C-19 -21 -5 -23 5 -27C13 -30 15 -39 9 -43Z" />
                </g>
                <!-- the forked tail -->
                <g data-b-tail>
                  <path class="uccello-ala" d="M-14 -24C-26 -20 -40 -8 -56 6C-45 1 -38 -1 -31 -4C-37 4 -42 13 -47 24C-34 11 -22 0 -9 -11Z" />
                  <path class="uccello-piuma" d="M-20 -17L-44 2M-18 -12L-38 14" />
                </g>
                <!-- the body: blue back, cream belly, a shine on the back -->
                <path class="uccello" d="M-20 -30C-18 -44 -4 -50 12 -48C26 -46 32 -34 30 -22C28 -10 16 -4 2 -4C-12 -4 -22 -16 -20 -30Z" />
                <g clip-path="url(#bird-body-clip)">
                  <path class="uccello-pancia" d="M-26 -10C-8 -18 12 -26 36 -34L36 0L-26 0Z" />
                  <path class="uccello-macchia" d="M4 -16C7 -18 10 -17 10 -15C9 -13 6 -13 4 -16ZM14 -20C16 -21 18 -20 18 -19C17 -17 15 -17 14 -20ZM-4 -11C-2 -12 0 -12 0 -10C-1 -9 -3 -9 -4 -11Z" />
                  <path class="uccello-lucido" d="M-14 -36C-8 -43 2 -46 10 -45" />
                </g>
                <!-- the head turns on the neck: throat, forehead, beak in two halves, eye with iris, shine and lid -->
                <g data-b-head>
                  <circle class="uccello" cx="20" cy="-50" r="15" />
                  <path class="uccello-gola" d="M21 -42C27 -45 33 -45 34 -40C32 -34 24 -33 17 -37Z" />
                  <path class="uccello-gola" d="M30 -59C34 -59 36 -55 34.5 -51.5C31.5 -52.5 29 -55.5 30 -59Z" />
                  <path class="uccello-lucido" d="M10 -59C13 -62 17 -64 21 -64" />
                  <g data-b-beak-low>
                    <path class="becco becco--sotto" d="M33 -47.6L44.5 -47.6L33.5 -43.4Z" />
                  </g>
                  <g data-b-beak-up>
                    <path class="becco" d="M33 -54L47 -48.6L33 -47.4Z" />
                  </g>
                  <ellipse class="guancia" cx="17" cy="-44" rx="4.6" ry="2.6" data-b-blush />
                  <circle class="occhio" cx="25" cy="-53" r="5.6" />
                  <g data-b-pupil>
                    <circle class="iride" cx="26.4" cy="-53" r="3.8" />
                    <circle class="pupilla" cx="26.9" cy="-53" r="2.1" />
                    <circle class="riflesso" cx="25.3" cy="-54.8" r="1.2" />
                  </g>
                  <circle class="palpebra" cx="25" cy="-53" r="6.4" data-b-lid />
                </g>
                <!-- the near wing, folded along the body; it turns on the shoulder to fly -->
                <g data-b-wing>
                  <path class="uccello-ala" d="M5 -41C-7 -43 -21 -35 -37 -17C-23 -19 -9 -21 1 -25C9 -28 11 -37 5 -41Z" />
                  <path class="uccello-piuma" d="M-6 -33L-24 -22M-2 -28L-18 -21M-12 -27L-28 -19" />
                </g>
              </g>
            </g>
          </g>
        </g>
      </defs>
      <g data-heroes></g>
      <g data-fx></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 disegnato dallo stormo» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Il cielo è un tramonto: viola in alto, rosa a metà, arancio e oro vicino all’orizzonte, con nuvole morbide illuminate da sotto che scorrono piano. In un angolo compare una nuvoletta di puntini: è uno stormo di rondini che arriva da lontano e si ingrandisce avvicinandosi. Sopra il palco gli uccellini girano come in una murmuration vera, uno stormo che si stringe e si allarga in onde, ognuno con le ali che battono a tre fotogrammi e ogni tanto una planata. Poi, da sinistra a destra, ogni rondine lascia il vortice, scende con una curva e si posa sul suo punto del logo di un marchio inventato, Wrenly: frena con le ali aperte, si assesta e le chiude, una dopo l’altra, mentre qualche piuma cade ondeggiando, finché le lettere sono fatte di uccelli. A quel punto gli uccelli si fondono nel logo: le lettere si riempiono di colore con una dissolvenza che sale dal basso e, piene, si stirano verso l’alto e tornano giù con un elastico. Tre rondini ritardatarie, disegnate a mano con la gola rossa, la pancia color crema e gli occhi con l’iride e il riflesso, arrivano da fuori schermo, si posano in cima alle lettere (che si abbassano un poco sotto il loro peso) e cantano: il becco si apre e piccole note disegnate volano via. Poi il logo resta lì con loro: respirano, sbattono le palpebre, una si gira con un saltello, un’altra si pulisce le piume del petto e ne perde una, la terza vola via nel cielo, gira e torna al suo posto. Dopo qualche secondo le ritardatarie ripartono, il colore delle lettere si ritira dall’alto, il logo torna fatto di uccelli e lo stormo vola via a ondate; poi arriva uno stormo nuovo, con un vortice e un ordine diversi. Un clic fa ripartire tutto da capo. Al posto della parola si può mettere un’immagine: gli uccelli prendono la forma dei suoi pixel pieni e poi appare l’immagine.

Come funziona

Quattro strati

Il cielo è una sfumatura CSS sul palco; sopra ci sono una canvas per le nuvole, l’SVG del logo, una canvas per lo stormo e un secondo SVG per le ritardatarie, le note e le piume. Le nuvole si disegnano una volta sola, sfumate con il trucco dell’ombra (la forma sta fuori dalla canvas e se ne vede solo l’ombra sfocata, che funziona anche dove ctx.filter manca): prima il bordo chiaro di sotto, poi il corpo in ombra un po’ più in alto. A ogni fotogramma si spostano con l’orologio della pagina.

I punti del logo

Le lettere si misurano su una canvas nello stesso carattere (measureText, actualBoundingBoxAscent) e si disegnano su un’altra canvas grande come il palco; getImageData dice quali pixel sono pieni. Dall’area piena e dal numero massimo di uccelli viene la distanza fra due posti, poi una griglia a nido d’ape con un po’ di disordine dà un posto a ogni rondine. La stessa lettura trova il punto più alto di ogni colonna: le ritardatarie si posano dove la cima è piatta per la larghezza delle loro zampe.

Uno stormo calcolato, non simulato

Ogni uccello ha una posizione che è una funzione del tempo: il centro dello stormo arriva lungo una curva e si ingrandisce, ogni rondine gira su un anello inclinato (più veloce al centro, così lo stormo si deforma), l’anello si allarga e si stringe e un’onda lo attraversa. La direzione del volo è la differenza fra la posizione di adesso e quella di un attimo dopo. Niente simulazione: la scena si può mandare avanti e indietro come una timeline.

Gli uccelli sulla canvas

Ogni posa (ali su, a metà, giù, aperte, mezze chiuse, chiuse) si disegna una volta su una piccola canvas, alla risoluzione dello schermo. A ogni fotogramma ogni uccello è un solo drawImage con setTransform (posizione, verso, inclinazione e grandezza in una matrice): così centinaia di rondini restano a 60 fotogrammi al secondo. Il numero dipende dall’area dello schermo; per l’atterraggio una curva di Bézier parte con la velocità che l’uccello aveva nello stormo e finisce sul suo punto.

Le lettere che si riempiono

Il logo SVG ha una maschera con una sfumatura verticale, nero sopra e bianco sotto, che sale con la timeline. Lo stesso numero, la linea del riempimento, decide la trasparenza degli uccelli posati: sotto la linea spariscono, sopra restano, e nella fascia sfumata si incrociano con il colore della lettera. All’uscita la linea scende e gli uccelli tornano visibili dall’alto, appena prima di ripartire.

Le ritardatarie e il tuo logo

La rondine è disegnata una volta nella pagina, a pezzi e col contorno, e lo script la clona per ognuna. Ogni pezzo ruota sulla sua articolazione calcolata con getBBox (la spalla, il collo, la cerniera del becco, l’attaccatura della coda); posizione, inclinazione e verso vanno in un oggetto scritto come attributo transform, e i voli seguono curve di Bézier. Se IMAGE ha un indirizzo, il logo diventa quell’immagine e gli uccelli prendono la forma dei suoi pixel pieni; un’immagine di un altro sito che non si può leggere diventa un rettangolo di uccelli.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`NAME`	script.js	`'Wrenly'`	Il logo scritto: gli uccelli si posano sui punti delle sue lettere.
`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 gli uccelli prendono la forma dei suoi pixel pieni.
`BIRDS`	script.js	`420`	Quanti uccelli nello stormo, al massimo: su uno schermo piccolo sono di meno, e mai più di quanti il logo ne può tenere.
`SWIRL`	script.js	`1`	Quanto vortica lo stormo: 0 vola dritto ondeggiando, 2 è un turbine veloce.
`PERCHED`	script.js	`3`	Quante rondini ritardatarie restano appollaiate in cima al logo (da 0 a 6).
`SPEED`	script.js	`1`	La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà.
`REST`	script.js	`5`	Quanti secondi il logo resta intero con le rondini sopra prima che lo stormo se lo porti via.
`LOOP`	script.js	`true`	Se lo stormo porta via il logo e ricomincia. Con false il logo resta e le rondini continuano a sbattere le palpebre e a guardarsi intorno.

Provali nel Playground

Quando usarla

Per l’apertura di un sito o di un video che parla di natura, viaggi, primavera, musica o di un nome che vola; per l’anteprima di un logo a un cliente, una pagina di benvenuto, un post per i social. Funziona con un marchio scritto e con un’immagine.

Sul telefono

La stessa animazione, con le misure adattate: il logo prende più larghezza, gli uccelli sono più piccoli e di meno (il numero dipende dall’area dello schermo), così restano fluidi. Un tocco la fa ripartire.

Con il movimento ridotto

Niente vola: le lettere fatte di uccelli compaiono in dissolvenza, poi si dissolvono nelle lettere piene, poi compaiono le rondini appollaiate; le nuvole stanno ferme. Se ricomincia, anche l’uscita è una dissolvenza.

Trappole

Una maschera SVG con maskUnits userSpaceOnUse senza x, y, width e height usa il riquadro predefinito, e il rettangolo dentro senza misure non disegna niente: le lettere non comparivano affatto. Maschera e rettangolo hanno bisogno delle misure del palco (anzi di più).
Centinaia di uccelli in SVG non stanno a 60 fotogrammi al secondo: lo stormo è una canvas, ogni posa è disegnata una volta e ogni uccello è un solo drawImage con una matrice. Il numero si limita anche in base all’area dello schermo, e la finezza delle pose è appena sopra quella dello schermo, perché disegnarle più grandi costava fotogrammi.
Con la stessa grandezza minima su un nome lungo, al telefono gli uccelli erano più grossi dei tratti delle lettere e il nome non si leggeva: la distanza minima fra due posti è scesa.
Su un’immagine (più alta di una parola) le ritardatarie erano enormi e si sovrapponevano: la loro grandezza tiene conto dell’immagine e della larghezza del logo, e due posti sono lontani almeno una rondine intera.
Uno stormo simulato non si può mandare avanti o indietro: la posizione di ogni uccello è una funzione del tempo della timeline, così una pausa, un salto o un clic mostrano sempre la scena giusta.
Un’immagine presa da un altro sito non si può leggere su una canvas (getImageData dà errore): allora gli uccelli riempiono il suo rettangolo.
La piuma che cade all’atterraggio partiva dal petto e si vedeva sopra l’ala: ora parte dietro, vicino alla coda.

Librerie

GSAP 3.15.0, Outfit (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.