Make the moment matter.
Pattern 07 · Char cascade
Letters arrive on their own timing.
Letters arrive on their own timing.
Make itmove likeyou mean it.
Stop asking for “something premium.” Pick a direction, hand your agent permanent numbers, and ship the same motion in React, Vue, Svelte, or vanilla TypeScript.
LiveCharacters arrive.
The headline is choreographed, not faded in.
The headline is choreographed, not faded in.
89Color has a pulse.
Living fills keep a static surface from feeling dead.
Living fills keep a static surface from feeling dead.
27The spectacle waits.
The particle field exists only when its act is near.
The particle field exists only when its act is near.
What you get.
Every number resolves to a working file you keep — the same move in React, Vue, Svelte, or vanilla TypeScript. Pay once, own the library, and wire it in through whichever door fits your stack.
Agents / MCP
Point your coding agent at the menu.
Claude Code, Cursor — any MCP client — browses the library,
validates combinations, and installs patterns
mid-build.
↗
Registry
POST /api/mcp
Install it like any shadcn component.
Every pattern serves registry JSON — one command drops the
files into your repo, in your framework.
↗
Copy-paste
npx shadcn@latest add …/r/<slug>.json
Open the pattern. Take the file.
Every pattern page shows its source with a framework
toggle. Copy it, ship it, it’s yours.
↗
React · Vue · Svelte · Vanilla TS
Describe the feeling. Get the moves.
A useful catalogue starts with intent, not implementation trivia.
Not a moodboard. A working language.
Every number is a behavior you can feel before you copy it. These are three lightweight moves from the library, running in the page itself.
Alive.
Pattern 89 · Living text fill
Color drifts through the layout.CSS / 60fps
Color drifts through the layout.CSS / 60fps
MAKE
MOVE
PROVE
SHIP
Pattern 228 · Card stack
Scroll inside to stack the story.
Scroll inside to stack the story.
Six routes to a finished page.
Not six categories. Six outcomes. Each route is a short, opinionated sequence of permanent Motion Menu numbers that already know how to work together.
Launch with force
Make the first screen feel authored before the product even speaks.
char cascade44 line draw240 seam
Open launch route
Sell the object
Shift from desire to detail to a decision without breaking atmosphere.
230 explode400 size589 buy bar
Open sell route
Explain the idea
Give dense thinking pace, hierarchy, and a reason to keep reading.
08 line mask10 word scrub44 draw
Open explain route
Make discovery tactile
Turn browsing into the product instead of a list wrapped in cards.
25 link roll75 tabs149 command
Open explore route
Earn the claim
Let numbers, systems, and verification carry the trust.
245 tier gate500 counter596 trust
Open proof route
End on purpose
Shorten the perceived middle with a closer that feels inevitable.
300 statement561 orbit564 torn edge
Open finish route
One heavy moment. Earned.
Extracted pattern 27 reacts to the pointer, stays absent until this act approaches, and is destroyed when the act leaves.
Waiting for viewportGPU / adaptive
Pointer steers the extracted field. Its WebGL context is destroyed offscreen and remounted on return.
Enter all live experiments ↗Motion that leaves the moodboard.
Choose the interface your team or agent already uses. The permanent pattern stays the same.
Every door carries the same enforcement: a stated set of anti-generic rules, and pairing and clash checks read off the catalogue's own fields. Ask for two patterns that fight each other and the answer says why, before any code ships.
The library is free.
$0 every pattern
Every pattern, every framework wrapper, every door — MCP, registry, plain HTTP. No card, no key, nothing held back. It is the design intelligence layer your agent composes your site from.