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.
Six themes re-skin any pattern in one call — token block plus every colour literal baked into the JavaScript, GLSL and canvas code rewritten. The easing curves, durations and lerp factors are never touched. Those are the part you are actually paying for.
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://motion-menu-two.vercel.app/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://motion-menu-two.vercel.app/api/mcp \ --bearer-token-env-var MOTION_MENU_TOKEN # then, in the session: list_patterns {"section": "AC"} get_pattern {"number": "150", "theme": "daf"}
# every pattern is one GET curl -H "Authorization: Bearer mm_live_..." \ https://motion-menu-two.vercel.app/p/150.json # markdown twin, for pasting into a model curl -H "Authorization: Bearer mm_live_..." \ https://motion-menu-two.vercel.app/p/150.md # the index and the cheatsheet are public curl https://motion-menu-two.vercel.app/p/catalog.json curl https://motion-menu-two.vercel.app/kit.md
# no MCP client? paste this into any model: Read https://motion-menu-two.vercel.app/kit.md — it is the index of 596 motion patterns plus the rules for using them. Then fetch the ones you want from https://motion-menu-two.vercel.app/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.
# Studio and up: hand it numbers, get a working page compose_page { "theme": "wb", "sections": [ {"p": "03"}, {"p": "150", "swap": {"Motion Menu": "Atelier Nord"}}, {"p": "228"}, {"p": "101"}, {"p": "151"} ] } # → one standalone .html: scroll spine, shared runtime, # page chrome, every pattern themed and wired.
No subscription, no seat count, no renewal. 14-day refund, no questions — the licence is one page and worth reading before you buy, especially the part where what you already shipped stays yours.
14-day money-back guarantee · works inside Claude Code, Cursor and Windsurf via MCP — your agent reads the library directly
26 patterns, the mm theme, no card, no expiry.
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, every theme,
compose_page for full working pages, exporting a
composed page straight to your own GitHub repo or Vercel project,
wrappers in React, Vue, Svelte and vanilla TypeScript, and 5 keys
so a small team can each hold their own. One payment, no
subscription.
Yes — every pattern added after you buy is already included in your Lifetime licence, forever. There's no promised release schedule (that's a commitment about addressing, not volume), but nothing new is ever billed separately.
On the Lifetime plan, 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 Free plan is personal projects and evaluation only — the licence has the exact line.
A 14-day refund, no questions asked, one per customer — email support and it's done. Anything you already shipped with the patterns keeps working; a refund only removes access to fetch more.
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.
Not as a separate paid tier. Lifetime already includes 5 keys per account, so a small team can each hold their own — no per-seat billing on top of the one $149 payment.
No. Lifetime is a single $149 payment — no subscription, no renewal, no recurring charge, and no trial period.
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, fetch and compose 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.
Yes — every theme, re-skinned on request. The Free plan includes
the default mm theme only.
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.