Il logo della gelateria

Intro, TestoGSAPImpegnativaPeso compresso: Demo 11 KBGSAP 28 KBGratisScarica lo zip

Intro del logo di una gelateria artigianale inventata, Cremo, nello stile ricco: un cono di cialda sale nel suo porta-cono d’ottone, una pallina ci cade sopra e una sac à poche a strisce scrive il nome in gelato lucido e cremoso, lettera per lettera, con una riga di riccioli sotto. Poi i gusti salgono nel nome a strati, cioccolato, fragola, pistacchio e mango sotto il fiordilatte, piovono gli zuccherini, cade la ciliegina col picciolo che oscilla e una goccia cola per il caldo e viene ripresa.

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 gelato shop logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fredoka@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena" data-stage>
    <!-- the shop awning along the top -->
    <div class="tenda" aria-hidden="true"></div>
    <p class="marca"><span data-brand>Cremo</span> <span class="marca__dida">Small batch gelato</span></p>

    <h1 class="sr" data-title>Cremo</h1>
    <!-- everything is drawn in this svg by script.js: the cone in its holder, the scoop, the piped name, the curls,
         the sprinkles, the cherry, the drip and the piping bag -->
    <svg class="disegno" data-svg aria-hidden="true"></svg>

    <p class="motto" data-tagline>Churned every morning, scooped till late.</p>

    <button class="pillola" type="button" data-replay data-autoclic>
      <span class="pillola__scritta" data-testo="Replay">Replay</span>
    </button>
  </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.

37 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 della gelateria» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Il muro rosa pesca di una gelateria, sotto una tenda a strisce menta e crema. Dal bancone sale un cono di cialda, con la trama a rombi e la luce da sinistra, e si infila nel suo porta-cono d’ottone; una pallina di gelato ci cade sopra e si assesta con la gonna ondulata. Entra una sac à poche a strisce rosa col beccuccio a stella cromato e scrive il nome della gelateria, Cremo, lungo una riga che ondeggia: il gelato esce lucido e cremoso, ogni lettera arriva alta e stretta e si posa con un elastico. Sotto, una riga di riccioli. La sac à poche se ne va e i gusti salgono nel nome a strati, dal basso: cioccolato, fragola, pistacchio e mango, col fiordilatte che resta in cima. Tutto affonda di un pixel sul cono, piovono gli zuccherini colorati che restano attaccati alla cima delle lettere, cade la ciliegina al centro, si schiaccia, fa un saltino e il picciolo con la foglia oscilla. Una goccia cola dal lato della pallina per il caldo e poi viene ripresa. Arrivano il motto e Replay; passando sulle lettere col puntatore, tremano come gelato.

Come funziona

Un solo svg, disegnato in pixel

Tutto è disegnato da script.js in un svg grande come la pagina: il bancone, il porta-cono, il cono con la griglia della cialda ritagliata dalla sua forma, la pallina, i riccioli, le lettere, gli zuccherini, la ciliegina e la sac à poche. Le misure vengono dalla grandezza del carattere, che si calcola dalla larghezza e dall’altezza della pagina, e al resize si ridisegna tutto e la timeline salta al punto dov’era.

Il gelato che esce dal beccuccio

Ogni lettera è un text a sé, sotto una maschera: una riga bianca molto spessa che ondeggia lungo il nome e si disegna con stroke-dashoffset. La punta della sac à poche segue il punto della riga con getPointAtLength, così il gelato compare proprio sotto il beccuccio; quando la punta passa sopra una lettera, la lettera arriva alta e stretta e si posa con elastic.out.

Lucido e cremoso con un filtro

Il gruppo del gelato ha un filtro svg: un poco di feTurbulence e feDisplacementMap ammorbidisce i bordi, una feGaussianBlur fa il rilievo, feSpecularLighting con una luce in alto a sinistra fa la lucentezza e feDiffuseLighting l’ombra sui fianchi; sotto, un’ombra calda spostata in basso.

I gusti a strati e gli zuccherini attaccati

Lettere, riccioli, pallina e goccia hanno lo stesso gradiente verticale: la timeline sposta i suoi stop e i gusti salgono dal basso uno dopo l’altro. Le lettere sono disegnate anche in un canvas nascosto: da lì si legge la cima di ogni colonna di pixel, ed è lì che cadono gli zuccherini e la ciliegina, così restano attaccati al gelato.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORD`	script.js	`'Cremo'`	Il nome della gelateria: corto, senza lettere che scendono sotto la riga.
`SPEED`	script.js	`1`	2 è il doppio più veloce, 0.5 la metà.
`PIPE_TIME`	script.js	`2.2`	In quanti secondi la sac à poche scrive il nome.
`LAYER_TIME`	script.js	`0.55`	In quanti secondi sale ogni gusto.
`SPRINKLES`	script.js	`46`	Quanti zuccherini sul computer (due terzi sul telefono).
`GLOSS`	script.js	`0.8`	Quanto è lucido il gelato.
`WAVE`	script.js	`0.12`	Quanto ondeggia la riga della sac à poche, in parte dell’altezza delle lettere.
`DRIP`	script.js	`1`	1 fa colare la goccia, 0 no.

Provali nel Playground

Quando usarla

Per l’apertura del sito di una gelateria, di una pasticceria, di una yogurteria o di un bar dei dolci, il caricamento di un marchio di cibo, la presentazione di un gusto nuovo.

Sul telefono

La stessa intro: il nome, il cono e la sac à poche sono più piccoli, gli zuccherini un po’ meno, e tutto sta fra la tenda e il tasto Replay.

Con il movimento ridotto

Niente cade e niente si muove: il logo compare già finito, coi gusti, gli zuccherini e la ciliegina, in dissolvenza; poi il tasto Replay.

Trappole

Gli zuccherini e la ciliegina devono stare sul gelato: le loro posizioni si leggono dalle lettere disegnate in un canvas nascosto, con lo stesso carattere e le stesse misure, dopo che il carattere è caricato.
La maschera che scopre il nome ha gli estremi piatti (stroke-linecap butt): con quelli tondi il gelato comparirebbe prima che il beccuccio ci arrivi.
Il filtro del gelato ha una regione in pixel attorno al logo: grande come tutta la pagina rallenterebbe ogni fotogramma sul telefono.
Replay compare solo a fine entrata: un clic a metà, anche quello del pilota automatico dell’anteprima, ricomincerebbe tutto.

Librerie

GSAP 3.15.0, Fredoka (font variabile) 5.3.0.

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

Collaudo

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