Skip to content
motion lab

Learn motion, floor by floor.

Nine short floors take you from timing and easing to a brief an agent can render. Every floor has a live demo you can drag, scrub and break, and the code behind it.

Start floor 01

How the floors stack up

Each floor uses the one before it. Taste comes first because every later decision is a timing decision.

  1. Floors 01–02

    Taste

    Timing, easing and the principles that make motion feel physical.

  2. Floors 03–05

    Engines

    CSS, springs, GSAP, Motion, Remotion and HyperFrames do the moving.

  3. Floors 06–07

    Story & sound

    Beats, ratios and a soundtrack the cuts can land on.

  4. Floors 08–09

    Ship

    Export settings, then a brief that ties every floor together.

The floors

  1. 01Taste: timing & easingHow long things take, and how they speed up and slow down. Everything else builds on this.Easing playground · The 12 principles
  2. 02Explainer figuresReveal a diagram in the order you would explain it out loud.Narrated figure
  3. 03Web motionInterface motion that feels instant, stays out of the way and respects reduced motion.Transition tuner
  4. 043D & physicsSprings instead of fixed durations, and depth with perspective.Spring playground · Perspective card
  5. 05Video in codeA video is a function of the frame number. Scrub it frame by frame.Frame-accurate timeline
  6. 06Launch films & reelsStructure a short film into beats, then keep it readable in every ratio.Beat sheet · Safe zones
  7. 07SoundHalf of motion is audio. Find the beats, in frames, and cut on them.Beat grid
  8. 08Render & exportThe right codec, size and settings for where the video will play.Export planner
  9. 09Prompt labPut it together: a structured brief an agent can execute frame by frame.Brief builder · Prompt check