The loose-leaf board

Boards, Physics, 3D, TransitionsGSAP, CSS onlyAdvancedCompressed weight: Demo 14 KBGSAP 28 KBFreeDownload the zip

The jobs of a small riso print studio in three columns, and every job is a sheet of paper: picked up, it peels off the board from the point where you hold it and hangs from the hand, bending like a beam under its own weight; carried sideways, the side behind lifts and flutters while the side in front is pressed down. Let go, it floats down onto the place that opened for it, while the other sheets move aside one after the other like carriages.

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 print studio board</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the jobs of a small riso print studio in three columns. Every job is a sheet of paper: picked up it peels
         off the board and hangs from the hand, bending under its own weight and catching the air as it travels;
         let go, it floats down into the place that opened for it while the others slide apart -->
    <section class="board" aria-label="Print jobs" data-board data-autoclic>
      <div class="board__track" data-track></div>
    </section>
    <p class="sr" id="board-help">Press space to pick a job up, the arrows to move it, space again to put it down, escape to put it back.</p>
    <p class="sr" aria-live="assertive" data-live></p>
  </main>
  <div class="layer" aria-hidden="true" inert data-layer></div>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.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.

79 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 loose-leaf board” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a white background three pale grey columns, Proofing with its loupe, On the press with the press drum and Ready with a parcel, each with its count. In them, eight jobs on white sheets: the title (Gig poster, Seed packets, Menu cards, Summer zine…), the client, how many copies in what size (120 × A3) and the two inks written in their colour, Fluo pink, Blue, Teal, Burgundy; on the right a little proof with two shapes printed over each other in the two inks, the second a hair out of register. When the page opens the columns rise and the sheets drop onto them one after the other. With the mouse over it, a sheet lifts slightly and its shadow grows. Picked up with the mouse, or with a long press on a phone, the sheet peels off from the point where you hold it: that point rises toward you while the sides rest on the board for a moment and then lift, and the sheet hangs from the hand in two wings that bend under their weight, darker where they turn away from the light, over a soft shadow that moves away beneath it. Carried sideways, the side behind lifts and flutters like a flag while the side in front is pressed down; braking, the tail curls forward and comes back; carried up or down, the sheet tips. Where it would land a hollow place opens and the other sheets move aside on springs, one after the other down the column, pushing each other like carriages, their back edges lifting a little in the draught; the column under the sheet darkens and the counts turn over like a paper tab. Let go, the sheet is carried over its place and comes down on a cushion of air, its wings lifting as it sinks; landed, the sheets beside it are blown slightly away and come back. On a phone the columns scroll sideways, by themselves too when the sheet is held near the edge. With the keys a job is picked up with the space bar, carried with the arrows (the sheet flies to the new place) and put down with the space bar; Esc puts it back where it was.

How it works

The sheet over the page

Picked up, the job stays in its list as an empty place: its button turns transparent and keeps the focus, and the hollow shows beneath. Over the page a fixed layer receives sixteen copies of the card, each cut to a strip of its width and placed in 3D with translate3d and rotateY where the paper runs, inside a container whose perspective is centred on the point where it is held: so the sheet grows around the hand as it rises.

Two beams held by the hand

The point held follows the hand; to the right and to the left the sheet is a beam made of pieces. On every piece weighs WEIGHT, the shove of the hand speeding up or braking (against the acceleration) and the air: across the face it grows with the square of the speed, along the sheet the side left behind lifts and the side in front is pressed down (AIR), and a wave runs along the tail (FLUTTER). Summed from the tip toward the hand they give the moment at every joint, and the curvature is moment over stiffness (Euler-Bernoulli, stiffness = STIFFNESS × 10¹⁰), at most 0.3 radians per joint and about 60 degrees in all. The joints chase that curve on springs (24 radians a second, damping 0.28) in steps of 1/120 of a second, so the sheet swings and settles.

The board beneath

If the curve would pass under the board, a bisection finds how much of the bend to keep so that its lowest point just touches it: that is why, just picked up, the sheet peels off from the point held while its sides still rest on the board, and laid down it flattens by itself.

Light and shadow

