La parola di cera che si scioglie

Testo, HoverGSAP, Solo CSSMediaPeso compresso: Demo 10 KBGSAP 28 KBGratisScarica lo zip

Titolo animato nello stile minimal: una parola grande di cera avorio su un bianco caldo, con il volume, il lucido e l’ombra morbida della cera vera. Una fiammella segue il puntatore o il dito: vicino a lei le lettere si scaldano, si ammorbidiscono e si afflosciano, e dal loro bordo di sotto colano gocce lente che si allungano, si staccano e si allargano in pozze sulla mensola. Lontano dalla fiamma la cera si rapprende e torna piano nella parola.

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>Ember</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- a big word made of ivory wax on warm white: near the flame the letters soften, slump and drip slow drops that
       pinch off and pool on the ledge below; away from the flame the wax sets again and keeps its drips -->
  <main class="pagina" data-pagina>
    <header class="testa">
      <p class="marchio" data-entra>Ember</p>
      <p class="stato" data-entra><span class="stato__nome">Wax</span> <span class="stato__valore" data-stato>set</span></p>
    </header>

    <h1 class="parola" data-parola>Ember</h1>

    <svg class="scena" viewBox="0 0 1000 600" aria-hidden="true" data-scena>
      <defs>
        <!-- the wax: the drips melt into the letters (blur and alpha threshold), then a soft volume, a gloss that
             follows the flame and a warm shadow on the paper -->
        <filter id="cera" filterUnits="userSpaceOnUse" x="0" y="0" width="1000" height="600" color-interpolation-filters="sRGB">
          <feGaussianBlur in="SourceGraphic" stdDeviation="2.2" result="sfocato" />
          <feColorMatrix in="sfocato" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -8" result="forma" />
          <feGaussianBlur in="forma" stdDeviation="5" result="rilievo" />
          <feDiffuseLighting in="rilievo" surfaceScale="3" diffuseConstant="1" lighting-color="#fff7ea" result="ombreggiato">
            <feDistantLight azimuth="250" elevation="58" />
          </feDiffuseLighting>
          <feComposite in="forma" in2="ombreggiato" operator="arithmetic" k1="1.1" k2="0" k3="0" k4="0.035" result="volume" />
          <feSpecularLighting in="rilievo" surfaceScale="5" specularConstant="0.9" specularExponent="20" lighting-color="#fff4de" result="lucido">
            <fePointLight x="500" y="120" z="170" data-luce />
          </feSpecularLighting>
          <feComposite in="lucido" in2="forma" operator="in" result="lucidoDentro" />
          <feComposite in="volume" in2="lucidoDentro" operator="arithmetic" k1="0" k2="1" k3="0.55" k4="0" result="cera" />
          <feComposite in="cera" in2="forma" operator="in" result="ceraPulita" />
          <feGaussianBlur in="forma" stdDeviation="9" result="ombraMolle" />
          <feOffset in="ombraMolle" dx="0" dy="9" result="ombraGiu" />
          <feFlood flood-color="#6e5334" flood-opacity="0.2" result="tinta" />
          <feComposite in="tinta" in2="ombraGiu" operator="in" result="ombra" />
          <feMerge>
            <feMergeNode in="ombra" />
            <feMergeNode in="ceraPulita" />
          </feMerge>
        </filter>
        <linearGradient id="fiamma" x1="0" y1="1" x2="0" y2="0">
          <stop offset="0" stop-color="#fff6dc" />
          <stop offset="0.38" stop-color="#ffd27a" />
          <stop offset="0.78" stop-color="#f29a3c" />
          <stop offset="1" stop-color="#e2672a" />
        </linearGradient>
        <radialGradient id="alone">
          <stop offset="0" stop-color="#ffb860" stop-opacity="0.42" />
          <stop offset="0.45" stop-color="#ffb860" stop-opacity="0.12" />
          <stop offset="1" stop-color="#ffb860" stop-opacity="0" />
        </radialGradient>
      </defs>

      <path class="mensola" data-mensola d="M80 500 H920" />
      <g filter="url(#cera)">
        <g data-lettere></g>
        <g data-colate></g>
      </g>
      <g class="fiamma" data-fiamma>
        <circle r="120" fill="url(#alone)" data-alone />
        <path fill="url(#fiamma)" data-lingua />
        <path class="fiamma__cuore" data-cuore />
      </g>
    </svg>

    <footer class="piede">
      <p class="nota" data-entra data-nota>Bring the flame close to melt the wax</p>
      <p class="nota nota--destra" data-entra>Hand-poured candles</p>
    </footer>
  </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.

23 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 «La parola di cera che si scioglie» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Ember è un laboratorio di candele colate a mano, inventato. Sul bianco caldo della pagina c’è il suo nome, grande, in Fraunces, fatto di cera avorio: ha il volume morbido della cera, un lucido sottile e un’ombra calda sulla carta. Le lettere arrivano una dopo l’altra, come colate dall’alto, e si posano con un’unità di troppo e il ritorno; poi si accende una fiammella, che segue il puntatore. Dove passa, la cera si scalda piano: la lettera prende un tono più caldo, diventa più morbida (l’asse SOFT del carattere arrotonda gli spigoli), più piena, e si affloscia appena sulla riga. Dal suo bordo di sotto nascono le colature: una perla che sporge, poi un filo che scende lento, sempre più svelto quanto più è lungo e caldo, con la goccia gonfia in punta. A volte il collo si stringe e la goccia si stacca, cade, si allunga cadendo e si apre in una pozza sulla mensola, che si piega di un’unità sotto il colpo. Allontanando la fiamma la cera si rapprende: le lettere tornano dritte con un piccolo assestamento, le colature si fermano dove sono e, dopo qualche secondo al freddo, rientrano piano nella parola, così la cera non si accumula mai. In alto a destra lo stato della cera: set, softening, melting. Se il puntatore non c’è, una fiamma passa da sola lungo la parola.

