Il logo soffiato nel vetro

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

L’intro di un logo in una vetreria, senza personaggi: una goccia di vetro incandescente arriva sulla canna da soffio, si gonfia in tre respiri, viene rullata sul banco d’acciaio in una barra, la canna si stacca col suo filo e dalla barra salgono le lettere, che si raffreddano dall’arancio al rosso fino al vetro trasparente, con un riflesso e un tintinnio di luce. 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 blown-glass logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/rubik@5.2.8/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script measures it, builds the blowpipe, the gather of molten glass and the letters -->
    <svg class="palco" data-stage role="img" aria-label="Glowen" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- the light of the furnace behind, warm while the glass is hot -->
        <radialGradient id="furnace-light" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" class="luce-forno" />
          <stop offset="1" class="luce-forno luce-forno--via" />
        </radialGradient>
        <!-- the cold light of the room, once the glass has cooled -->
        <radialGradient id="room-light" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" class="luce-fredda" />
          <stop offset="1" class="luce-fredda luce-fredda--via" />
        </radialGradient>
        <!-- the steel table, the marver, where the gather is rolled -->
        <linearGradient id="marver" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" class="banco-stop banco-stop--velo" />
          <stop offset="0.3" class="banco-stop banco-stop--su" data-marver-mid />
          <stop offset="1" class="banco-stop" />
        </linearGradient>
        <!-- the glow the hot glass throws on the table -->
        <radialGradient id="table-glow" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" class="riverbero" />
          <stop offset="1" class="riverbero riverbero--via" />
        </radialGradient>
        <!-- the bubble of air inside the gather: less glass there, so it glows less, with a soft edge -->
        <radialGradient id="bubble-fill" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" class="bolla-stop" />
          <stop offset="0.7" class="bolla-stop bolla-stop--mezzo" />
          <stop offset="1" class="bolla-stop bolla-stop--via" />
        </radialGradient>
        <!-- the steel of the blowpipe, lit from above -->
        <linearGradient id="pipe-steel" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" class="canna-stop canna-stop--luce" />
          <stop offset="0.45" class="canna-stop" />
          <stop offset="1" class="canna-stop canna-stop--buio" />
        </linearGradient>
        <!-- the end of the pipe, red from the glass -->
        <linearGradient id="pipe-hot" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" class="canna-calda canna-calda--via" />
          <stop offset="1" class="canna-calda" />
        </linearGradient>
        <!-- the pipe turns all the time: a spiral of marks runs along it -->
        <pattern id="pipe-turn" patternUnits="userSpaceOnUse" width="14" height="14" data-turn>
          <path class="canna-giro" d="M-4 18L10 -4M10 18L24 -4" data-turn-path />
        </pattern>

        <!-- the molten glass. Everything hot sits in one group, painted white; a piece that cools gets fainter. This
             filter melts the pieces together (blur, then cut the blur at nearly half height: the goo) and paints them
             like hot glass from the blur itself: deep inside a thick, hot piece it is pale yellow, then orange, red at
             the thin edges and on a fading piece, a last dull ember before it goes; and a glow around. The script
             writes the colours from the page into the tables -->
        <filter id="molten" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-molten>
          <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="soft" data-goo-blur />
          <feColorMatrix in="soft" type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 20 -9" result="goo" />
          <feColorMatrix in="soft" type="matrix" values="0 0 0 1 0  0 0 0 1 0  0 0 0 1 0  0 0 0 1 0" result="depth" />
          <feComponentTransfer in="depth" result="paint">
            <feFuncR type="table" data-map-r />
            <feFuncG type="table" data-map-g />
            <feFuncB type="table" data-map-b />
            <feFuncA type="table" data-map-a />
          </feComponentTransfer>
          <feComposite in="paint" in2="goo" operator="in" result="hot" />
          <feGaussianBlur in="hot" stdDeviation="14" result="halo" data-glow-blur />
          <feComponentTransfer in="halo" result="glow">
            <feFuncA type="linear" slope="1.4" data-glow-strength />
          </feComponentTransfer>
          <feMerge>
            <feMergeNode in="glow" />
            <feMergeNode in="hot" />
          </feMerge>
        </filter>
        <!-- the glint at the end: soft around its rays -->
        <filter id="flare-soft" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="1.2" result="b" data-flare-blur />
          <feMerge>
            <feMergeNode in="b" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>

      <!-- the room: the furnace light, the cold light, the table with the glow and the reflection of the glass -->
      <rect class="forno" fill="url(#furnace-light)" data-furnace />
      <rect class="stanza" fill="url(#room-light)" data-room />
      <rect class="banco" data-table-base />
      <g data-reflection>
        <use href="#glass-all" />
        <g class="riflesso-caldo" data-reflection-hot></g>
      </g>
      <!-- the steel over the reflection: it lets it through at the edge and covers it further down -->
      <rect fill="url(#marver)" data-table />
      <rect class="banco-bordo" data-table-edge />
      <ellipse fill="url(#table-glow)" data-table-glow />

      <!-- the shimmer of the hot air over the glass -->
      <g class="aria-calda" data-haze></g>

      <!-- the blowpipe; its tip is the point 0 0, the pipe runs off to the left -->
      <g data-pipe>
        <g data-pipe-body></g>
      </g>

      <!-- the clear glass, one group per letter, under the hot glass that covers it while it cools -->
      <g id="glass-all" data-glass></g>

      <!-- the hot glass: the gather, the bar on the table, the thread that snaps, the letters -->
      <g filter="url(#molten)" data-hot>
        <rect data-gather />
        <path class="filo" data-thread />
        <circle data-stub />
        <g data-hot-letters></g>
      </g>
      <!-- the bubble of air blown inside the gather -->
      <ellipse class="bolla" fill="url(#bubble-fill)" data-bubble />
      <path class="bolla-luce" data-bubble-light />

      <!-- the glint and the ring of the glass when it is done -->
      <g data-flare-place>
        <g data-flare filter="url(#flare-soft)">
          <path class="lampo" data-flare-rays />
        </g>
        <g data-rings></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.

