Motion Menu
596 live patterns · built for coding agents

Give your agent a motion director.

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.

Start free Explore the live catalogue → 26 patterns. No card. No expiry.
596live patterns
18page roles
4frameworks
$149usd once
What it is

Code that runs, not screenshots of code.

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.

Integration

One line into your agent. No SDK, no build step.

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"
Pricing

One price. Yours forever.

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.

Free
$0
Wire it up, see whether your agent actually uses it.
  • 26 sample patterns
  • The mm theme
  • Full catalogue + kit.md
  • MCP endpoint
  • The other 570 patterns
  • compose_page + publish
Get a free key
Lifetime
$149 usd
✓ 14-day money-back guarantee
Every pattern. Every theme. Every update. Forever.
  • All 596 patterns
  • React, Vue, Svelte, vanilla TS wrappers
  • All themes, themed on delivery
  • compose_page — full working pages
  • Publish — a live URL, via MCP/API
  • 5 keys for your team
  • Every new pattern, free, forever
Buy once — $149 USD

Free key

26 patterns, the mm theme, no card, no expiry.

Before you buy

What this is, exactly.

It is a library, not a framework
Patterns are transplanted into your page and become your code. There is no runtime dependency on us, and nothing phones home. If you cancel, what you already shipped keeps working — you lose access to fetch more.
It is not a design system
No component library, no Figma kit, no tokens for buttons and inputs. Figma and its Code Connect do that, and do it better. This is the motion layer: the part that moves.
It expects a real stack
Patterns are pinned to three@0.170.0, gsap@3.13.0 and lenis@1.3.17, tested together. Most drop into plain HTML or a React useEffect without ceremony. A handful — WebGPU compute, Gaussian splats, webcam try-on — need a capable browser, and each one says so.
Nothing you wire up breaks
Every pattern has a permanent slug and a permanent URL. Numbers are stable aliases, 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.
Support is one person
Email gets a real answer, usually within a couple of days. There is no phone line, no SLA, and no enterprise tier pretending otherwise. If a pattern is broken, say so and it gets fixed.
Competition is real, and mostly free
Aceternity ships 200+ components free and sells Pro for $199. Magic UI and react-bits are MIT. shadcn/ui is the foundation everyone builds on. If you need buttons, cards, bento grids and fade-ins, use those — they are excellent and they cost nothing. Where they stop is the heavy end: Aceternity ships three shader blocks. This library ships fifty. That gap is the only thing being sold here.
Every framework, one pattern
Patterns are framework-free HTML, CSS and JavaScript. Every registry item ships ready-to-use wrappers for React (.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.