Motion Menu
The design system every build here draws from.
- ON THIS BUILD
- USED ON THIS BUILD
- WHERE IT RUNS
- Design time · pattern library · not a runtime dependency
- OFFICIAL DOCS
- Read the reference →
What it is
Our own product: a numbered library of 597 working motion and design patterns — real HTML, CSS and JavaScript, proven in a browser, not screenshots. Every build this studio ships draws from it before writing a new motion.
What it does for your business
For your business it means your site moves like it was designed, because it was: scroll, hover, and transitions come from production-tested patterns instead of improvisation that breaks in two months.
Why it earns its place
Motion is where a page either feels authored or feels assembled. A library of named patterns gives the work a vocabulary and a reduced-motion still before anything ships.
It's our own product, in production at motionmenu.ca — this site uses it too.
Used, not name-dropped
Patterns
597Used here
#542Setting
design timeAI-shaped audit
0 on /gantryThe build table on the home page cites pattern #542. The library is a design input; it is not bundled into the client.
How it runs here
The library is queried while designing a section. The chosen pattern is named in the spec, built with the site's runtime, and given a designed still for `prefers-reduced-motion`. The page is then audited, not assumed.
THE DESIGN-TIME CALL
SHELL$ recommend_patterns { "intent": "technical docs record", "role": "status" }$ validate_combination { "patterns": [542, 118] }$ get_pattern { "id": 542 }When it runs
A section needs an entrance, a scroll move or a transition. Not for ambient motion that exists because the page was quiet.
Who owns it
Design picks the pattern. Build wires the runtime. QA checks the still and the off-screen sleep.
What it does not claim
A pattern is a starting point. It still has to be built, tuned and audited; the library does not make a section finished by existing.
THE REFERENCE
The manual above is ours. The vendor's reference is the place to check an API, a version or a limit.
Open the official docs →This is the tool. The process is what turns it into your business.
File the brief