La fabbrica di caramelle

SVGGSAP, Solo CSSImpegnativaPeso compresso: Demo 14 KBGSAP 28 KBGratisScarica lo zip

Una piccola catena di montaggio vista di fronte, tutta in SVG: la pentola di rame versa lo zucchero colorato negli stampi, il nastro li porta alla pressa che le sforma, un braccio le avvolge nella carta torcendo le estremità e un getto d'aria le soffia in un barattolo che si riempie. Un contatore conta le caramelle; un clic cambia gusto.

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>La fabbrica di caramelle</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="banco" data-banco>
    <header class="testo">
      <p class="marchio">Humbug &amp; Daughters Candy Works</p>
      <h1 class="titolo">Poured, pressed,<br>twisted shut.</h1>
      <p class="frase">Boiled sugar from the copper pot, pressed in steel moulds and wrapped by a very patient arm. One flavour at a time, one jar at a time.</p>
      <button class="gusto" type="button" data-gusto>
        <span class="gusto__fondo" aria-hidden="true"></span>
        <span class="gusto__scritta">Next flavour</span>
      </button>
      <p class="ora" aria-live="polite"><span class="ora__etichetta">Now pouring</span> <span class="ora__nome" data-ora>Strawberry</span></p>
    </header>

    <div class="palco" data-palco>
      <svg class="scena" data-scena viewBox="0 40 960 540" preserveAspectRatio="xMidYMid meet" role="img" aria-label="A small candy factory seen from the front: a copper pot pours coloured sugar into moulds on a conveyor belt, a press pops the candies out, an arm wraps them in twisted paper and a puff of air blows them into a jar that fills up. Click to change the flavour.">
        <defs>
          <linearGradient id="g-rame" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" style="stop-color: var(--rame-scuro)" />
            <stop offset="0.35" style="stop-color: var(--rame-chiaro)" />
            <stop offset="1" style="stop-color: var(--rame-scuro)" />
          </linearGradient>
          <linearGradient id="g-acciaio" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" style="stop-color: var(--acciaio-chiaro)" />
            <stop offset="1" style="stop-color: var(--acciaio)" />
          </linearGradient>
          <clipPath id="c-incavo"><path d="M-30 0A30 16 0 0 0 30 0Z" /></clipPath>
          <clipPath id="c-cifre" data-finestre></clipPath>
        </defs>

        <!-- il pavimento -->
        <rect class="pavimento" x="0" y="556" width="960" height="30" />
        <path class="piastrelle" d="M120 556V586M260 556V586M400 556V586M540 556V586M680 556V586M820 556V586" />

        <!-- la trave in alto e i suoi due pali -->
        <g data-entra="trave">
          <rect class="palo" x="48" y="134" width="14" height="422" rx="3" />
          <rect class="palo" x="736" y="134" width="14" height="422" rx="3" />
          <rect class="trave" x="36" y="118" width="726" height="16" rx="3" />
          <path class="bulloni" d="M60 126h.1M200 126h.1M340 126h.1M480 126h.1M620 126h.1M740 126h.1" />
        </g>

        <!-- il contatore appeso al muro -->
        <g data-entra="contatore">
          <path class="catenella" d="M800 40V72M920 40V72" />
          <rect class="contatore" x="776" y="70" width="168" height="94" rx="10" />
          <text class="contatore__etichetta" x="860" y="94">WRAPPED TODAY</text>
          <g data-finestre-disegno></g>
          <g clip-path="url(#c-cifre)"><g data-cifre></g></g>
        </g>

        <!-- il tubo dello zucchero e la sua valvola -->
        <g data-entra="tubo">
          <path class="tubo" d="M-10 150H92Q104 150 104 162V176" />
          <path class="tubo-dentro" data-flusso d="M-10 150H92Q104 150 104 162V176" />
          <rect class="tubo-bocca" x="96" y="172" width="16" height="8" rx="2" />
          <g data-valvola>
            <circle class="valvola" cx="50" cy="150" r="14" />
            <path class="valvola-raggi" d="M50 136V164M36 150H64" />
            <circle class="valvola-mozzo" cx="50" cy="150" r="4" />
          </g>
          <circle class="goccia" data-goccia cx="104" cy="180" r="4" opacity="0" />
        </g>

        <!-- la pentola di rame: appesa alla trave, si inclina sul perno -->
        <g data-entra="pentola">
          <rect class="asta" x="146" y="134" width="8" height="116" />
          <g data-ingranaggi-pentola></g>
          <g data-vapore></g>
          <g data-pentola>
            <g data-pentola-scossa>
              <path class="pentola" fill="url(#g-rame)" d="M-56 -26L56 -26C56 30 30 46 0 46C-30 46 -56 30 -56 -26Z" />
              <path class="pentola-riga" d="M-50 4H50M-40 26H40" />
              <ellipse class="sciroppo-pentola" data-sciroppo-pentola cx="0" cy="-34" rx="54" ry="4" />
              <rect class="pentola-orlo" x="-60" y="-34" width="120" height="9" rx="4" />
              <path class="pentola-becco" d="M54 -34L76 -43L78 -36L58 -25Z" />
              <path class="pentola-manico" d="M-60 -18Q-74 -18 -74 -6Q-74 6 -58 6" />
              <circle class="perno" cx="0" cy="0" r="9" />
              <circle class="perno-dentro" cx="0" cy="0" r="3" />
            </g>
          </g>
          <path class="colata" data-colata d="" />
          <path class="colata-luce" data-colata-luce d="" />
        </g>

        <!-- la pressa: la ruota a manovella e la biella spingono giù il pistone -->
        <g data-entra="pressa">
          <rect class="guida" x="328" y="200" width="6" height="150" rx="2" />
          <rect class="guida" x="406" y="200" width="6" height="150" rx="2" />
          <g data-pistone>
            <rect class="stelo" data-stelo x="363" y="260" width="14" height="60" />
            <rect class="pistone" x="334" y="0" width="72" height="26" rx="4" data-testa />
          </g>
          <rect class="scatola" x="318" y="134" width="108" height="70" rx="6" />
          <path class="biella" data-biella d="" />
          <g data-manovella></g>
          <g data-pignone></g>
        </g>

        <!-- il nastro trasportatore -->
        <g data-entra="nastro">
          <rect class="gamba" x="112" y="444" width="12" height="112" />
          <rect class="gamba" x="440" y="444" width="12" height="112" />
          <rect class="gamba" x="694" y="444" width="12" height="112" />
          <path class="traverso" d="M118 520L446 470M446 520L700 470" />
          <rect class="motore" x="22" y="486" width="64" height="44" rx="6" />
          <path class="catena" data-catena d="M82 444L52 494M94 436L66 506" />
          <g data-ruota-motore></g>
          <rect class="nastro" x="68" y="420" width="692" height="24" rx="12" />
          <path class="nastro-righe" data-righe-su d="M80 421.5H748" />
          <path class="nastro-righe" data-righe-giu d="M80 442.5H748" />
          <g data-rulli></g>
          <g class="cartellini">
            <path class="cartellino-filo" d="M206 444V452M234 444V452M354 444V452M386 444V452M506 444V452M534 444V452M656 444V452M684 444V452" />
            <rect class="cartellino" x="190" y="452" width="60" height="18" rx="4" /><text class="cartellino-testo" x="220" y="465">POUR</text>
            <rect class="cartellino" x="340" y="452" width="60" height="18" rx="4" /><text class="cartellino-testo" x="370" y="465">PRESS</text>
            <rect class="cartellino" x="490" y="452" width="60" height="18" rx="4" /><text class="cartellino-testo" x="520" y="465">WRAP</text>
            <rect class="cartellino" x="640" y="452" width="60" height="18" rx="4" /><text class="cartellino-testo" x="670" y="465">BLOW</text>
          </g>
        </g>

        <!-- gli stampi e le caramelle sul nastro -->
        <g data-stampi></g>
        <g data-caramelle></g>

        <!-- il braccio che avvolge -->
        <g data-entra="braccio">
          <rect class="manicotto" x="508" y="134" width="24" height="112" rx="3" />
          <g data-cremagliera-ruota></g>
          <g data-braccio>
            <rect class="stelo" data-braccio-stelo x="513" y="236" width="14" height="40" />
            <g data-mano>
              <path class="dito" data-dito-s d="" />
              <path class="dito" data-dito-d d="" />
              <rect class="mano" data-mano-rect x="456" y="0" width="128" height="12" rx="4" />
              <rect class="foglio" data-foglio x="462" y="0" width="116" height="4" rx="1" />
            </g>
          </g>
        </g>

        <!-- l'ugello dell'aria -->
        <g data-entra="ugello">
          <path class="tubo" d="M634 134V328Q634 384 598 384" />
          <g data-ugello>
            <path class="ugello" d="M592 376L612 379V389L592 392Z" />
          </g>
          <g data-aria></g>
        </g>

        <!-- il barattolo -->
        <ellipse class="ombra" data-ombra-barattolo cx="860" cy="556" rx="76" ry="6" />
        <g data-barattolo>
          <g data-barattolo-dentro>
            <path class="vetro-dietro" d="M-62 -128Q-70 -128 -70 -116V-12Q-70 0 -58 0H58Q70 0 70 -12V-116Q70 -128 62 -128Z" />
            <g data-pila></g>
          </g>
          <path class="vetro" d="M-62 -128Q-70 -128 -70 -116V-12Q-70 0 -58 0H58Q70 0 70 -12V-116Q70 -128 62 -128Z" />
          <path class="vetro-luce" d="M-56 -108V-22M-46 -112V-92M54 -100V-40" />
          <rect class="collo" x="-58" y="-140" width="116" height="13" rx="4" />
          <rect class="etichetta" x="-40" y="-120" width="80" height="18" rx="3" />
          <text class="etichetta-testo" x="0" y="-107">H&amp;D MIXED</text>
          <g data-coperchio>
            <rect class="coperchio" x="-63" y="-153" width="126" height="15" rx="5" />
            <rect class="coperchio-pomo" x="-14" y="-162" width="28" height="10" rx="4" />
          </g>
        </g>

        <!-- le caramelle in volo -->
        <g data-volo></g>
      </svg>
    </div>
  </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.

