L'avatar smaltato

Avatar, Transizioni, SVGGSAP, CanvasImpegnativaPeso compresso: Demo 19 KBGSAP 28 KBGratisScarica lo zip

L'avatar del profilo di un'app per escursionisti, fatto come una spilla cloisonné: fili d'oro piegati in un disegno e smalti nelle celle fra i fili. Scegliendo un altro animale gli smalti scolano via, i fili d'oro si sollevano, si piegano e scivolano nel disegno nuovo e gli smalti nuovi colano dall'alto cella per cella, ancora crudi: chiari, granulosi, opachi. Salvare è la cottura: il gettone si arroventa dal bordo verso il centro e tremola nel calore, la polvere si fonde in vetro, si raffredda dal bordo e ne esce lucido, con una lucidatura che passa come un riflesso.

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 enamel avatar</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/lexend@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the avatar of a hiking club's app, made like a cloisonné pin in a round recess of the profile card.
         Each choice drains the enamels, bends the gold wires into the new drawing and runs the new enamels into
         its cells, still wet and matte; saving fires the token in the kiln, and it cools glossy. The token is
         drawn on the canvas; the choices under it are real radio buttons -->
    <section class="card" aria-label="Your avatar" data-card data-autoclic>
      <div class="card__coin">
        <span class="card__slot" aria-hidden="true"></span>
        <canvas class="card__canvas" aria-hidden="true" data-canvas></canvas>
        <button class="card__token" type="button" tabindex="-1" aria-label="Edit avatar" data-token></button>
      </div>

      <div class="card__body">
        <div class="rest" data-rest>
          <h2 class="rest__name">Maya Lindqvist</h2>
          <p class="rest__meta">@maya.lind · Trail crew</p>
          <button class="btn btn--line" type="button" data-edit>Edit avatar</button>
        </div>

        <form class="editor" data-editor>
          <fieldset class="editor__row" data-who>
            <legend class="sr">Picture</legend>
          </fieldset>
          <fieldset class="editor__row" data-tint>
            <legend class="sr">Colour</legend>
          </fieldset>
          <div class="editor__actions">
            <button class="btn btn--soft" type="button" data-cancel>Cancel</button>
            <button class="btn btn--ink" type="submit" data-save>
              <svg class="btn__tick" viewBox="0 0 24 24" aria-hidden="true" data-tick><path d="M5.5 12.6l4.1 4.1L18.6 7.4"/></svg>
              <span class="btn__label" data-save-text>Save</span>
            </button>
          </div>
        </form>
      </div>

      <p class="sr" aria-live="polite" data-live></p>
    </section>
  </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.

