Motion, as source.
119 motion techniques, written as React you own outright.
Featured components
One technique from every family, running.
Domain-Warped FBM Fog
Slow, low-contrast fog that flows rather than fades, with a faint light that trails the cursor.
Asymmetric Typewriter
Rotating phrases that delete at twice the speed they type, with a beat of nothing at the empty string.
Banded Scrollspy Rail
A tick rail whose active mark widens as a section crosses a 7% band through the middle of the screen.
Blend-Difference Cursor
A white dot in difference blend mode inverts whatever it crosses, growing 16 to 44 to 150px on hover.
Conic @property Border
A gradient ring that rotates around a rounded box. Two highlights chase each other; no JavaScript runs.
Delayed-Unmount Loader
A loading overlay that stays mounted 600ms past the signal so its fade can actually play before it leaves.
Auto-Advance Filmstrip
A centred strip that steps one panel every few seconds, neighbours dimmed and shrunk, on one CSS transition.
From a preview to your repository.
Three steps, no account, and nothing to install before the first one.
Watch it
The real component, running here. Off-screen previews suspend themselves.
Take the code
Component, hooks, shaders, maths. One shadcn command, or copy the files.
Hand it to an agent
Every entry ships a written brief. Paste it into Claude Code, Codex or Gemini.
By category
Seven families. Each count is what exists today, not a roadmap.
- 22ScrollSystems driven by scroll position, velocity, or direction.
- 27WebGLShader and GPU work — fields, planes, particles, distortion.
- 13CursorPointer-following, magnetism, hover state, custom cursors.
- 14TransitionRoute changes, reveals, enter and exit choreography.
- 11TextSplitting, staggering, scrambling, and typographic motion.
- 11LayoutGrids, carousels, sticky stacks, and spatial arrangement.
- 21PrimitivesThe hooks and math everything else is built from.