Every strip is darkened by the cosine between its face and a light from the upper left (at most 0.2, paper is matte), with a gradient from the value at one edge to the value at the other, so no steps show. The shadow is a blurred rectangle under the sheet projected by that light (x + z·0.3): the higher the sheet, the lower, wider and softer its shadow. Moved up or down, the whole sheet tips with rotateX by its speed.

The place and the carriages

The place goes to the column nearest the centre of the sheet, before the first card whose middle is below that centre. When the place moves in the DOM every card keeps where it was as an offset on a spring (FLIP on springs, stiffness ROOM and damping 0.7), which starts CASCADE seconds later for every card of distance from the place. After the springs a pass keeps every card at least 3 pixels from the one above and hands it that one’s speed, like carriages; the speed lifts the back edge a little (rotateX). The count turns over with yPercent and rotationX.

Laying it down, keys, fingers and the preview

Let go, the point held is carried over the place (read on every frame, because it may still be sliding) and lowered to 40% of LIFT, then comes down to the board in 0.24 seconds: the air brakes it and lifts the wings, the board flattens them, and when it is flat and still the copies go and the real card shows in the same frame; the neighbours get a puff of 120 pixels a second. With the keys a hand on a spring carries the sheet to the place the arrows choose, and the focus ring rides on the sheet; an aria-live region says where it is. On a phone the sheet is picked up with a long press (0.28 seconds), then the page stays still and near the edge the columns scroll by themselves. A click from a script on the board (the preview) carries a job along an arc into another column; four moves bring everything back as it was.

Values to change

Name	File	Default	What it changes
`LIFT`	script.js	`50`	How high a sheet comes up when picked, in pixels toward you.
`STIFFNESS`	script.js	`0.1`	How stiff the paper is: low bends like tissue, high stays flat like card.
`WEIGHT`	script.js	`1700`	How heavily the paper hangs from the hand, in pixels per second squared.
`AIR`	script.js	`0.0012`	How much the air catches the sheet while it travels.
`FLUTTER`	script.js	`0.8`	How much the side behind flutters as the sheet travels.
`ROOM`	script.js	`360`	How briskly the other sheets make room: the stiffness of their springs.
`CASCADE`	script.js	`0.035`	The seconds between one sheet and the next as the room travels down a column.
`COLUMNS`	script.js	`[['Proofing', [['Gig poster', 'Lantern Hall', '120 × A3', ['Fluo pink', 'Blue']], …]], …]`	The columns and their jobs: title, client, how many and how big, the two inks (those with a colour in :root, like Teal or Fluo pink, colour themselves).

Try them in the Playground

When to use it

For the jobs of a print shop or a studio, the plan of a magazine, the orders of a workshop, the applications to a job, a team’s tasks: anywhere things go from one state to the next and moving them should be a pleasure.

On phones

The columns sit side by side and scroll sideways inside their frame, snapping to each column; a sheet is picked up with a long press, so the finger can still scroll, and held near the edge it scrolls the columns by itself. While it is carried the page stays still.

With reduced motion

The sheet does not rise or bend: it follows the hand flat, with a still shadow saying it is held; the place opens at once, the other sheets move without sliding and the sheet let go appears in its place with a fade. No entrance and no turning counts.

Pitfalls

The first paper was a free chain of points (Verlet) held together only by the distances between neighbours: it bent sharply at one joint, touched the board and folded over itself, with the words reversed. It became two beams held by the hand, with the curvature given by the moment and a limit on the angle of every joint and of the whole sheet.
Strips darkened with a flat colour made steps and the sheet looked like sheet metal: the shade has to run inside every strip from one edge to the other and stay light.
The cards making room, each with its own spring and delay, sometimes rode over each other when the place came in and out of a column quickly: after the springs a pass keeps them apart and hands the speed on to the one pushed.
The paper copy and the real card must match to the pixel when they swap: the sheet comes down on the position of the place read on every frame (the place may still be sliding on its spring), and the swap happens only when the paper is flat and still.
The space bar on a card also sends a click with detail 0, like the preview’s: the demonstration starts only when the click’s target is the board itself.
To check the motion frame by frame the browser’s fake time has to be paused (clock.pauseAt): with the clock running, the time the screenshots take makes the animation run on and the timings measured are wrong.

Libraries

GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 14 KB; the libraries: GSAP 28 KB.

Testing

Tested on 6 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.