40 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 «L'avatar smaltato» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco una scheda bianca con un incavo rotondo e dentro un gettone largo 120 pixel fatto come una spilla cloisonné: una volpe di smalto su un fondo verde pino, con fili d'oro fra uno smalto e l'altro e un bordo d'oro. Sotto ci sono Maya Lindqvist, @maya.lind · Trail crew e il pulsante Edit avatar. Aprendo la pagina il gettone si fa davanti a te: prima la base d'oro nuda, poi i fili che si posano disegnando la volpe, poi gli smalti che colano dall'alto, il verde del fondo e poi le celle una dopo l'altra. Col mouse sopra, la luce sullo smalto e sull'oro si sposta verso il puntatore, come girando una spilla sotto la lampada. Edit avatar (o il gettone) apre le scelte: sei piccoli gettoni (le iniziali ML in un cerchio d'oro e cinque animali: volpe, gufo, orso, rana, gatto), sei colori di smalto, Cancel e Save. Scegliendo un altro animale gli smalti della volpe scolano via risalendo da dove erano entrati; i fili d'oro si sollevano, con una piccola ombra sotto, e si piegano e scivolano nel disegno nuovo, la piega che corre lungo ogni filo; quando si posano, gli smalti nuovi colano dall'alto e riempiono le celle una dopo l'altra, ognuna col suo fronte bagnato che ondeggia. Lo smalto appena messo è crudo: più chiaro, opaco e granuloso, senza la lucentezza del vetro. Un colore nuovo cola nel fondo sopra quello vecchio, e corre anche lungo i piccoli gettoni. Un clic sul gettone, con le scelte aperte, sceglie un animale e un colore a caso. Save è la cottura: il pulsante dice Saving…, il gettone si arroventa dal bordo verso il centro, rosso cupo, poi arancio, i fili d'oro brillano più chiari, la luce del forno si spande sulla scheda e il gettone tremola nel calore; intanto la polvere si fonde in vetro. Quando il salvataggio torna si raffredda, prima il bordo e per ultimo il centro, ne esce con i colori pieni e lucidi e una lucidatura passa in diagonale accendendo l'oro: il pulsante dice Saved con una spunta disegnata e la scheda torna al nome. Cancel rimette l'avatar salvato, già cotto. Le iniziali sono d'oro sugli smalti scuri e di smalto scuro bordato d'oro su quelli chiari.

Come funziona

Fili e celle da un disegno solo

Ogni illustrazione è scritta una volta, come tracciati SVG: le celle col loro smalto (le pareti) e i fili da soli. All'avvio ogni parete diventa un anello di 64 punti alla stessa distanza, presi con getPointAtLength da un path nascosto della pagina; un filo aperto diventa un anello che va e torna. Ogni cella sa dove la raggiunge lo smalto (il suo punto più vicino a un punto sopra il gettone) e quanto deve correre per riempirsi.

Le celle vere

Una cella si vede solo dove nessuna cella successiva le sta sopra: si ritaglia col suo tracciato e poi, per ogni cella successiva con la parete che la tocca, con «tutto tranne quella cella» (un quadrato grande col tracciato dentro, pari-dispari). I ritagli successivi si intersecano, quindi la sottrazione è esatta; i fili posati si nascondono allo stesso modo. I riflessi negli occhi non hanno parete e si posano sopra.

I fili che si piegano

Fra due disegni gli anelli si accoppiano per posto e grandezza, prima le coppie più vicine; l'anello nuovo si ruota (e se serve si rovescia) perché i suoi punti si allineino ai vecchi col minimo cammino. I punti vanno con power3.inOut, ma ognuno parte un poco dopo il precedente (LAG), così la piega corre lungo il filo, in BEND secondi. Sollevati, i fili fanno una piccola ombra e si vedono interi; posandosi passano in dissolvenza alla versione ritagliata. Un filo senza compagno si stringe nel suo centro e svanisce, uno nuovo cresce dal suo.

Lo smalto che cola

Gli smalti vecchi scolano tornando verso il punto da cui erano entrati; i nuovi colano dall'alto: ogni cella comincia quando il flusso la raggiunge (la sua distanza dall'alto diviso FLOW) e si riempie con una macchia che cresce dal punto d'entrata, col bordo che ondeggia su due seni e un filo chiaro come un bordo bagnato. Lo smalto appena messo è polvere cruda: più chiaro, opaco, con una grana fine di puntini chiari e scuri (GRAIN) e senza lucentezza. Un colore nuovo cola nel fondo sopra il vecchio.

La cottura

