animation-motion-design
FeaturedAnimation 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.
Install
Quality Score: 89/100
Skill Content
Details
- Author
- yonatangross
- Repository
- yonatangross/orchestkit
- Created
- 8 months ago
- Last Updated
- today
- Language
- TypeScript
- License
- MIT
Integrates with
Similar Skills
Semantically similar based on skill content — not just same category
motion-design
Load this skill when adding or reviewing web UI motion such as animations, transitions, entrances and exits, hovers, modals, dropdowns, toasts, page transitions, and micro-interactions. Triggers on "animate", "add a transition", "make it move", "motion", "fade", "slide", "stagger", "open and close". Builds dependency-free, Baseline-first, framework-agnostic CSS, with the Web Animations API and View Transitions API where they help.
design-motion
Design and implement purposeful motion — micro-interactions, page transitions, scroll animations, and hover effects — using Framer Motion, CSS animations, and GSAP. Use when the user says "add animation", "make it feel alive", "micro-interaction", "page transition", "scroll animation", "hover effect", or "motion design". Outputs performance-safe, reduced-motion-aware animation code. Pairs with design-frontend, enhance-web-ui. Do NOT use for layout, typography, or purely functional UI work.
motion
Build sophisticated React animations with Motion (formerly Framer Motion) - declarative animations, gestures (drag, hover, tap), scroll effects, spring physics, layout animations, and SVG manipulation. Optimize bundle size with LazyMotion (4.6 KB) or useAnimate mini (2.3 KB). Use when: adding drag-and-drop interactions, creating scroll-triggered animations, implementing modal dialogs with transitions, building carousels with momentum, animating page/route transitions, creating parallax hero sections, implementing accordions with smooth expand/collapse, or optimizing animation bundle sizes. For simple list animations, use auto-animate skill instead (3.28 KB vs 34 KB). Troubleshoot: AnimatePresence exit not working, large list performance issues, Tailwind transition conflicts, Next.js "use client" errors, scrollable container layout issues, or Cloudflare Workers build errors (resolved Dec 2024).