Il logo piegato al neon

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

L’intro di un logo su un muro di mattoni di notte, senza personaggi: un tubo di vetro arriva in volo, una fiamma blu lo scalda e lo piega lettera per lettera seguendo il contorno del marchio, poi la leva del trasformatore scatta, la scatola ronza e il gas si accende a singhiozzo finché la luce rosa si stabilizza sui mattoni. 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 neon-bent logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/quicksand@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script measures it, traces the logo into tubes, paints the bricks and builds the transformer -->
    <svg class="palco" data-stage role="img" aria-label="Lowlit" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- the brick wall: two tiles the script paints on a canvas, the wall in the dark and the wall lit by the sign -->
        <pattern id="bricks" patternUnits="userSpaceOnUse" width="200" height="200" data-bricks>
          <image width="200" height="200" preserveAspectRatio="none" data-bricks-image />
        </pattern>
        <pattern id="bricks-lit" patternUnits="userSpaceOnUse" width="200" height="200" data-bricks-lit>
          <image width="200" height="200" preserveAspectRatio="none" data-bricks-lit-image />
        </pattern>
        <!-- where the light of the sign reaches the wall: strong around the tubes, gone a little further out -->
        <radialGradient id="reach" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" class="portata" />
          <stop offset="0.55" class="portata portata--mezza" />
          <stop offset="1" class="portata portata--via" />
        </radialGradient>
        <mask id="light-mask" maskUnits="userSpaceOnUse" data-light-mask>
          <rect fill="url(#reach)" data-light-reach />
        </mask>
        <!-- the coloured air in front of the wall -->
        <radialGradient id="air" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" class="aria" />
          <stop offset="1" class="aria aria--via" />
        </radialGradient>
        <!-- the warm light of the torch on the wall while the glass is bent -->
        <radialGradient id="torch-light" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" class="luce-cannello" />
          <stop offset="1" class="luce-cannello luce-cannello--via" />
        </radialGradient>
        <!-- the dark corners of the night -->
        <radialGradient id="vignette" cx="0.5" cy="0.46" r="0.75">
          <stop offset="0.45" class="vignetta vignetta--via" />
          <stop offset="1" class="vignetta" />
        </radialGradient>
        <!-- the torch flame: deep blue at the base, light blue, then gone at the tip -->
        <linearGradient id="flame-outer" x1="0" y1="1" x2="0" y2="0">
          <stop offset="0" class="fiamma-stop fiamma-stop--base" />
          <stop offset="0.45" class="fiamma-stop" />
          <stop offset="1" class="fiamma-stop fiamma-stop--via" />
        </linearGradient>
        <linearGradient id="flame-inner" x1="0" y1="1" x2="0" y2="0">
          <stop offset="0" class="fiamma-cuore-stop" />
          <stop offset="1" class="fiamma-cuore-stop fiamma-cuore-stop--punta" />
        </linearGradient>
        <!-- the steel of the transformer -->
        <linearGradient id="box-steel" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" class="scatola-stop scatola-stop--luce" />
          <stop offset="1" class="scatola-stop" />
        </linearGradient>
        <!-- the glows: the script sizes their boxes and blurs to the letters -->
        <filter id="halo" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-halo-filter>
          <feGaussianBlur stdDeviation="20" data-halo-blur />
        </filter>
        <filter id="near" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-near-filter>
          <feGaussianBlur stdDeviation="5" data-near-blur />
        </filter>
        <filter id="heat" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-heat-filter>
          <feGaussianBlur stdDeviation="4" result="b" data-heat-blur />
          <feMerge>
            <feMergeNode in="b" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
        <filter id="shade" filterUnits="userSpaceOnUse" data-shade-filter>
          <feGaussianBlur stdDeviation="3" data-shade-blur />
        </filter>
      </defs>

      <!-- the wall, in the dark and lit by the sign -->
      <rect fill="url(#bricks)" data-wall />
      <rect fill="url(#bricks-lit)" mask="url(#light-mask)" data-wall-lit />
      <rect class="aria-colore" fill="url(#air)" data-air />
      <rect class="aria-colore" fill="url(#torch-light)" data-torch-light />
      <rect fill="url(#vignette)" data-vignette />

      <!-- the transformer, the cable to the sign, the lever and the hum -->
      <g data-box-place>
        <g data-box>
          <g data-box-shake></g>
        </g>
      </g>
      <path class="cavo" data-cable />

      <!-- the sign: every outline of the logo is a glass tube, bent by the flame and then lit by the gas -->
      <g data-sign>
        <g class="ombra-tubo" filter="url(#shade)" data-shadows></g>
        <g data-flame-place>
          <g data-flame>
            <path class="fiamma" fill="url(#flame-outer)" d="M0 0C-0.2 -0.14 -0.2 -0.42 -0.1 -0.62C-0.05 -0.76 -0.02 -0.9 0 -1C0.02 -0.9 0.05 -0.76 0.1 -0.62C0.2 -0.42 0.2 -0.14 0 0Z" />
            <path class="fiamma" fill="url(#flame-inner)" d="M0 -0.03C-0.09 -0.1 -0.1 -0.3 -0.04 -0.46C-0.02 -0.54 0 -0.6 0 -0.62C0 -0.6 0.02 -0.54 0.04 -0.46C0.1 -0.3 0.09 -0.1 0 -0.03Z" />
          </g>
        </g>
        <g data-caps></g>
        <g class="vetro" data-glass></g>
        <g class="gas-alone" filter="url(#halo)" data-halo></g>
        <g class="gas-vicino" filter="url(#near)" data-near></g>
        <g class="gas-tubo" data-gas></g>
        <g class="gas-cuore" data-core></g>
        <g class="vetro-lucido" data-shine></g>
        <g filter="url(#heat)" data-hot></g>
        <g class="caldo-cuore" data-hot-core></g>
        <!-- the straight stretch of tube still to be bent, in the hands -->
        <g data-tail>
          <line class="ombra-tubo ombra-tubo--coda" filter="url(#shade)" data-tail-shadow />
          <line class="vetro-coda" data-tail-glass />
          <line class="vetro-lucido" data-tail-shine />
          <line class="caldo" filter="url(#heat)" data-tail-hot />
        </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.

