Motion systems for AI-generated UI
Brand motion systems, spring presets, easing curves, and transition patterns. All copy-ready for Framer Motion, CSS, and GSAP. Use with the MCP to get design and animation context in one call.
Brand motion systems
Duration scales, easing curves, spring configs, and stagger patterns — reverse-engineered from real products and public design system docs.
Warm, unhurried motion that evokes the feeling of exploring somewhere new — generous with …
Physics-based, spring-driven motion that makes digital interfaces feel like they inhabit t…
Purposeful, friction-reducing motion that helps teams think — not a showcase, but a guide.
Instant where it must be, spring-grounded where it should be — motion at the speed of thou…
Direct manipulation as the motion system — the cursor is the animation.
Minimal, fast, and unobtrusive — motion that stays out of the way of the work.
Expressive, purposeful, and fully specified — motion that communicates spatial relationshi…
Purposeful, disciplined motion that communicates clarity and precision — never decorative,…
Fast, precise, and physically grounded — motion that feels like a native app, never a webs…
Calm, purposeful motion grounded in depth and materials — motion that guides without distr…
Unhurried, human motion that respects the rhythm of thought.
Spring-native motion that makes the fastest app on your Mac feel even faster than it is.
Restrained, trustworthy motion that defers to data — animation serves clarity, never spect…
Calm, confidence-inspiring motion that keeps merchants in flow — present when needed, invi…
Deliberate, calm, and trustworthy — motion that communicates certainty, never surprise.
Calm, confident, and data-aware — motion that supports exploration without dramatizing inf…
Explicit, CSS-class-driven, and intentionally neutral — motion defined as transition class…
Fast, precise motion that inspires confidence — the interface should feel as reliable as t…
Instant, confident, and done — motion as fast as the deploys it represents.
Fast, technical, and purposeful — motion that respects the command line while elevating it…
get_full_system("linear")returns DESIGN.md + MOTION.md in one MCP callSpring presets
Five named spring configs from snappy to wobbly. Copy as Framer Motion spring object. Use for any element the user directly interacts with.
Spring Presets
stiffness · damping · mass — loops continuously
Easing reference
Six named easing curves with bezier visualizations. The curve shape is the motion — ease-out-expo decelerates sharply, ease-out-back overshoots slightly.
Easing Curves
cubic-bezier visualizations — loops continuously, staggered
Stagger patterns
Three common stagger layouts: list items, grids, and cards. The delay between each element creates a reading direction that guides the eye.
motion/react
Stagger Patterns
01 — LIST STAGGER · y: 12→0 · 40ms delay
02 — GRID STAGGER · scale: 0.6→1 · 30ms delay
03 — CARD STAGGER · x: -20→0 · 60ms delay
Enter / exit patterns
Four UI transition patterns that cover 90% of interfaces. Fade slide for most things, scale pop for popovers, drawer for panels, counter for numbers.
motion/react · AnimatePresence
Transition Patterns
Fade Slide
y: 8→0 • 250ms enter • 150ms exit • ease-out-expo
Scale Pop
scale: 0.92→1 • 200ms enter • 150ms exit • ease-out-expo
Slide Drawer
x: 100%→0 • 300ms enter • 200ms exit • ease-out-expo
Number Counter
0→2,847 • 1200ms • easeOutExpo • rAF loop
Make Claude motion-aware
The DesignMD skill teaches Claude how to read DESIGN.md and MOTION.md files and apply them to code — without you explaining the format every time.
Teaches Claude: what DESIGN.md and MOTION.md are, how to read tokens accurately, when to use springs vs easing curves, how to apply stagger patterns, MCP tool reference, and common workflows like "build a dashboard that feels like Linear."
Add to CLAUDE.md (project-level)
# Design & Motion
Follow DESIGN.md for all visual tokens.
Follow MOTION.md for all transitions and animations.
Use springs for interactive elements, easing curves for state changes.
Drop your DESIGN.md and MOTION.md in the project root. Reference them in CLAUDE.md so Claude reads them every session.
Or get it via MCP
Add the MCP once. Every project gets design and motion context without any files to manage.
New motion tools in the MCP
Three new tools alongside the existing search and retrieval tools. All available on the same MCP server.
Full motion system for a brand — duration, easing, springs, stagger, patterns
DESIGN.md + MOTION.md merged in one call. Use this when building animated UI.
List all 20 brands with motion systems available