Il logo di mercurio

Intro, SVG, FisicaGSAPImpegnativaPeso compresso: Demo 12 KBGSAP 28 KBGratisScarica lo zip

L’intro di un logo in metallo liquido su fondo nero: gocce di mercurio cromato cadono, rimbalzano pesanti, si attirano e si fondono in una pozza che risale e prende la forma delle lettere; il logo resta lucido come uno specchio, oscilla come gelatina e un riflesso lo attraversa. Nel Playground ci metti il tuo nome o carichi il tuo logo, in cromo, oro o rame.

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 quicksilver logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/unbounded@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script measures it, drops the mercury and pours it into the letters -->
    <svg class="palco" data-stage role="img" aria-label="Meltra" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- the room: black, a breath lighter behind the logo -->
        <radialGradient id="room" cx="50%" cy="54%" r="62%">
          <stop offset="0" class="sala-centro" />
          <stop offset="1" class="sala" />
        </radialGradient>
        <!-- the liquid metal. Blur the shapes and cut the blur at half height: drops close to each other melt into
             one (the goo), and the bridges between them take the colour of what they join. The sharp shapes go back
             on top, inside the new outline, and two thin rims are cut from the outline shifted by a hair: a light one
             on the upper left edge, a dark one on the lower right. No lighting filters: they are too slow to run
             every frame on a phone. The script keeps the filter's box tight around the logo; drops in the air above it
             or below it are drawn outside, in the group before this one. -->
        <filter id="liquid" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-filter>
          <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" data-blur />
          <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -10" result="goo" />
          <feComposite in="SourceGraphic" in2="goo" operator="atop" result="body" />
          <feOffset in="goo" dx="2" dy="2" result="down" data-rim-light />
          <feComposite in="goo" in2="down" operator="out" result="edge-light" />
          <feColorMatrix in="edge-light" type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.8 0" result="rim-light" data-rim-light-paint />
          <feOffset in="goo" dx="-2" dy="-2" result="up" data-rim-dark />
          <feComposite in="goo" in2="up" operator="out" result="edge-dark" />
          <feColorMatrix in="edge-dark" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0" result="rim-dark" data-rim-dark-paint />
          <feMerge>
            <feMergeNode in="body" />
            <feMergeNode in="rim-dark" />
            <feMergeNode in="rim-light" />
          </feMerge>
        </filter>
        <!-- the mirror of the letters: the sky above, a hard dark horizon, the bright floor below (one gradient for
             the whole logo, so every letter and every blob reflects the same room) -->
        <linearGradient id="mirror" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="100" data-mirror>
          <stop offset="0" class="metallo-chiaro" />
          <stop offset="0.16" class="metallo-bianco" />
          <stop offset="0.4" class="metallo-medio" />
          <stop offset="0.52" class="metallo-chiaro" />
          <stop offset="0.52" class="metallo-scuro" />
          <stop offset="0.62" class="metallo-scuro" />
          <stop offset="0.8" class="metallo-medio" />
          <stop offset="0.9" class="metallo-chiaro" />
          <stop offset="1" class="metallo-medio" />
        </linearGradient>
        <!-- a drop: a little ball of mirror, the window high on the left, the dark room in a ring, the floor at the rim -->
        <radialGradient id="drop" cx="0.5" cy="0.5" r="0.5" fx="0.36" fy="0.3">
          <stop offset="0" class="metallo-bianco" />
          <stop offset="0.14" class="metallo-chiaro" />
          <stop offset="0.42" class="metallo-medio" />
          <stop offset="0.7" class="metallo-scuro" />
          <stop offset="0.88" class="metallo-medio" />
          <stop offset="1" class="metallo-chiaro" />
        </radialGradient>
        <!-- the reflection that sweeps across the letters -->
        <linearGradient id="glint" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stop-color="#fff" stop-opacity="0" />
          <stop offset="0.3" stop-color="#fff" stop-opacity="0.08" />
          <stop offset="0.45" stop-color="#fff" stop-opacity="0.5" />
          <stop offset="0.5" stop-color="#fff" stop-opacity="0.95" />
          <stop offset="0.55" stop-color="#fff" stop-opacity="0.5" />
          <stop offset="0.7" stop-color="#fff" stop-opacity="0.08" />
          <stop offset="1" stop-color="#fff" stop-opacity="0" />
        </linearGradient>
        <mask id="letters" maskUnits="userSpaceOnUse" data-letters-mask><g data-letters></g></mask>
        <!-- a picture: the wipe that shows it, the same wipe taking the liquid away, and its outline for the band -->
        <mask id="wipe" maskUnits="userSpaceOnUse" data-wipe-mask><rect fill="#fff" data-wipe /></mask>
        <mask id="unwipe" maskUnits="userSpaceOnUse" data-unwipe-mask>
          <rect fill="#fff" data-unwipe-all />
          <rect fill="#000" data-unwipe />
        </mask>
        <!-- the chrome band that runs across the picture as it appears -->
        <linearGradient id="band" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" class="metallo-chiaro" stop-opacity="0" />
          <stop offset="0.3" class="metallo-scuro" stop-opacity="0.9" />
          <stop offset="0.48" class="metallo-chiaro" />
          <stop offset="0.55" stop-color="#fff" />
          <stop offset="0.7" class="metallo-medio" stop-opacity="0.9" />
          <stop offset="1" class="metallo-chiaro" stop-opacity="0" />
        </linearGradient>
      </defs>

      <rect fill="url(#room)" data-room />

      <!-- everything liquid sits in one group under the filter: the falling drops, the splashes, the blobs that climb
           into the letters and the letters themselves (or the outline of the picture) -->
      <g class="gocce" data-drops-free></g>
      <g filter="url(#liquid)" data-liquid>
        <g class="specchio" data-blobs></g>
        <g class="gocce" data-drops></g>
        <g class="specchio" data-logo></g>
      </g>

      <!-- the reflection, cut to the letters -->
      <g mask="url(#letters)" data-glint-holder><rect fill="url(#glint)" data-glint /></g>

      <!-- a picture, shown for real once the liquid has taken its shape -->
      <g data-picture></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.

