Every frame is a function of time.

IWhat this is

The Motion Library is a collection of thirty short animated films, or reels, that each explain one idea in under thirty seconds. Every reel is drawn entirely in code on a 1280×720 canvas, with its sound synthesized as it plays. There are no video files and no images: only a function that paints a picture for a moment in time.

Each reel pairs a medium with a theme, on the house view that the medium is the message. The Prisoner's Dilemma becomes a film-noir interrogation; Sputnik, a Constructivist poster; the Roman calendar, a split-flap departures board. You can watch any reel, copy its code, download it as a single page, or copy a prompt that has Claude make a new one in the same medium about your own topic.

IIHow a reel works: a pure function of time

A reel is one call, Reel.piece({...}), and its heart is one function, frame(ctx, t). Give it a time in seconds and it paints the whole frame for that instant, background first. It never remembers the previous frame, never reads the clock and never rolls real dice: anything random comes from a generator seeded with a fixed number.

So the same t always gives the same frame. That one rule is what lets the player pause, loop and scrub without drifting, lets the sound stay locked to the picture, and lets a tool render any reel to video one exact frame at a time. Try it: scrub the slider, then draw the same moment again from scratch.

// a whole frame, painted from t alone
frame(ctx, t, k, s) {
  ctx.drawImage(s.paper, 0, 0);   // background first
  const x = k.lerp(160, 1120, k.span(t, 1, 4, 'inOutCubic'));
  ctx.fillStyle = INK;
  ctx.beginPath(); ctx.arc(x, 360, 48, 0, k.TAU); ctx.fill();
  k.grain(ctx, t);   // seeded grain that freezes in the hold
}

Reels follow a few more rules that keep them honest. They bake expensive textures once, in setup(), so a frame takes a few milliseconds. Their last 1.2 seconds hold perfectly still. Their words on screen are signposts, not sentences, and every fact they show comes with a source, listed on the reel's page.

IIIThe kit

Every reel runs on the same small kit, written for this library. It's plain JavaScript with no dependencies, and you can read all of it.

• kit/kit.jsThe core: the Reel registry and the helper object k, with easing, keyframes, seeded noise, paths, lettering, textures and finishing passes like grain, bloom and halftone.
• kit/sound.jsThe synthesizer: effects, instruments, music beds and ambiences, scheduled up front so they stay in sync, and rendered offline for video.
• kit/player.jsThe player: play, pause, scrub, beats, sound and full screen, plus the gallery's hover previews.
• kit/API.mdThe kit's reference, with recipes for each medium's tricks. It goes into every prompt.
• kit/SOUND.mdThe sound reference: every effect, instrument and bed by name.

IVHow the prompts work

Every reel's page has a Copy prompt button. The prompt hands Claude that reel's own source code as a worked example, the kit's API reference and the sound reference, and the rules of the format, then asks it to keep the medium and tell your story instead. It asks for a beat sheet first, so you can steer before any code is written.

Make one like this does the same for something you found elsewhere. Your screenshots and notes describe the look; a theme sheet of checked facts supplies the content; a library reel supplies the format. The prompt asks Claude to borrow the craft but not the content: no copied code, words, characters or layouts.

When Claude replies, paste the whole message into Step 4. The page finds the code and plays it inside a sandboxed frame that can't reach this site or your browser's storage. If it breaks, you get the error and its line, and a note to send back to Claude.

VCredits

Inspired by Futurepedia's The AI Style Atlas. Every reel, the kit and the prompts here were written from scratch.

Four of the mediums are Michael's originals, moved onto the kit with new stories: the Card Table, Tracked Changes, the Courtroom Sketch and the Hi-Fi Tuner. Two are new to this library: the Split-Flap Board and the Chain-Reaction Machine.

Fonts from Google Fonts, under the SIL Open Font License: Fraunces, IBM Plex Sans and IBM Plex Mono for the site, and the faces each reel names in its code. Every image and sound is made in code.

VIA note on Middle-earth

The Middle-earth reels are fan notes on J.R.R. Tolkien's books. They're not affiliated with or endorsed by the Tolkien Estate or Middle-earth Enterprises.

VIILicence

Free to reuse, with credit. The code (the Reel kit, the player and every reel's source) is under the MIT License. The films, the prompts and the writing on this site are under Creative Commons Attribution 4.0 (CC BY 4.0). Use them in your own talks, decks and projects. Please credit “The Motion Library, Bombadillo AI” and link back to this site.

The facts in each reel come with their sources on its page; the Middle-earth names and stories belong to the Tolkien Estate, and the fonts to their designers under the SIL Open Font License.