32 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 piegato al neon» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Un muro di mattoni al buio, coi mattoni di toni diversi, la malta scura e gli angoli più neri. Sul muro cade dall’alto un trasformatore, una scatoletta d’acciaio con la targhetta e le feritoie, che rimbalza e si ferma. Da sinistra arriva in volo un tubo di vetro trasparente, dritto, che gira su se stesso, si posa dove comincia la prima lettera di un marchio inventato, Lowlit, e oscilla ancora un attimo; sotto la sua punta si accende con uno scatto una fiamma blu, che illumina di arancio i mattoni intorno, e il vetro si arrossa. Poi la piegatura: la fiamma segue il punto in cui il tubo si piega e il vetro prende la forma del contorno di ogni lettera, arancio dove la fiamma è appena passata e di nuovo trasparente dietro, mentre il pezzo dritto ancora da piegare ruota nelle mani seguendo le curve. A ogni fine di contorno la fiamma salta con un piccolo arco all’inizio del successivo, ai due capi del tubo scattano gli elettrodi scuri e ogni lettera finita si gonfia appena e si assesta con un elastico. Finito il logo la fiamma si spegne, il cavo scende dal tubo fino alla scatola, la leva scatta e la scatola trema e ronza, con degli archi che escono dai suoi fianchi. Il gas corre nei tubi lettera per lettera e la luce si accende a singhiozzo: si spegne, torna mezza, si spegne di nuovo, una lettera resta buia e ci prova due volte prima di accendersi, e alla fine la luce tiene: il rosa col cuore bianco, l’alone intorno e i mattoni accesi di rosa vicino all’insegna. Il logo resta acceso e ogni tanto una lettera trema; poi la leva torna giù, la luce si spegne a scatti, i tubi si riavvolgono uno dopo l’altro, la scatola se ne va e tutto ricomincia. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine: il contorno delle sue parti scure o colorate diventa i tubi.

Come funziona

Il contorno delle lettere

Il logo si disegna su una canvas (la parola col suo carattere, oppure l’immagine) e ogni pixel diventa un valore da 0 a 1; i marching squares seguono la linea dove il valore passa la metà e danno contorni chiusi e lisci, che Ramer-Douglas-Peucker sfoltisce. Il vetro non fa angoli vivi: ogni angolo diventa una piccola curva quadratica. I pezzi si ordinano da sinistra a destra e quelli uno sopra l’altro (il puntino della i) si tengono nella stessa lettera. Ogni contorno parte dal suo punto più basso, va verso destra e lascia un piccolo varco fra i due capi, dove vanno gli elettrodi.

Il tubo che si piega

Ogni contorno è un tracciato aperto disegnato più volte (ombra, vetro, riflesso, gas, alone), e la parte già piegata è uno stroke-dasharray lungo quanto il progresso. Il pezzo dritto ancora da piegare è una linea che parte dal punto della piega e punta verso un punto del contorno 0,3 lettere più avanti: seguendo quella direzione invece della tangente esatta ruota morbido nelle curve. È lungo al massimo quanto il contorno che resta e non esce mai dal palco.

Il vetro caldo e la fiamma