22 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 di mercurio» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero profondo cadono dall’alto, una dopo l’altra, nove gocce di mercurio cromato: palline lucide con la finestra riflessa in alto a sinistra, allungate dalla velocità. Toccano terra, si schiacciano, fanno un solo rimbalzo basso, da liquido pesante, e lanciano intorno piccoli schizzi che ricadono e rotolano indietro. Poi le gocce si attirano: scivolano l’una verso l’altra, i bordi si toccano e si fondono con un ponte morbido, e le palline diventano un’unica pozza lucida che ondeggia una volta. Dalla pozza il metallo risale, prima al centro e poi verso i lati, si stira oltre l’altezza delle lettere e ricade, e dentro la massa liquida prendono forma le lettere del logo di un marchio inventato, Meltra. Le lettere si condensano nitide, lucide come uno specchio, con il cielo chiaro in alto, una linea d’orizzonte scura e il pavimento chiaro in basso, e oscillano un attimo come gelatina, dal centro verso i lati, prima di fermarsi. Un riflesso obliquo le attraversa. Il logo resta in mostra con un riflesso ogni tanto; dopo qualche secondo si scioglie, si affloscia in una pozza, la pozza si divide di nuovo in gocce che cadono fuori dallo schermo e tutto ricomincia. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine: il liquido prende la sua sagoma, poi una banda cromata la attraversa e lascia l’immagine vera.

Come funziona

Il filtro goo

Tutto quello che è liquido (gocce, schizzi, i blob che risalgono e le lettere) sta in un gruppo con un filtro SVG. feGaussianBlur sfoca le forme, feColorMatrix taglia l’alfa a metà (0 0 0 22 -10): due forme vicine, sfocate, si sommano e il taglio le unisce con un ponte morbido. Il colore dei ponti viene dalla sfocatura stessa, quindi prende quello di ciò che unisce; sopra si rimettono le forme nitide con feComposite atop. La sfocatura si conta in altezze di lettera: larga mentre il metallo è liquido, stretta quando le lettere si condensano.

Il cromo senza luci

feDiffuseLighting e feSpecularLighting darebbero il rilievo, ma rifatti a ogni fotogramma su una zona grande sono lentissimi. Il cromo è fatto di sfumature: le lettere e i blob hanno lo stesso gradiente lineare in userSpaceOnUse (cielo chiaro, orizzonte scuro con un salto netto, pavimento chiaro), così tutto riflette la stessa stanza; le gocce hanno un gradiente radiale con il fuoco spostato, una pallina di specchio. Il bordo liquido nasce da due feOffset del contorno: la differenza fra il contorno e la sua copia spostata di un pelo dà una falce chiara in alto a sinistra e una scura in basso a destra.

Le gocce

Ogni goccia è un’ellisse appoggiata sul suo punto più basso, con tre numeri: dove sta, quanto è schiacciata (s, sotto 1 schiacciata, sopra 1 allungata, rx segue con l’area quasi costante) e quanto metallo le resta (m). La caduta usa power2.in con la durata della gravità vera, l’impatto la schiaccia per sette centesimi di secondo, il rimbalzo è basso e l’assestamento elastico. Quando si fondono, la pallina radiale sfuma e resta il gradiente comune: la pozza si legge come una superficie sola.