39 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 fabbrica di caramelle» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

All'apertura la trave cala dall'alto, il nastro si srotola da sinistra, il tubo entra di lato, il contatore scende dondolando sulle sue catenelle e le quattro macchine (pentola, pressa, braccio e ugello) piombano al loro posto con un rimbalzo. Poi la catena parte e lavora a passi: il nastro avanza di una stazione con i rulli e la ruota del motore che girano, gli stampi si fermano dondolando appena, e tutte le stazioni lavorano insieme. La pentola di rame si inclina sul perno (i suoi due ingranaggi girano) e versa un filo di sciroppo che riempie l'incavo dello stampo, poi torna su con un assestamento e dal tubo cade una goccia per riempirla; il vapore sale sempre. La pressa è una ruota dentata a manovella con la biella: a ogni passo fa un giro, il pistone scende, schiaccia lo stampo e la caramella salta fuori con una capriola e atterra con un rimbalzo. Il braccio scende col foglio di carta, la caramella si avvolge, due pinze si chiudono sulle estremità e le torcono, poi si riaprono e il braccio risale con un foglio nuovo. L'ugello soffia (sbuffi e righe d'aria) e la caramella vola in arco dentro il barattolo, che trema un poco a ogni arrivo. Quando il barattolo è pieno il coperchio ci cade sopra, il barattolo se ne va scivolando e ne cade dall'alto uno vuoto. Il contatore WRAPPED TODAY fa scorrere le sue cifre a ogni caramella. Un clic sulla scena o sul pulsante «Next flavour» cambia gusto (Strawberry, Lemon, Mint, Blueberry, Orange, Grape): la valvola gira, la pentola sobbalza, lo sciroppo nel tubo e nella pentola cambia colore, e da lì in poi le caramelle nascono col gusto nuovo, così il barattolo si riempie di colori diversi. Testi della fabbrica inventata Humbug & Daughters.

Come funziona

Un orologio e una storia di un passo

Tutto nasce da un numero solo: un tween di GSAP che va da 0 alla durata di un barattolo intero e si ripete, più un contatore dei giri. Da lì si ricava il passo n (un intero che cresce sempre) e il tempo τ dentro il passo, da 0 a 2,6 secondi; PASSO stira la stessa storia. Una funzione seg(τ, a, b, curva) dice a che punto è ogni movimento: 0 prima di a, 1 dopo b, in mezzo con una curva di GSAP. Il disegno di ogni fotogramma, nel ticker di GSAP, legge solo n e τ.

Stampi che sanno dove sono

Ogni stampo ha un numero m; nel passo n lavora alla stazione n − m (0 la pentola, 1 la pressa, 2 il braccio, 3 l'ugello). Da quel numero e da τ si ricava tutto: quanto è pieno, se la caramella è già saltata fuori, quanto è incartata, se è in volo. Le stazioni prima sono già fatte, quelle dopo non ancora. Sei gruppi SVG bastano: lo stampo m usa il gruppo m mod 6, e quelli che entrano o escono dal nastro ruotano intorno al rullo e svaniscono.

La pressa a manovella

La ruota dentata fa un giro intero a ogni passo con una curva power2.inOut, così il punto più basso cade a metà. Il perno della manovella sta a (r·sin θ, −r·cos θ) e il pistone, che scorre in verticale, sta più in basso di √(L² − x²): la biella è lunga L e x è quanto il perno è fuori asse. Quando il pistone tocca, lo stampo si schiaccia; poi la caramella salta con un arco sin(π·p) e ruota di 180° intorno al suo centro, dalla cupola in giù dentro l'incavo alla cupola in su.

La carta e le estremità torte

La caramella incartata è una forma sola disegnata da due numeri: w (0 il foglio piatto sopra la cupola, 1 il cuscino chiuso) e tw (la torsione). Il foglio si allunga verso il basso fino al nastro, le code nascono dai lati, e torcendo il collo si stringe mentre la punta si allarga e si chiude due volte (|cos 2π·tw|), con le pieghe che scorrono. La cupola sotto svanisce quando la carta l'ha coperta.

Il barattolo e il clic

La caramella vola in una parabola dall'ugello al suo posto nel barattolo e, quando ha passato il bordo, passa dal livello di sopra a quello dentro il vetro. I posti sono a coppie sfalsate, ognuno col suo angolo. All'ultimo posto il coperchio cade con bounce.out, il barattolo scivola via e al passo dopo ne cade uno vuoto: è anche la fine del giro, che ricomincia identico. Il clic cambia il gusto di oggi: ogni stampo prende il gusto che c'è quando la pentola comincia a versarci dentro, e la scossa della pentola va su un gruppo figlio, perché il gruppo esterno è riscritto a ogni fotogramma.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`PASSO`	script.js	`2.6`	Secondi per ogni passo del nastro; tutte le stazioni lavorano insieme.
`CARAMELLE_PER_BARATTOLO`	script.js	`6`	Caramelle che riempiono un barattolo prima che si chiuda e se ne vada.
`INCLINAZIONE`	script.js	`38`	Gradi di cui si inclina la pentola per versare.
`SALTO`	script.js	`34`	Quanto salta la caramella quando la pressa la sforma.
`ARCO`	script.js	`150`	L'altezza dell'arco della caramella soffiata nel barattolo.
`CONTATORE_INIZIO`	script.js	`48210`	Le caramelle già incartate oggi: il numero da cui parte il contatore.
`--accento, --rame, --nastro`	style.css	`#E2446C, #D9824B, #4A3F59`	Il pulsante e il coperchio, la pentola di rame, il nastro trasportatore. I gusti stanno in GUSTI dentro script.js.

Provali nel Playground

Quando usarla

Per pasticcerie, negozi di dolciumi, marchi di caramelle e cioccolato, laboratori artigianali e pagine che raccontano come si fa un prodotto: una scena allegra che spiega tutta la lavorazione in pochi secondi e invita a toccarla.

Sul telefono

Il testo della fabbrica va sopra e la scena sotto, più piccola ma uguale: stessa pentola, stessa pressa, stesso braccio, stesso barattolo. Si cambia gusto toccando la scena o il pulsante.

Con il movimento ridotto

La catena è ferma a metà di un passo, con la pentola che versa, il pistone giù, una caramella incartata e una in volo sopra il barattolo mezzo pieno, e compare in dissolvenza; il clic cambia gusto: la scritta svanisce e ricompare, lo sciroppo cambia colore, niente si sposta.

Trappole

Il nastro, nel passo n, porta gli stampi dalla stazione n − m − 1 alla n − m: scrivendo n invece di n − 1 tutto è avanti di una stazione, e lo stampo arriva alla pressa già con la caramella incartata.
La caramella soffiata deve passare nel livello dentro il vetro solo quando ha già superato il bordo: prima verrebbe coperta dal vetro mentre è ancora fuori, dopo passerebbe davanti al vetro.
La scossa della pentola al clic va su un gruppo figlio: quello esterno ha il transform scritto a ogni fotogramma per l'inclinazione, e GSAP lo cancellerebbe.
Il contatore scorre in avanti anche da 9 a 0: ogni colonna ha undici cifre (0-9 e di nuovo 0), si va a 10 e alla fine si torna a 0 senza che si veda.
Il contatore cambia a ogni caramella, quindi l'immagine non torna mai identica: il giro intero (un barattolo) dura CARAMELLE_PER_BARATTOLO × PASSO secondi.

Librerie

GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.

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

Collaudo

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