animation-motion-design
Animation and motion design patterns using Motion library (formerly Framer Motion) and View Transitions API. Use when implementing component animations, page transitions, micro-interactions, gesture-driven UIs, or ensuring motion accessibility with prefers-reduced-motion.
- Installs
- 215
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/yonatangross/orchestkit --skill animation-motion-design- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads animation-motion-design automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Animation & Motion Design
Patterns for building performant, accessible animations using Motion (formerly Framer Motion, 18M+ weekly npm downloads) and the View Transitions API (cross-browser support in 2026). Covers layout animations, gesture interactions, exit transitions, micro-interactions, and motion accessibility.
Quick Reference
| Rule | File | Impact | When to Use |
|---|---|---|---|
| Layout Animations | rules/motion-layout.md | HIGH | Shared layout transitions, FLIP animations, layoutId |
| Gesture Interactions | rules/motion-gestures.md | HIGH | Drag, hover, tap with spring physics |
| Exit Animations | rules/motion-exit.md | HIGH | AnimatePresence, unmount transitions |
| View Transitions API | rules/view-transitions-api.md | HIGH | Page navigation, cross-document transitions |
| Motion Accessibility | rules/motion-accessibility.md | CRITICAL | prefers-reduced-motion, cognitive load |
| Motion Performance | rules/motion-performance.md | HIGH | 60fps, GPU compositing, layout thrash |
Total: 6 rules across 3 categories
Decision Table — Motion vs View Transitions API
| Scenario | Recommendation | Why |
|---|---|---|
| Component mount/unmount | Motion | AnimatePresence handles lifecycle |
| Page navigation transitions | View Transitions API | Built-in browser support, works with any router |
| Complex interruptible animations | Motion | Spring physics, gesture interruption |
| Simple crossfade between pages | View Transitions API | Zero JS bundle cost |
| Drag/reorder interactions | Motion | drag prop with layout animations |
| Shared element across routes | View Transitions API | viewTransitionName CSS property |
| Scroll-triggered animations | Motion | useInView, useScroll hooks |
| Multi-step orchestrated sequences | Motion | staggerChildren, variants |
Quick Start
Motion — Component Animation
import { motion, AnimatePresence } from "motion/react"
const fadeInUp = {
initial: { opacity: 0, y: 20 },
animate: { opacity: 1, y: 0 },
exit: { opacity: 0, y: -10 },
transition: { type: "spring", stiffness: 300, damping: 24 },
}
function Card({ item }: { item: Item }) {
return (
<motion.div {...fadeInUp} layout layoutId={item.id}>
{item.content}
</motion.div>
)
}
function CardList({ items }: { items: Item[] }) {
return (
<AnimatePresence mode="wait">
{items.map((item) => (
<Card key={item.id} item={item} />
))}
</AnimatePresence>
)
}
View Transitions API — Page Navigation
// React Router v7+ with View Transitions
import { Link, useNavigate } from "react-router"
function NavLink({ to, children }: { to: string; children: React.ReactNode }) {
return <Link to={to} viewTransition>{children}</Link>
}
// CSS for the transition
// ::view-transition-old(root) { animation: fade-out 200ms ease; }
// ::view-transition-new(root) { animation: fade-in 200ms ease; }
Motion — Accessible by Default
import { useReducedMotion } from "motion/react"
function AnimatedComponent() {
const shouldReduceMotion = useReducedMotion()
return (
<motion.div
animate={{ x: 100 }}
transition={shouldReduceMotion
? { duration: 0 }
: { type: "spring", stiffness: 300, damping: 24 }
}
/>
)
}
Rule Details
Layout Animations (Motion)
FLIP-based layout animations with the layout prop and shared layout transitions via layoutId.
Load:
rules/motion-layout.md
Gesture Interactions (Motion)
Drag, hover, and tap interactions with spring physics and gesture composition.
Load:
rules/motion-gestures.md
Exit Animations (Motion)
AnimatePresence for animating components as they unmount from the React tree.
Load:
rules/motion-exit.md
View Transitions API
Browser-native page transitions using document.startViewTransition() and framework integrations.
Load:
rules/view-transitions-api.md
Motion Accessibility
Respecting user motion preferences and reducing cognitive load with motion sensitivity patterns.
Load:
rules/motion-accessibility.md
Motion Performance
GPU compositing, avoiding layout thrash, and keeping animations at 60fps.
Load:
rules/motion-performance.md
Key Principles
- 60fps or nothing — Only animate
transformandopacity(composite properties). Never animatewidth,height,top, orleft. - Centralized presets — Define animation variants in a shared file, not inline on every component.
- AnimatePresence for exits — React unmounts instantly; wrap with AnimatePresence to animate out.
- Spring over duration — Springs feel natural and are interruptible. Use
stiffness/damping, notduration. - Respect user preferences — Always check
prefers-reduced-motionand provide instant alternatives.
Performance Budget
| Metric | Target | Measurement |
|---|---|---|
| Transition duration | < 400ms | User perception threshold |
| Animation properties | transform, opacity only | DevTools > Rendering > Paint flashing |
| JS bundle (Motion) | ~16KB gzipped | Import only what you use |
| First paint delay | 0ms | Animations must not block render |
| Frame drops | < 5% of frames | Performance API: PerformanceObserver |
Anti-Patterns (FORBIDDEN)
- Animating layout properties — Never animate
width,height,margin,paddingdirectly. Usetransform: scale()instead. - Missing AnimatePresence — Components unmount instantly without it; exit animations are silently lost.
- Ignoring prefers-reduced-motion — Causes vestibular disorders for ~35% of users with motion sensitivity.
- Inline transition objects — Creates new objects every render, breaking React memoization.
- duration-based springs — Motion springs use
stiffness/damping, notduration. Mixing causes unexpected behavior. - Synchronous startViewTransition — Always await or handle the promise from
document.startViewTransition().
Detailed Documentation
| Resource | Description |
|---|---|
| references/motion-vs-view-transitions.md | Comparison table, browser support, limitations |
| references/animation-presets-library.md | Copy-paste preset variants for common patterns |
| references/micro-interactions-catalog.md | Button press, toggle, checkbox, loading, success/error |
Related Skills
ork:ui-components— shadcn/ui component patterns and CVA variantsork:responsive-patterns— Responsive layout and container query patternsork:performance— Core Web Vitals and runtime performance optimizationork:accessibility— WCAG compliance, ARIA patterns, screen reader support
FAQ
What does the animation-motion-design skill do?
Animation and motion design patterns using Motion library (formerly Framer Motion) and View Transitions API. Use when implementing component animations, page transitions, micro-interactions, gesture-driven UIs, or ensuring motion accessibility with prefers-reduced-motion.
How do I install animation-motion-design?
Run npx skills add https://github.com/yonatangross/orchestkit --skill animation-motion-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/animation-motion-design/ (personal) or .claude/skills/animation-motion-design/ (project).
Which AI agents can use animation-motion-design?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is animation-motion-design safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains animation-motion-design?
It is published by yonatangross in yonatangross/orchestkit. It has 215 recorded installs.
More from yonatangross/orchestkit
devops-deployment
yonatangross/orchestkit
Use when setting up CI/CD pipelines, containerizing applications, deploying to Kubernetes, or writing infrastructure as code. DevOps & Deployment covers GitHub Actions, Docker, Helm, and Terraform patterns.
responsive-patterns
yonatangross/orchestkit
Responsive design with Container Queries, fluid typography, cqi/cqb units, subgrid, intrinsic layouts, foldable devices, and mobile-first patterns for React applications. Use when building responsive layouts or container queries.
architecture-decision-record
yonatangross/orchestkit
ADR templates in the Nygard format with context, decision, consequences, and alternatives. Use when writing ADRs, recording an architectural decision, or evaluating options.
ui-components
yonatangross/orchestkit
UI component library patterns for shadcn/ui and Radix Primitives. Use when building accessible component libraries, customizing shadcn components, using Radix unstyled primitives, or creating design system foundations.
rag-retrieval
yonatangross/orchestkit
Retrieval-Augmented Generation patterns for grounded LLM responses. Use when building RAG pipelines, embedding documents, implementing hybrid search, contextual retrieval, HyDE, agentic RAG, multimodal RAG, query decomposition, reranking, or pgvector search.
zustand-patterns
yonatangross/orchestkit
Reference for Zustand 5.x state management including slices, middleware, Immer, useShallow, persistence, selectors, and devtools integration. Documents 7 core patterns with TypeScript examples and anti-patterns. Use when building React state management with Zustand instead of Redux.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.