La risalita nelle lettere

Le lettere si disegnano su una canvas e si campionano su una griglia: ogni punto dentro una lettera diventa un cerchio, circa 250 in tutto. I cerchi partono dalla pozza e salgono al loro punto con back.out, così il metallo si stira oltre e ricade; la pozza intanto perde metallo. Poi le lettere vere compaiono in dissolvenza dentro la massa, i cerchi si restringono e la sfocatura si stringe: il taglio dell’alfa le fa emergere nitide. L’oscillazione è uno scale e uno skewX intorno al piede di ogni lettera (svgOrigin), tornati a zero con elastic.out.

Le prestazioni e il tuo logo

Un filtro costa per ogni pixel della sua zona a ogni fotogramma, quindi la zona è una scatola stretta intorno al logo; una goccia ci entra solo quando c’è tutta, prima cade fuori dal filtro, da sola, dove non deve fondersi con niente. Il riflesso che attraversa le lettere è un rettangolo sfumato fuori dal filtro, tagliato da una maschera con una copia delle lettere. Con IMAGE la sagoma viene da una canvas (l’alfa, o le parti scure e colorate se l’immagine è opaca), dipinta con lo stesso gradiente; alla fine una banda cromata scorre e una maschera scopre l’immagine vera.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`NAME`	script.js	`'Meltra'`	Il logo scritto: il mercurio risale dentro ogni lettera.
`IMAGE`	script.js	`''`	Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola: il liquido prende la sua sagoma e poi la lascia vedere.
`DROPS`	script.js	`9`	Quante gocce cadono: il metallo è sempre lo stesso, diviso in più gocce piccole o in meno gocce grandi.
`VISCOSITY`	script.js	`1`	Quanto il liquido rimbalza, si stira salendo e oscilla come gelatina: 0.3 rigido, 2 molto fluido.
`SHINE`	script.js	`1`	Quanto sono luminosi il bordo chiaro del liquido e il riflesso che attraversa le lettere.
`COLOR`	script.js	`'chrome'`	Il metallo: chrome (cromo), gold (oro) o copper (rame). I tre colori di ogni metallo sono in style.css.
`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 in mostra prima di sciogliersi.
`LOOP`	script.js	`true`	Se il logo si scioglie e si versa di nuovo. Con false resta, con un riflesso ogni tanto.

Provali nel Playground

Quando usarla

Per presentare un logo con un materiale prezioso e fluido: l’apertura del sito di un gioielliere, di un marchio di orologi, di un’agenzia, di un prodotto tecnologico o di un musicista con un’estetica cromata, l’anteprima per un cliente, un caricamento, un post per i social. Funziona con un marchio scritto, meglio se spesso, e con un’immagine.

Sul telefono

La stessa animazione con le misure adattate: il logo è largo quasi quanto lo schermo e tutto (gocce, sfocatura, bordi) si conta in altezze di lettera, quindi il liquido si comporta come sul computer. La zona del filtro è piccola e resta leggera. Un tocco la fa ripartire.

Con il movimento ridotto

Niente cade e niente si muove: il logo cromato compare già formato, in dissolvenza, e resta fermo senza riflessi che passano. Se l’animazione ricomincia, se ne va e ritorna in dissolvenza.

Trappole

Con feDiffuseLighting, feSpecularLighting e una luce puntiforme che passava sulle lettere il cromo era bellissimo ma l’anteprima andava a un fotogramma e mezzo al secondo: le luci dei filtri SVG si ricalcolano pixel per pixel a ogni fotogramma. Il cromo è passato ai gradienti e il riflesso a un rettangolo fuori dal filtro.
Anche i due bordi (chiaro e scuro) dimezzano la velocità ognuno, e il filtro costa per tutta la sua zona: la zona è una scatola intorno al logo, non tutta la finestra, e le gocce in aria stanno fuori dal filtro finché non ci entrano per intero (altrimenti verrebbero tagliate al bordo della scatola).
Le palline radiali, tutte vicine, sembravano una collana di perle e non una pozza: mentre si fondono la pallina sfuma e resta il gradiente comune.
Con la goccia appoggiata col centro sul pavimento invece che col fondo, la pozza finiva a metà delle lettere e i blob scendevano invece di salire.
Nella discesa finale, centinaia di blob che cadevano da soli sembravano coriandoli: il logo prima si affloscia in una pozza e la pozza ritorna nelle nove gocce, che cadono.
Una const chiamata come la funzione di un onUpdate la nascondeva dentro la timeline: GSAP provava a chiamare un numero (o.apply is not a function).

Librerie

GSAP 3.15.0, Unbounded (font variabile) 5.3.0.

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