in-between
The Lab

Chapters open these instruments already set up for the lesson, and you can open any of them here. Each has a stage to watch and controls to change what you see; several also show the code.

Spacing chart

Where an object sits on every frame: ghost copies along its path, beside an animator's tick chart.

Spacing = easing Curve bench

Drag a cubic-bezier curve's handles; position and velocity graphs side by side, and a second curve to compare.

Reading a curve as speed Spring bench

Tune a spring by response and bounce, or stiffness, damping and mass. Live graph, settle time, CSS linear() to copy.

Physics as feel Exposure sheet

A timeline with one bar per element: shift a bar to offset it, or set a stagger to space many at once.

Choreography, overlap Frame stepper

Play your code, or a page from this site, at 1×, 0.25× or 0.1×, or step it frame by frame.

Observation Eye trainer

Perception drills, scored, with a calibration graph of how close your guesses run.

Intuition, measured Canvas sandbox

A canvas you code live, animation loop already written, with dt (ms since the last frame) and fps readouts, pause and step.

Motion from scratch Specimen journal

Save any lab state with the words you would use for its feel. A vocabulary of your own.

Taste Export desk

Any lab state as CSS, Web Animations API, Motion (the library), GSAP or Canvas code.

Notation Data stage

A chart that transitions between states. Match bars by key or by position, stagger or stage the change; SVG or Canvas.

Motion that explains