31 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 soffiato nel vetro» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Una vetreria al buio, con un banco d’acciaio in basso. Da sinistra entra oscillando una canna da soffio, l’acciaio lucido che gira su se stesso (una spirale di segni corre lungo la canna) e la punta rossa di calore; in cima porta una goccia di vetro fuso, arancio con il cuore giallo pallido e il bordo rosso, che al suo arrivo resta indietro, si allunga e poi la raggiunge con un tremolio da gelatina. La luce della fornace la segue e scalda la stanza. Poi tre respiri: a ogni soffio la goccia si gonfia di colpo, ondeggia e si assesta un po’ più grande, la canna arretra appena, il bagliore sale, e dentro cresce la bolla d’aria, più scura, con un filo di riflesso. La canna abbassa la goccia sul banco: tocca, si schiaccia e si appiattisce sotto; il banco si accende del suo riverbero. Viene rullata in una barra lunga e luminosa, che si allunga oltre il logo e torna indietro con un elastico. La canna tira: fra la punta e la barra si stira un filo di vetro, si strozza nel mezzo e si spezza, un grumo resta sulla punta e la canna se ne va; la barra, tirata, rimbalza. Dalla barra salgono le lettere del logo di un marchio inventato, Glowen, dal centro verso i lati, come caramella tirata: si allungano oltre la loro altezza, ricadono e ondeggiano, mentre la barra si scioglie nei loro piedi. Poi il vetro si raffredda, una lettera dopo l’altra: dal giallo all’arancio al rosso, le parti sottili per prime, fino a un’ultima brace scura, e al suo posto resta vetro trasparente con il bordo spesso verde azzurro, il lato in luce, il lato in ombra della rifrazione e due riflessi obliqui; quando una lettera si solidifica fa un piccolo scatto. Nel banco si specchiano prima le lettere calde, poi il vetro; la luce della stanza passa dal caldo al freddo e l’aria tremolante sopra il vetro si calma. Alla fine un lampo di luce attraversa il logo, una stella di luce brilla sull’angolo dell’ultima lettera con un giro di piccoli archi e le lettere vibrano appena, come vetro colpito. Il logo resta in mostra con un lampo ogni tanto; poi si scalda di nuovo, si affloscia nella barra, la barra torna goccia e la luce si spegne, e tutto ricomincia. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine: sale dal vetro fuso con la sua sagoma e, raffreddata, resta coi suoi colori e i riflessi del vetro.

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 barra sul banco è lunga quanto il logo più mezza lettera, la goccia dopo l’ultimo respiro ha un raggio di quasi una lettera e pende sopra il posto del logo, il banco comincia dove poggiano le lettere. La grandezza si sceglie perché ci stiano la goccia in alto e il riflesso in basso.

Il vetro fuso in un filtro

Tutto quello che è caldo (la goccia, che è un rettangolo con gli angoli tondi grandi quanto metà del lato, il filo, il grumo sulla punta e le lettere) sta in un gruppo bianco sotto un solo filtro. Un feGaussianBlur e un feColorMatrix che taglia l’alfa a poco meno della metà fondono i pezzi vicini (il goo). Dallo stesso sfocato un secondo feColorMatrix copia l’alfa nei colori, e un feComponentTransfer con quattro tabelle lo trasforma in colore: dove il vetro è spesso e caldo giallo pallido, poi arancio, rosso sui bordi sottili, una brace scura appena sopra il taglio. Un feComposite lo ritaglia sul goo e un secondo sfocato fa l’alone. Le tabelle le scrive lo script dai colori di :root.

Il raffreddamento