Il tratto arancio è lo stesso tracciato con un trattino solo: stroke-dasharray lungo quanto il caldo e stroke-dashoffset negativo per farlo finire proprio sulla piega; un feGaussianBlur con feMerge gli dà il bagliore e un tratto giallo più corto il punto più caldo. Il caldo di ogni contorno scende da 1 a 0 dopo il passaggio della fiamma, così il vetro torna trasparente da dietro. La fiamma sono due gocce con un gradiente blu; scala e inclinazione tremano con dei seni dell’orologio della timeline.

Il gas e il muro

Acceso, ogni tubo è un alone largo e sfocato, un bagliore vicino, il tubo rosa e un cuore quasi bianco, con l’opacità data da quanto gas c’è, da quanto è accesa quella lettera e dalla corrente. I mattoni sono dipinti su una canvas due volte con gli stessi semi: al buio e illuminati di rosa. La versione illuminata sta sopra, con una maschera a gradiente radiale intorno all’insegna e un’opacità pari a quanto l’insegna è accesa in media, quindi il muro segue ogni tremolio.

La regia e il tuo logo

Tutta l’entrata è una timeline sola, con le etichette start, bend, cool, switch, light, rest e leave e timeScale per la velocità. I tremolii sono una serie di set sulla corrente e sulle lettere, scritti come coppie di tempo e valore e ammorbiditi da FLICKER; la prima volta la lettera ostinata è sempre la stessa, poi cambia. Se IMAGE ha un indirizzo, il contorno delle parti scure o colorate dell’immagine (o della sua sagoma, se è chiara su trasparente) diventa i tubi. 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	`'Lowlit'`	Il logo scritto: il contorno di ogni lettera diventa un tubo di vetro.
`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 il contorno delle sue parti scure o colorate diventa i tubi.
`BEND`	script.js	`3.4`	Quanti secondi ci mette la fiamma a piegare il tubo in tutto il logo.
`FLICKER`	script.js	`1`	Quanto il gas balbetta prima che la luce tenga: 0 si accende pulito, 2 è una lotta, con più scatti.
`GLOW`	script.js	`1`	Quanto è forte il bagliore, intorno ai tubi e sui mattoni (0 = solo i tubi accesi).
`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 acceso prima che si spenga.
`LOOP`	script.js	`true`	Se l’insegna si spegne, i tubi si riavvolgono e se ne piega una nuova. Con false il logo resta acceso, con un tremolio ogni tanto.

Provali nel Playground

Quando usarla

Per presentare un logo con l’atmosfera di un locale di sera: l’apertura del sito di un cocktail bar, di una pizzeria, di un club, di un barbiere, di un festival o di un marchio che vuole un’aria notturna, l’anteprima per un cliente, un caricamento, un post per i social. Funziona con un marchio scritto e con un’immagine dalle forme semplici.

Sul telefono

La stessa animazione con le misure adattate: il logo è largo quasi quanto lo schermo, i mattoni restano della stessa grandezza e il tubo da piegare non esce mai dai bordi. Un tocco la fa ripartire.

Con il movimento ridotto

Niente si muove: l’insegna già piegata e il trasformatore compaiono in dissolvenza sul muro, poi la luce sale piano, senza tremolii. Se l’animazione ricomincia, la luce si spegne piano e l’insegna svanisce.

Trappole

La regola CSS che toglie il riempimento ai tracciati dei tubi (fill: none) valeva anche per la fiamma e batteva il suo attributo fill col gradiente: la fiamma spariva. Il CSS vince sugli attributi di presentazione, quindi la regola esclude la fiamma con :not(.fiamma).
Un contorno chiuso disegnato con stroke-dasharray non ha capi: per gli elettrodi il tracciato si apre con un piccolo varco nel punto più basso, altrimenti il tubo finito si chiude su se stesso e non si vede dove entra nel muro.
Il tratto caldo finisce sulla piega con uno stroke-dashoffset negativo; all’inizio di un contorno sarebbe più lungo della parte già piegata e spunterebbe dall’altra parte del tracciato: la sua lunghezza è al massimo quella già piegata.
Il puntino della i è un pezzo a sé: senza raggrupparlo con l’asta, la lettera ostinata o il rimbalzo di fine lettera potevano prendere l’asta senza il puntino. I pezzi uno sopra l’altro stanno nella stessa lettera.
La maschera del muro acceso arrivava a più di una lettera e mezza dall’insegna e con i mattoni chiari tutto il muro diventava rosa: l’insegna perdeva contrasto. Mattoni più scuri al buio e una luce che arriva a circa una lettera dai tubi.

Librerie

GSAP 3.15.0, Quicksand (font variabile) 5.3.0.

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