Come funziona

La parola misurata in un canvas nascosto

La parola si scrive in un canvas grande quanto il disegno (1000 per 600 unità), una lettera alla volta, alla misura che la fa larga 800. Per ogni colonna si cerca il punto più basso dove c’è cera spessa almeno 10 unità: lì può nascere una colatura. Le lettere SVG si mettono negli stessi posti, così le colature partono proprio dal loro bordo.

Un filtro solo per la cera

Lettere, colature, gocce e pozze stanno in un gruppo SVG con un filtro: una sfocatura e una soglia sull’alfa le saldano in una massa sola (il collo della colatura si raccorda alla lettera da solo), poi la stessa forma sfocata fa da rilievo per una luce diffusa, che dà il volume, e per una luce speculare puntiforme, che è il lucido e sta sulla fiamma. Sotto, un’ombra calda sfocata e spostata in basso.

Il calore

Ogni lettera ha il suo calore, che va verso la vicinanza della fiamma: sale piano e scende ancora più piano. Il calore muove l’asse SOFT e il peso di Fraunces, la tinta da avorio ad ambra chiaro e una molla che affloscia la lettera sulla riga; quando la cera si raffredda la molla la riporta dritta con un assestamento di un’unità.

Le colature e le gocce

Sopra una soglia di calore nascono colature a caso nelle colonne vicine alla fiamma, distanti almeno 22 unità l’una dall’altra. Ognuna scende con una velocità viscosa che cresce col calore e con la lunghezza; passata la sua misura il collo si stringe in un terzo di secondo e la goccia cade con la gravità, allungandosi, e diventa una pozza sulla mensola che si allarga con una molla. La mensola si piega dove cade la goccia e torna dritta.

Il ritorno nello stampo

Una colatura fredda da RECAST secondi si ritira piano dentro la lettera, e anche le pozze vecchie si restringono: la demo può girare per ore senza che la cera si accumuli. Le colature sono al massimo MAX_DRIPS.

La fiamma

La fiamma è un tracciato ridisegnato a ogni fotogramma: trema da sola, e la sua punta resta indietro rispetto al movimento su una molla. Ha un cuore chiaro, un alone ambra largo e porta con sé la luce del lucido. Senza il puntatore vero per più di 2,2 secondi la guida una fiamma finta che passa lungo la parola.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORD`	script.js	`'Ember'`	La parola di cera: corta, sta in una riga.
`WEIGHT`	script.js	`600`	Il peso della cera fredda (Fraunces va da 100 a 900).
`SWELL`	script.js	`60`	Quanto peso prende una lettera calda.
`HEAT_RADIUS`	script.js	`200`	Fin dove arriva il calore della fiamma, in unità del disegno largo 1000.
`MELT_SPEED`	script.js	`1`	Quanto in fretta la cera si scalda e cola.
`DRIP_RATE`	script.js	`0.5`	Quante colature nascono al secondo da una lettera calda.
`MAX_DRIPS`	script.js	`12`	Quante colature al massimo sulla parola.
`DROP_CHANCE`	script.js	`0.5`	Quanto spesso una colatura lunga lascia cadere la goccia (0 mai, 1 sempre).
`FLAME_SIZE`	script.js	`1`	La misura della fiamma.
`GLOSS`	script.js	`0.55`	Quanto brilla il lucido della cera.
`RECAST`	script.js	`6`	Dopo quanti secondi al freddo una colatura torna dentro la lettera (0 mai).

Provali nel Playground

Quando usarla

Come apertura di un laboratorio di candele, di una profumeria o di una casa di fragranze, di un ristorante a lume di candela, di una cioccolateria o di una pasticceria (la cera diventa glassa), di un evento d’autunno; ovunque una parola sola deve sembrare fatta di una materia vera e rispondere al calore della mano.

Sul telefono

Uguale col dito: trascinando la fiamma segue il dito, e senza dito passa da sola lungo la parola. La parola sta nel 92% della larghezza e la scena si misura anche sull’altezza, così sta nella casella. Sopra la demo il dito muove la fiamma e non scorre la pagina.

Con il movimento ridotto

La parola di cera compare in dissolvenza già colata, con cinque colature e una pozza ferme; la fiamma non c’è, niente si muove e lo stato resta «set».

Trappole

Fraunces con l’ottica piccola (opsz basso) è più larga: il canvas che misura usa l’ottica automatica, quindi anche le lettere SVG devono avere opsz 144, se no si sovrappongono e le colature partono dal vuoto.
La sfocatura del filtro cancella le aste sottili della E con l’ottica grande: con 3,2 unità la E restava a pezzi, con 2,2 e la soglia 22/-8 resta intera.
Con le colature che non tornano mai indietro, dopo un minuto la parola è una tenda: le colature fredde da qualche secondo vanno ritirate piano, e il numero va tenuto basso.
Il passo del giro va limitato a un trentesimo di secondo: nel browser lento la cera scende più piano, non a scatti.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 10 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 24 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.