The breakfast machine

Scroll, SVG, PhysicsGSAPAdvancedCompressed weight: Demo 20 KBGSAP + ScrollTrigger 45 KBLenis 5.3 KBFreeDownload the zip

Scroll inside the preview

A chain reaction built on a pegboard and told by the scroll: a switch lifts a gate, a marble runs down three ramps and knocks over a row of dominoes, the last one slams a ruler that throws a ball into a glass funnel, the ball drops into a paper cup that presses the toaster’s lever, and two slices fly into the rack. The camera follows every part and in the end pulls back over the whole machine while the route draws itself.

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.

Download the zip

<!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>&amp;</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&rsquo;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

Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.

62 values to change

Open the Playground

Or ask Claude Code for it

With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:

Take “The breakfast machine” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The page of a made-up shop of chain reaction kits, Domino & Crumb. At the top, on a hazel pegboard, there is the big title «Breakfast, the long way round.» and next to it the start of the machine: a plate with the START switch, and a blue glass marble that drops from above onto the first ramp, bounces and stops against a yellow gate, where now and then it fidgets. As you scroll the stage holds still and the camera follows the run. The switch’s lever snaps over with a bounce and pulls a string that runs over a peg and lifts the gate. The marble rolls down three wooden ramps in a zigzag, faster and faster, spinning as it goes; at every turn it hits a post, drops onto the ramp below and makes a little hop. At the bottom it jumps onto a shelf and hits the first of a row of dominoes: they fall one after another, each one leaning on the next, and the last one lands on a yellow ruler balanced on a pink eraser. The ruler slams down and throws a red ball in a high arc to a glass funnel, where the ball goes round and round, tighter and tighter, and down the tube. The tube drops it into a striped paper cup hanging from a pulley: the cup goes down (the brass counterweight goes up and the wheel turns), lands on the toaster’s lever and pushes it down. The slots glow orange, the dial winds back, the bread turns golden; then the ding: the lever snaps up, the cup jumps and falls back, and the two slices fly high, turning twice each, all the way to the rack, where they land with a squash and spring back, crumbs flying and steam rising. At the top right a mechanical stopwatch counts the run time; at the bottom left a caption for every part rises line by line. In the end the camera pulls back over the whole machine, a dotted line draws the route from the marble to the toast, and the close «Toast’s up.» comes in with its button. Every hit shakes the scene a little. Touching or hovering over the switch, the marble, the cup, the toaster or the mug makes the part squash and spring back.

How it works

A pegboard and a camera

The section is MACHINE_LENGTH+1 screens tall and holds a sticky stage 100lvh tall with a single SVG whose viewBox is as big as the stage in pixels. The whole machine sits in one group, drawn in world units (the pegboard is over three thousand units wide). The camera is that group’s transform: a translate and a scale worked out from a centre and a box that has to fit on the screen.

Time as the only number

A timeline tied to the scroll with scrub moves a single number, t, from 0 to the end of the run; the captions, the stopwatch and the close are tweens in the same timeline. Every part of the machine is worked out from t with small tables of keys [time, value, ease] read by a traccia() function, using GSAP’s eases from gsap.parseEase. So scrolling back runs the machine exactly backwards.

Dominoes that lean

Each domino falls on its own (an angle growing like power2.in), but it can never go through the one in front: starting from the last, a search by halvings finds the angle at which its top corner touches the face of the next domino, already tilted, and the last one touches the ruler. The next domino starts at the moment the one before reaches it, so with 8 or 20 dominoes the row always works.

Marble, ball and toast

The marble follows a list of stretches: rolling on a ramp (its height comes from the ramp’s line, moved out by the radius), flying, hopping. It turns by x over the radius, so it really rolls. The ball goes round the funnel on a tightening spiral and then follows the tube with getPointAtLength; the cup and the counterweight move together, and the lever only goes down after contact. The slices fly with a straight x and a y in two halves, and land with an elastic squash.

Hits in real time

When the scroll passes a hit going forward, a real tween shakes the camera for half a second, and when the slices land nine crumbs fly out in an arc. The bread turns golden with color-mix and a --k variable; the final route is a dotted line uncovered by a mask drawn with stroke-dashoffset.

Values to change

Name	File	Default	What it changes
`MACHINE_LENGTH`	script.js	`10`	How many screens of scrolling the whole run lasts.
`DOMINOES`	script.js	`10`	How many dominoes on the shelf: they always fill the same row, closer or further apart.
`BOUNCE`	script.js	`1`	How much the parts bounce and squash when they land.
`FLIPS`	script.js	`2`	How many turns each slice makes in the air.
`SHAKE`	script.js	`1`	How hard the camera shakes at every hit (0 keeps it still).
`RUN_TIME`	script.js	`14.6`	The seconds the stopwatch reads when the toast lands.
`ROUTE`	script.js	`true`	At the end, draw the dotted route over the whole machine.
`--biglia`	style.css	`#2f7de1`	The marble’s blue; next to it are the colours of the pegboard, the wood, the dominoes, the ruler, the ball, the glass, the toaster and the bread.

Try them in the Playground

When to use it

To tell a process made of steps that hand over to each other: how a product works, an automation, an assembly line, the onboarding of a service, the page of a toy or science-kit shop, a breakfast or brunch place, or an about page that wants a smile.

On phones

The same run with the sizes adapted: the camera keeps the same area of machine, so on a narrow screen the parts are a little smaller and the framing gets closer to the edges. At the top the title sits above and the start of the machine below it. In the end the whole machine is a strip above the close. A tap on a part makes it squash and spring back.

With reduced motion

No travelling camera, no rolling, no shaking or crumbs and no smooth scrolling: the stage shows one still picture for every moment of the run (the opening, the ramps, the dominoes, the funnel, the cup, the toaster, the toast, breakfast, the whole machine) and scrolling fades in the next, with its caption and the stopwatch on its number.

Pitfalls

The ball’s shadow was meant to disappear inside the funnel with the opacity attribute, but the shadow’s CSS class already sets opacity and CSS beats the attribute: the shadow stayed inside the glass. It is hidden with style.display.
With the slices staying down while the lever is down, during the lever’s snap (which goes up before the launch) the slices jumped a few units. From the ding on they stay at the bottom until they leave.
The stopwatch, with its columns of figures moved in percent, went out of place: a translateY in percent refers to the height of the whole column (eleven figures), not of one. It moves in em, one figure at a time.
On the final zoom out the tiny pattern of the pegboard’s holes made a moiré: the holes fade as the camera moves away.
The real-time hits only fire when the scroll passes their moment going forward and in a small step: opening the page already scrolled down, or scrolling back, does not shake the scene or throw all the crumbs at once.

Libraries

GSAP 3.15.0, Lenis 1.3.26, Anybody (font variabile) 5.3.0, JetBrains Mono (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 20 KB; the libraries: GSAP + ScrollTrigger 45 KB, Lenis 5.3 KB.

Testing

Tested on 13 October 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: To do

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.