Create declarative gesture-aware UI animations in React with Motion.
npx skills add https://github.com/jackspace/ClaudeSkillz --skill motion-jackspace
Please help me install this Agent Skill. Skill: motion Source: https://github.com/jackspace/ClaudeSkillz/tree/main/skills/motion Command: npx skills add https://github.com/jackspace/ClaudeSkillz --skill motion-jackspace
This skill provides Production-ready Motion (Framer Motion) setup for React, offering gestures, scroll animations, layout transitions, and SVG animations to deliver engaging, accessible UI experiences.
Install motion, create a basic React component with motion.div, and enable a simple drag or hover interaction.
High-intent search queries and answers about installing and using this skill.
Drag-and-drop interactions use Framer Motion's drag gesture API with motion.div and whileDrag states to detect mouse and touch events, enabling cross-device draggable lists, carousels, and modals without manual event handlers.
Scroll-based animations synchronize element motion to viewport scroll position using scroll timeline integration and whileInView states, delivering parallax effects and reveal animations that trigger as users scroll through hero sections and long-form layouts.
Layout animations use the FLIP technique to smoothly transition elements when their positions change, while shared element transitions move visual identity across page or route changes without disrupting the DOM structure.
LazyMotion loads motion features on demand, reducing bundle size from 34 KB to 2.3 KB by splitting core gestures and advanced effects, letting you ship only the animation capabilities your app actually uses.
SVG path morphing animates shape transformations between different paths and applies gesture controls like hover and tap to individual SVG elements, enabling interactive icons, logos, and data visualizations.
Performance optimizations through LazyMotion, hardware acceleration, and gesture state management (whileHover, whileTap, drag) keep animations smooth on mobile and desktop without blocking user interactions or rendering.
IgniteUIMinimize Ignite UI Web Components bundle sizes with selective imports and tree-shaking.
reactor-teamGenerate structured prompt sequences for the Helios real-time video frame generation API.
hii-saikrishnaCreate interactive UI components and animations in React with Motion.
hii-saikrishnaCreate physics-based animations in React with React Spring and Popmotion.