Save scalda il gettone in FIRE[0] secondi: il calore entra dal bordo (un gradiente radiale di undici tappe, ognuna col calore del suo raggio, dal rosso cupo all'arancio del forno), i fili d'oro brillano con un tratto in 'lighter', la luce si spande sulla scheda e il gettone tremola, ridisegnato in strisce di due pixel spostate di lato da due seni; intanto la polvere si fonde in vetro. Resta caldo finché il salvataggio non torna (qui uno finto di SAVING secondi), poi si raffredda in FIRE[1] secondi dal bordo al centro e una banda di luce corre in diagonale accendendo l'oro.

Scelte vere, tasti e anteprima

Animali e colori sono radio button veri con la loro aria-label in due fieldset; Edit avatar porta i tasti sull'animale scelto, le frecce cambiano scelta, Esc annulla, chiudendo la focalizzazione torna su Edit avatar, e una riga aria-live dice quando l'avatar si sta salvando, è salvato o le modifiche sono annullate. Tornando sull'avatar salvato quello che è ancora crudo torna cotto. Tutto gira sul ticker di GSAP solo mentre qualcosa si muove. Un clic da script (l'anteprima della libreria) racconta una piccola storia: apre, sceglie, salva, e di nuovo con altre scelte.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`INITIALS`	script.js	`'ML'`	Le lettere sul gettone quando non si sceglie un animale (le prime due).
`COLOURS`	script.js	`[['Midnight', '#24335c'], …]`	Gli smalti del fondo: nome e colore.
`SAVED`	script.js	`[1, 1]`	L'avatar salvato all'apertura: l'animale (0 = le iniziali) e il colore.
`BEND`	script.js	`0.5`	I secondi che i fili d'oro impiegano a piegarsi nel disegno nuovo.
`FLOW`	script.js	`170`	Quanto in fretta lo smalto cola nelle celle, in centesimi del gettone al secondo.
`GRAIN`	script.js	`0.4`	Quanto lo smalto crudo è granuloso e opaco prima della cottura (0 = liscio).
`FIRE`	script.js	`[0.7, 1.1]`	Il forno quando si salva: i secondi per arroventarsi e quelli per raffreddarsi.
`SAVING`	script.js	`0.9`	Quanto dura il salvataggio finto, in secondi (in un'app vera, quanto ci mette la richiesta).

Provali nel Playground

Quando usarla

Per il profilo di un'app o di una comunità, la scelta dell'avatar in una chat, in un gioco o in un club, le impostazioni dell'account di un servizio con avatar disegnati, un distintivo da collezionare, e in generale per una bozza che diventa definitiva salvando.

Sul telefono

La scheda è larga 352 pixel (meno su uno schermo più stretto) e alta 330, e i sei piccoli gettoni e i sei colori ci stanno a 390 (su uno schermo ancora più stretto si rimpiccioliscono un poco). Tutto funziona col tocco: un tocco sul gettone apre le scelte, o ne sceglie una a caso con le scelte aperte; la luce che segue il mouse sul telefono si sposta solo nel punto toccato.

Con il movimento ridotto

Niente fili che si piegano, niente smalto che cola, niente tremolio e niente lucidatura che corre: la faccia nuova compare in dissolvenza sopra la vecchia, il gettone si fa già fatto e la cottura è un bagliore arancio che si accende e si spegne in dissolvenza. Crudo e cotto si vedono lo stesso, la luce non segue il puntatore e le scelte si scambiano col nome con una dissolvenza.

Trappole

Disegnando tutti i fili sopra tutti gli smalti si vedevano i pezzi nascosti sotto le celle successive (la base delle orecchie della volpe le attraversava la testa): un filo posato si ritaglia come la sua cella, togliendo le celle successive; un filo sollevato si vede intero, e le due versioni passano in dissolvenza mentre si posa.
Riempiendo ogni cella in tutto il suo tracciato l'arancio della testa colava sulle guance prima che arrivasse il bianco, e toglierlo dopo era uno scatto: ogni cella si ritaglia sulla sua parte vera, il suo tracciato meno le celle successive con la parete, con ritagli pari-dispari uno dopo l'altro.
Scolare verso il fondo della cella e colare dall'alto erano due punti diversi: una scelta a metà colata faceva saltare lo smalto. Ora lo smalto scola tornando verso il punto da cui era entrato, quindi può invertirsi in qualunque momento.
I fili che se ne vanno si stringono in un punto, e un filo lungo zero con le punte tonde è un pallino d'oro: svaniscono a velocità doppia rispetto a quanto si stringono.
Tornando sull'avatar salvato dopo qualche modifica, Save non aveva niente da salvare e il gettone restava crudo: quando la bozza è di nuovo l'avatar salvato (scegliendo o con Cancel), quello che è ancora crudo torna al suo aspetto cotto, pezzo per pezzo.
La prima grana era fatta di puntini brillanti e sembrava smalto glitterato: lo smalto crudo è gessoso, un colore più chiaro e una grana fine di puntini tenui, uno per pixel, nei pixel del canvas.
Il fronte del calore faceva un anello scuro dove il bagliore era debole: l'opacità del bagliore cresce col calore alla potenza 1,3, e il suo colore più debole è un rosso caldo, non il nero.
Il canvas legge l'oro e il bagliore da :root, ma il Playground cambia le variabili dal vivo: un MutationObserver sullo style della radice rilegge i colori e ridisegna, e i piccoli gettoni usano var(--gold) nello stile, così bastano tre colori per un gettone d'argento.
Il video della scheda comincia circa 0,9 secondi dopo l'apertura: il gettone si fa in 1,6 secondi, così il video lo trova già fatto, e i suoi due clic mostrano un cambio e la cottura intera.

Librerie

GSAP 3.15.0, Lexend (font variabile) 5.3.0.

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

Collaudo

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