Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
La macchina della colazione
Scorri dentro l’anteprima
Una reazione a catena montata su un pannello forato, raccontata dallo scroll: un interruttore alza un cancelletto, una biglia scende per tre rampe e butta giù una fila di domino, l’ultimo schiaccia un righello che lancia una pallina in un imbuto di vetro, la pallina finisce in un bicchiere di carta che abbassa la leva del tostapane, e due fette volano nella rastrelliera. La telecamera segue ogni pezzo e alla fine si allontana sulla macchina intera, con il percorso che si disegna.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The breakfast machine</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the header of the made-up kit maker -->
<header class="testata">
<p class="marchio">Domino <span>&</span> Crumb</p>
<a class="testata__link" href="#"><span>Shop the kits</span></a>
</header>
<main>
<!-- the run: a tall section with a still stage; scrolling sets the machine off and the camera follows it -->
<section class="corsa" data-corsa>
<div class="palco" data-palco>
<svg class="mondo" data-mondo aria-hidden="true"></svg>
<!-- the opening, over the empty pegboard on the left -->
<div class="apertura" data-apertura>
<p class="apertura__etichetta" data-entra>Chain reaction kits for the kitchen table</p>
<h1 class="apertura__titolo">
<span class="riga"><span data-riga>Breakfast,</span></span>
<span class="riga"><span data-riga>the long</span></span>
<span class="riga"><span data-riga>way <em>round.</em></span></span>
</h1>
<p class="apertura__testo" data-entra>A marble, a row of dominoes, a ruler, a funnel, a paper cup and a toaster. Flip the switch and watch.</p>
</div>
<p class="cenno" data-cenno>
Scroll to flip the switch
<svg viewBox="0 0 24 32" aria-hidden="true"><path d="M12 3V27M4 19L12 28L20 19" /></svg>
</p>
<!-- one caption for every part of the machine -->
<div class="didascalie" data-didascalie>
<article class="didascalia">
<h2 class="didascalia__nome"><span>The switch</span></h2>
<p class="didascalia__testo"><span>One flick, and a string lifts the gate.</span></p>
</article>
<article class="didascalia">
<h2 class="didascalia__nome"><span>Three ramps</span></h2>
<p class="didascalia__testo"><span>A glass marble, picking up speed at every turn.</span></p>
</article>
<article class="didascalia">
<h2 class="didascalia__nome"><span data-quante>Ten dominoes</span></h2>
<p class="didascalia__testo"><span>Each one leans on the next, all the way down the shelf.</span></p>
</article>
<article class="didascalia">
<h2 class="didascalia__nome"><span>The ruler seesaw</span></h2>
<p class="didascalia__testo"><span>One end goes down, and up goes the ball.</span></p>
</article>
<article class="didascalia">
<h2 class="didascalia__nome"><span>The glass funnel</span></h2>
<p class="didascalia__testo"><span>Round and round, then down the tube.</span></p>
</article>
<article class="didascalia">
<h2 class="didascalia__nome"><span>The paper cup</span></h2>
<p class="didascalia__testo"><span>Just heavy enough to press the lever.</span></p>
</article>
<article class="didascalia">
<h2 class="didascalia__nome"><span>The toaster</span></h2>
<p class="didascalia__testo"><span>Two slices, golden in a few seconds of scroll.</span></p>
</article>
<article class="didascalia">
<h2 class="didascalia__nome"><span>Breakfast</span></h2>
<p class="didascalia__testo"><span>Straight into the rack, still warm.</span></p>
</article>
</div>
<!-- the stopwatch: how long the machine has been running -->
<aside class="cronometro" data-cronometro aria-label="Run time">
<p class="cronometro__nome">Run time</p>
<p class="cronometro__tempo"><span class="contatore" data-contatore></span><span class="cronometro__unita">s</span></p>
</aside>
<!-- the close, once the camera pulls back over the whole machine -->
<div class="chiusa" data-chiusa>
<p class="chiusa__etichetta" data-chiude>The Breakfast Machine kit</p>
<h2 class="chiusa__titolo">
<span class="riga"><span data-chiude-riga>Toast’s <em>up.</em></span></span>
</h2>
<p class="chiusa__testo" data-chiude>Forty-two parts that fit on any pegboard. Toaster and bread not included.</p>
<a class="pulsante" href="#" data-chiude><span class="pulsante__fondo" aria-hidden="true"></span><span class="pulsante__testo">Build the machine</span></a>
</div>
</div>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.
62 valori da cambiare
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 macchina della colazione» da Animorio e adattala al mio sitoCosa fa
La pagina di un negozio inventato di kit per reazioni a catena, Domino & Crumb. In apertura, su un pannello forato color nocciola, c’è il titolo grande «Breakfast, the long way round.» e accanto l’inizio della macchina: una placca con l’interruttore START, una biglia di vetro blu che cade dall’alto sulla prima rampa, rimbalza e si ferma contro un cancelletto giallo, dove ogni tanto freme impaziente. Scorrendo il palco resta fermo e la telecamera segue la corsa. La leva dell’interruttore scatta con un rimbalzo e tira uno spago che, passando su un chiodo, alza il cancelletto. La biglia rotola giù per tre rampe di legno a zig zag, sempre più veloce, girando su sé stessa; a ogni curva sbatte contro un paletto, cade sulla rampa sotto e fa un piccolo salto. In fondo salta su una mensola e urta il primo di una fila di domino: cadono uno dopo l’altro, ognuno appoggiato al successivo, e l’ultimo si posa su un righello giallo in bilico su una gomma rosa. Il righello si abbassa di colpo e lancia una pallina rossa in un arco alto fino a un imbuto di vetro, dove la pallina gira in tondo, sempre più stretta, e scende nel tubo. Il tubo la lascia cadere in un bicchiere di carta a righe appeso a una carrucola: il bicchiere scende (il contrappeso d’ottone sale e la ruota gira), si posa sulla leva del tostapane e la spinge giù. Le fessure si accendono d’arancione, la ghiera torna indietro, il pane diventa dorato; poi il din: la leva scatta su, il bicchiere salta e ricade, e le due fette volano in alto facendo due giri ciascuna, fino alla rastrelliera, dove atterrano schiacciandosi e tornando su con un elastico, con le briciole che schizzano e il vapore che sale. In alto a destra un cronometro meccanico conta il tempo della corsa; in basso a sinistra una didascalia per ogni pezzo sale riga per riga. Alla fine la telecamera si allontana e mostra tutta la macchina, un tratteggio disegna il percorso dalla biglia alle fette, e arriva la chiusura «Toast’s up.» con il pulsante. Ogni urto fa tremare un poco la scena. Toccando o passando sopra l’interruttore, la biglia, il bicchiere, il tostapane o la tazza, il pezzo si schiaccia e torna su con un elastico.
Come funziona
Un pannello e una telecamera
La sezione è alta MACHINE_LENGTH+1 schermi e dentro c’è un palco sticky alto 100lvh con un solo SVG, con il viewBox grande quanto il palco in pixel. Tutta la macchina sta in un gruppo, disegnato in unità del mondo (il pannello è largo più di tremila unità). La telecamera è il transform di quel gruppo: translate e scale calcolati da un centro e da un riquadro che deve stare sullo schermo.
Il tempo come unico numero
Una timeline legata allo scorrimento con scrub muove un solo numero, t, da 0 alla fine della corsa; le didascalie, il cronometro e la chiusura sono tween nella stessa timeline. Ogni pezzo della macchina si calcola da t con piccole tabelle di chiavi [tempo, valore, ease] lette da una funzione traccia(), con le ease di GSAP prese da gsap.parseEase. Così tornando su la macchina va all’indietro esattamente.
Domino che si appoggiano
Ogni domino cade da solo (un angolo che cresce come power2.in), ma non può attraversare quello davanti: partendo dall’ultimo, una ricerca per dimezzamenti trova l’angolo a cui il suo spigolo in alto tocca la faccia del domino successivo già inclinato, e l’ultimo tocca il righello. Il domino dopo parte nel momento in cui quello prima lo raggiunge, quindi con 8 o 20 domino la fila funziona sempre.
Biglia, pallina e fette
La biglia segue una lista di tratti: rotolare su una rampa (la quota viene dalla retta della rampa, spostata del raggio), volare, saltare. Gira di x diviso il raggio, così rotola davvero. La pallina gira nell’imbuto su una spirale che si stringe e poi segue il tubo con getPointAtLength; il bicchiere e il contrappeso si muovono insieme, la leva scende solo dopo il contatto. Le fette volano con x lineare e y in due tratti, e atterrano con uno schiacciamento elastico.
Urti in tempo reale
Quando lo scorrimento in avanti passa il momento di un urto, parte un tween vero che fa tremare la telecamera per mezzo secondo, e all’atterraggio delle fette nove briciole schizzano con un arco. Il pane diventa dorato con color-mix e una variabile --k; il percorso finale è un tratteggio scoperto da una maschera che si disegna con stroke-dashoffset.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
MACHINE_LENGTH | script.js | 10 | Quanti schermi di scorrimento dura la corsa intera. |
DOMINOES | script.js | 10 | Quanti domino sulla mensola: riempiono sempre la stessa fila, più fitti o più radi. |
BOUNCE | script.js | 1 | Quanto rimbalzano e si schiacciano i pezzi quando atterrano. |
FLIPS | script.js | 2 | Quanti giri fa ogni fetta in aria. |
SHAKE | script.js | 1 | Quanto trema la telecamera a ogni urto (0 la tiene ferma). |
RUN_TIME | script.js | 14.6 | I secondi che segna il cronometro quando le fette atterrano. |
ROUTE | script.js | true | Alla fine, disegnare il percorso tratteggiato sopra la macchina intera. |
--biglia | style.css | #2f7de1 | Il blu della biglia; accanto ci sono i colori del pannello, del legno, dei domino, del righello, della pallina, del vetro, del tostapane e del pane. |
Quando usarla
Per raccontare un processo fatto di passaggi che si passano il testimone: come funziona un prodotto, un’automazione, una catena di montaggio, l’onboarding di un servizio, la pagina di un negozio di giochi o di kit scientifici, una colazione o un brunch, oppure una pagina «chi siamo» che vuole far sorridere.
Sul telefono
La stessa corsa con le misure adattate: la telecamera tiene la stessa area di macchina, quindi sullo schermo stretto i pezzi sono un po’ più piccoli e la ripresa va un po’ più vicina ai bordi. In apertura il titolo sta in alto e l’inizio della macchina sotto. Alla fine la macchina intera è una striscia sopra la chiusura. Un tocco su un pezzo lo fa schiacciare e tornare su.
Con il movimento ridotto
Niente telecamera che viaggia, niente rotolamenti, niente tremolio né briciole e niente scorrimento morbido: il palco mostra un’immagine ferma per ogni momento della corsa (l’apertura, le rampe, i domino, l’imbuto, il bicchiere, il tostapane, le fette, la colazione, la macchina intera) e scorrendo la successiva arriva in dissolvenza, con la sua didascalia e il cronometro al suo numero.
Trappole
- L’ombra della pallina doveva sparire dentro l’imbuto con l’attributo opacity, ma la classe CSS dell’ombra ha già opacity e il CSS vince sull’attributo: l’ombra restava dentro il vetro. Si nasconde con style.display.
- Con le fette che restano giù finché la leva è giù, nello scatto della leva (che torna su prima del lancio) le fette saltavano di qualche unità. Dal din in poi restano in fondo finché non partono.
- Il cronometro con le colonne di cifre spostate in percentuale andava fuori posto: translateY in percento si riferisce all’altezza della colonna intera (undici cifre), non di una. Si sposta in em, una cifra alla volta.
- Con il dezoom finale il motivo dei fori del pannello, piccolissimo, faceva un moiré: l’opacità dei fori scende quando la telecamera si allontana.
- Gli urti in tempo reale partono solo quando lo scorrimento passa il loro momento in avanti e con un salto piccolo: aprendo la pagina già scesa, o tornando su, non tremano e non schizzano briciole tutte insieme.
Librerie
GSAP 3.15.0, Lenis 1.3.26, Anybody (font variabile) 5.3.0, JetBrains Mono (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 20 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.
Collaudo
Provata il 13 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.