Ogni lettera ha il suo calore, da 1 a 0, e il calore diventa la sua opacità nel gruppo caldo, da 1 a 0,44. Così il filtro, che legge l’alfa sfocato, la colora sempre più rossa, e le parti sottili, dove lo sfocato è più basso, passano sotto il taglio per prime: il vetro si raffredda dai bordi, come quello vero. Sotto c’è la lettera di vetro freddo, che compare mentre il calore scende: un corpo quasi trasparente e, dentro un clipPath della lettera, il bordo spesso, il lato in luce e quello in ombra (la lettera stessa spostata di un soffio e ripassata) e i riflessi. Il riflesso nel banco è un use di tutto il vetro capovolto, coperto sempre di più dall’acciaio.

La goccia, la canna e il filo

La goccia è un oggetto con posizione, larghezza e altezza; la canna non ha una posizione sua: a ogni fotogramma si mette sul lato sinistro della goccia lungo la sua inclinazione, così la segue mentre si gonfia, si appoggia e si allunga in barra. Il filo che si spezza è un tracciato pieno, spesso alle due estremità e sottile nel mezzo: quando lo spessore del mezzo scende, il goo lo strozza e lo spezza da solo. Lo scatto, l’elastico e le ondate delle lettere sono elastic.out, più o meno morbidi secondo WOBBLE.

La regia e il tuo logo

Tutta l’entrata è una timeline sola, con le etichette start, arrive, blow, marver, snap, rise, cool, ting, rest e leave e timeScale per la velocità; un gsap.ticker ridisegna la scena e scrive solo gli attributi che cambiano, e la scatola del filtro segue il vetro caldo, così il lavoro si fa solo dove serve. Se IMAGE ha un indirizzo, il logo diventa quell’immagine: un filtro ne fa una sagoma (le parti scure e colorate, non le chiare né lo sfondo trasparente) che sale dal vetro fuso, e raffreddata resta coi suoi colori sotto i riflessi. 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	`'Glowen'`	Il logo scritto: ogni lettera sale dal vetro fuso e si raffredda in vetro trasparente.
`IMAGE`	script.js	`''`	Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola.
`BREATHS`	script.js	`3`	Quanti respiri gonfiano la goccia di vetro, da 1 a 5: con più respiri diventa anche più grande.
`COOLING`	script.js	`2.2`	Quanti secondi impiega il vetro a raffreddarsi dall’arancio al trasparente.
`WOBBLE`	script.js	`1`	Quanto è morbido il vetro fuso: quanto si allunga, si fonde e ondeggia (0 = rigido, 2 = molto molle).
`GLINT`	script.js	`1`	Quanto sono forti il lampo che attraversa il vetro, la stella di luce e il tintinnio alla fine (0 = niente).
`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 di vetro resta in mostra prima di essere fuso di nuovo.
`LOOP`	script.js	`true`	Se il logo si scioglie e se ne soffia uno nuovo. Con false resta di vetro, con un lampo ogni tanto.

Provali nel Playground

Quando usarla

Per presentare un logo con un gesto artigiano e luminoso: l’apertura del sito di una vetreria, di un marchio di design, di gioielli, profumi o bicchieri, di un bar di cocktail o di un hotel elegante, 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 logo è largo quasi quanto lo schermo, la goccia è un po’ più grande rispetto alle lettere e pende sopra di loro. Un tocco la fa ripartire.

Con il movimento ridotto

Niente si muove: la canna con la goccia gonfia compare in dissolvenza e svanisce, al suo posto compare il logo incandescente, che cambia solo colore raffreddandosi fino al vetro trasparente. Se l’animazione ricomincia, il vetro se ne va in dissolvenza.

Trappole

Con un filtro di sfocature su tutta la finestra ogni fotogramma costava troppo: la scatola del filtro segue a ogni fotogramma il vetro caldo (goccia, filo e lettere già salite) con un margine per l’alone, il gruppo caldo si spegne quando non c’è niente di caldo, e gli attributi si scrivono solo quando cambiano.
Il vetro freddo con tre maschere per lettera (e la sua copia nel riflesso) rallentava tanto quanto il filtro: il bordo, il lato in luce e quello in ombra si fanno dentro un clipPath, con la lettera stessa spostata e ripassata, che costa molto meno di una maschera.
Il riflesso nel banco era il vetro freddo, quindi sotto una lettera ancora rossa si specchiava già una lettera di vetro: c’è anche un riflesso caldo, una copia arancio di ogni lettera che si spegne col calore.
Il filo che si spezza, disegnato come una linea di spessore uguale, spariva tutto in un colpo dentro il goo: è un tracciato pieno, sottile nel mezzo, così si strozza lì e i due capi si ritirano.
Il passaggio dalla parte calda a quella fredda non deve tremare: il calore è l’opacità della lettera nel gruppo caldo e il taglio del goo è a 0,45, quindi da 0,5 a 0,44 la lettera calda svanisce piano come brace, mentre sotto il vetro freddo è già comparso.

Librerie

GSAP 3.15.0, Rubik (font variabile) 5.2.8.

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