Skip to content

Learn · sequences

Learning paths

The library is a shelf, not a course, so here are three orders that make sense if you are starting from zero: 11 steps across 3 paths, each one an essay or a component you can actually open. Marking a step is a bookmark in this browser — no account, no streak, and the path never nags.

Path 14 steps

Motion starter

From “nothing moves” to a hero that breathes, in four sittings.

0/4 marked · 0%
  1. Build a hero that breathes — in 20 minutes20 min · Beginner
  2. Aurora Veil — practice piece2.6 KB · animated
  3. The choreography question: story or decoration?8 min · Beginner
  4. Staggered List Entrance — practice piece1.0 KB · animated

Reading progress for this path is stored in your browser; the dots fill once it loads.

Path 23 steps

Springs, understood

Why a spring is not a slow easing, and what to change first when one feels cheap.

0/3 marked · 0%
  1. Springs are not easings12 min · Intermediate
  2. Halo Button — practice piece2.1 KB · element
  3. Easing cheatsheet, deep dive11 min · Intermediate

Reading progress for this path is stored in your browser; the dots fill once it loads.

Path 34 steps

Scroll, honestly

Scroll-linked work that stays on the compositor — and when to stop trying.

0/4 marked · 0%
  1. scroll-timeline, honestly10 min · Advanced
  2. Draw-on-scroll Path — practice piece2.0 KB · animated
  3. Reduced motion beyond the switch11 min · Intermediate
  4. Reading-time Progress Dots — practice piece1.5 KB · element

Reading progress for this path is stored in your browser; the dots fill once it loads.

How these paths are assembled

Each path is generated at build time from the essay and component data: if a slug stops existing, the step disappears from the path instead of rendering a dead link. The step counts you see are the ones that survived that filter — 91 essays and 289 components are available to draw from, and these three paths use 11 of them.

This is deliberately not a course platform: there is no certificate, no email gate, and no way for us to know who finished what. If you want to keep notes, the browser key is motif:paths and you can read it yourself.