Motion Menu is the interaction layer your component library stops short of: working scroll scenes, shaders, WebGL, seams, product tools and the quiet motion that makes a whole page feel composed. Your agent can search it, inspect it and install the tested code directly.
Every pattern is a working demo on one page you can scroll right now. Ask for one by number and you get its complete HTML, CSS and JavaScript — the shared runtime helpers it needs, the stack pins it was tested against, and the gotchas that were hit building it.
The range is the point: Lenis-driven scroll spines, GSAP choreography, GLSL passes, WebGPU compute, Gaussian splats, MediaPipe try-on, transformers.js search, view transitions, physics letters, cloth, flow fields — alongside the quiet things a real page needs, like preloaders, seams between sections, and a device-tier gate that degrades the heavy work on a weak phone.
It is an MCP server and a set of plain URLs. Anything that speaks either — Claude Code, Cursor, your own script, a model with a browser — is a client.
# components.json — one line, then it is a registry like any other { "registries": { "@motionmenu": { "url": "https://www.motionmenu.ca/r/{name}.json", "headers": { "Authorization": "Bearer ${MOTION_MENU_KEY}" } } } } # then install like anything else — deps and the runtime come with it npx shadcn add @motionmenu/velocity-image-bend # or let the official shadcn MCP do it: # "add a hero from the motionmenu registry"
# Codex CLI — the key stays in your environment, not your command history export MOTION_MENU_TOKEN="mm_live_..." codex mcp add motion-menu \ --url https://www.motionmenu.ca/api/mcp \ --bearer-token-env-var MOTION_MENU_TOKEN # then, in the session: list_patterns {"section": "AC"} get_pattern {"number": "150"}
# every pattern is one GET curl -H "Authorization: Bearer mm_live_..." \ https://www.motionmenu.ca/p/150.json # markdown twin, for pasting into a model curl -H "Authorization: Bearer mm_live_..." \ https://www.motionmenu.ca/p/150.md # the index and the cheatsheet are public curl https://www.motionmenu.ca/p/catalog.json curl https://www.motionmenu.ca/kit.md
# no MCP client? paste this into any model: Read https://www.motionmenu.ca/kit.md — it is the index of 597 motion patterns plus the rules for using them. Then fetch the ones you want from https://www.motionmenu.ca/p/<number>.md with header Authorization: Bearer mm_live_... # kit.md carries the laws, the stack pins and the # one-page act protocol, so the model composes a site # instead of stacking demos vertically.
Motion Menu is the layer your site is built on: six design worlds, a deterministic brief-resolver, and 597 working patterns that carry them. Builders and agents pull it over MCP, the shadcn registry or plain URLs — and the site they ship is theirs, composed, not generated. The licence is one page: what you build stays yours.
Answer four questions and the resolver agents run will pick your design world — the palette, the type, the way your page would move — and point at the real patterns that carry it.
Closest world — no preset fits this brief outright. It is still a usable direction, never a default.
Every pattern, every framework wrapper, every door in — MCP, the shadcn registry, plain URLs. No card, no expiry, nothing held back. New patterns land in the same free library, and what you build with them stays yours.
All 597 patterns, no card, no expiry. A key only meters your own usage — the library answers without one.
useEffect without ceremony. A handful — WebGPU compute,
Gaussian splats, webcam try-on — need a capable browser, and each one
says so.
/p/150.json and
/p/velocity-image-bend.json return the same bytes and
both keep resolving forever. Categories are tags, which means the
catalogue can be reorganised without moving anything you depend on.
That is a commitment about addressing, not a release cadence — there
is no promised weekly drop.
.tsx),
Vue (.vue), Svelte (.svelte),
and vanilla TypeScript (.ts). The React wrapper is
a useEffect with cleanup; Vue uses
onMounted/onBeforeUnmount; Svelte uses
onMount. The MCP and shadcn registry both accept
?framework= to get the right format.
Every pattern in the library, wrappers in React, Vue, Svelte and vanilla TypeScript, delivered via MCP, the shadcn registry or plain HTTP. Nothing is held back — there is no paid tier of the library anymore.
Yes — every pattern added lands in the free library. Nothing new is ever billed. There's no promised release schedule (that's a commitment about addressing, not volume).
Yes — build for yourself, your employer, or a client, and hand the finished site over. What you can't do is resell the library itself, redistribute it as a collection, or publish pattern source as your own kit — the licence has the exact line.
Hand the library to your agent — that's what it's for. The intelligence layer (design digest, direction resolver, the graph) and the docs at /docs are written for agents first: initialize, resolve a direction, build.
Full keys are never stored, only their hash, so a lost one can't be looked up — only replaced. Go to /account and use "lost a key you already have?", which emails a fresh one to your account address.
No license needed — the library is free for teams and clients alike. Keys are optional and per-account; anyone on your team can grab their own in seconds, or read the library with no key at all.
No. The library is free with no subscription, no renewal, no recurring charge. Nothing is sold here.
MCP (Model Context Protocol) is how a coding agent talks to Motion Menu directly. Point Claude Code, Cursor, Windsurf or any other MCP client at the endpoint and it can list and fetch patterns without you opening a browser or copy-pasting code. Setup commands for each client are on /connect.
Redistribute the library — or a substantial part of it — as a collection, resell access or publish pattern source as your own kit, share a key outside your plan's seats, or use the library to train a model meant to reproduce it. The full list is on /terms.
Every pattern is plain HTML, CSS and JavaScript, plus ready wrappers
for React, Vue, Svelte and vanilla TypeScript — the MCP and shadcn
registry both take a framework parameter to get the one
you need.
No. It's a single one-time charge, and Stripe holds your payment details — this site never sees a card number. There's nothing recurring to cancel.