motion

Tool passed security scan

Malicious tool definition detected

Tool: SKILL.md [2/2] Description: → 4.6 KB): ```tsx import { LazyMotion, domAnimation, m } from "motion/react" <LazyMotion features={domAnimation}> <m.div>Only 4.6 KB!</m.div> </LazyMotion> ``` **Large Lists**: Use virtualization (`react-window`, `react-virtuoso`) for 50+ animated items.

Malicious tool definition detected

{} : withMotion, } } // Usage function Component() { const config = useMotionConfig() return ( <motion.div initial={config.initial({ opacity: 0, y: 20 })} animate={{ opacity: 1, y: 0 }} exit={config.exit({ opacity: 0, y: 20 })} transition={config.transition} /> ) } ``` ### Best Practices **Do:** - ✅ Wrap app in MotionConfig with `reducedMotion="user"` - ✅ Manually check for AnimatePresence components - ✅ Test with reduced motion enabled - ✅ Provide instant alternatives (not just removing animati

Tool: references/accessibility-guide.md [2/2] Description: understand animated UI: ```tsx // Loading spinner <motion.div animate={{ rotate: 360 }} transition={{ duration: 1, repeat: Infinity, ease: "linear" }} role="status" aria-label="Loading" aria-live="polite" > <span className="sr-only">Loading content...</span> </motion.div> // Expandable section function Accordion({ title, children }) { const [isOpen, setIsOpen] = useState(false) return ( <div> <motion.button onClick={() => setIsOpen(!isOp

Malicious tool definition detected

Tool: references/common-patterns.md Description: # Motion Common Patterns - Quick Reference Production-tested animation patterns with code examples.

Malicious tool definition detected

### Staggered Children Animations Control the timing between each child animation: ```tsx const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1, // 100ms delay between each child delayChildren: 0.3, // Wait 300ms before starting children staggerDirection: 1, // 1 = forward, -1 = reverse } } } const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0 } } <motion.ul variants={container} initial="hidden" animate="show"> {items.map((item, i)

Tool: references/core-concepts-deep-dive.md [2/2] Description: 360]) // Map to colors (requires motion/react-client) const backgroundColor = useTransform( scrollYProgress, [0, 0.5, 1], ["#ff0000", "#00ff00", "#0000ff"] ) // Custom easing const scaleWithEasing = useTransform( scrollYProgress, [0, 0.5, 1], [1, 1.5, 1], { ease: "easeInOut" } ) ``` ### Parallax Layers Create depth with different scroll speeds: ```tsx function ParallaxScene() { const { scrollYProgress } = useScroll() // Background mo

Malicious tool definition detected

Tool: references/motion-vs-auto-animate.md [1/3] Description: # Motion vs AutoAnimate - Decision Guide This document helps you choose between Motion (Framer Motion) and AutoAnimate for your animation needs.

Tool: references/motion-vs-auto-animate.md [2/3] Description: |--------|-------------|--------| | **First paint** | Fastest (3.28 KB) | Slow (34 KB) or Fast (2.3-4.6 KB with optimization) | | **Runtime performance** | Fast (minimal JS) | Fast (GPU-accelerated when possible) | | **Large lists (50+ items)** | Good (auto-optimized) | Poor (needs virtualization) | | **Scroll animations** | N/A | Excellent (ScrollTimeline API) | | **Hardware acceleration** | Yes | Yes | **Winner for first paint**: Au

Tool: references/motion-vs-auto-animate.md [3/3] Description: {products.map(product => ( <li key={product.id}>{product.name}</li> ))} </ul> {/* Motion for carousel */} <motion.div drag="x"> {images.map(img => <img src={img.url} />)} </motion.div> </> ) ``` **Bundle size**: 3.28 KB (AutoAnimate) + 2.3-34 KB (Motion) = 5.58-37.28 KB total **Recommendation**: Use AutoAnimate for 90% of cases, add Motion only for features AutoAnimate can't handle.

Malicious tool definition detected

Tool: references/nextjs-integration.md [1/3] Description: # Motion + Next.js Integration Guide This guide covers how to use Motion (Framer Motion) with Next.js, including App Router patterns, Pages Router setup, known issues, and performance optimization.

Tool: references/nextjs-integration.md [2/3] Description: }} transition={{ duration: 0.3 }} > {children} </motion.div> ) } ``` **Note**: `template.tsx` creates new instances on navigation, enabling enter animations but not exit animations.

Tool: references/nextjs-integration.md [3/3] Description: https://motion.dev/docs/react - **Motion + Next.js Issues**: https://github.com/motiondivision/motion/issues - **Stack Overflow**: Tag: `framer-motion` + `next.js` --- **Key Takeaway**: For App Router, always use `"use client"` and `motion/react-client` import.

Malicious tool definition detected

Tool: references/performance-optimization.md [1/3] Description: # Motion Performance Optimization This guide covers techniques to optimize Motion animations for production, including bundle size reduction, runtime performance improvements, and best practices.

Tool: references/performance-optimization.md [2/3] Description: => { return expensiveCalculation(value) // ❌ Too frequent }) ``` **Solution**: ```tsx const { scrollY } = useScroll() // Only update when scroll changes by 10px const complexValue = useTransform(scrollY, (value) => { return Math.floor(value / 10) * 10 }) ``` --- ### 6. Use `transition` Type Wisely Different transition types have different performance characteristics: **Spring** (default): ```tsx transition={{ type: "spring", stiffne

Tool: references/performance-optimization.md [3/3] Description: not red) --- ### 3.

Malicious tool definition detected

Tool: scripts/init-motion.sh Description: #!/bin/bash # Motion Setup Script # Automates installation and initial setup for React + Vite + Next.js projects set -e echo "🎬 Motion Setup" echo "===============" echo "" # Check if package.json exists if [ !

Malicious tool definition detected

Tool: scripts/optimize-bundle.sh Description: #!/bin/bash # Motion Bundle Optimizer # Converts full motion component to LazyMotion for smaller bundle (34 KB → 4.6 KB) set -e echo "📦 Motion Bundle Optimizer" echo "==========================" echo "" # Check if we're in a project with Motion if [ !

Malicious tool definition detected

Tool: templates/layout-transitions.tsx [1/2] Description: // Motion Layout Animations & Shared Element Transitions // Production-tested with Motion v12.23.24, React 19 /** * INSTALLATION * * pnpm add motion * * USAGE * * Copy components below into your project.

Tool: templates/layout-transitions.tsx [2/2] Description: return ( <> <button onClick={() => setIsOpen(!isOpen)} className="px-4 py-2 bg-blue-600 text-white rounded" > Toggle Fixed Modal </button> {isOpen && ( <motion.div layoutRoot // CRITICAL: Fixes animations in fixed elements layout className="fixed bottom-4 right-4 w-64 bg-white border rounded-lg shadow-2xl p-4 z-50" > <h3 className="font-bold mb-2">Fixed Modal</h3> <p className="text-sm text-gray-700"> This is a fixed-position element with

Malicious tool definition detected

Tool: templates/motion-nextjs-client.tsx [1/2] Description: // Motion + Next.js App Router - Client Component Pattern // Production-tested with Motion v12.23.24, Next.js 15, React 19 /** * INSTALLATION * * 1.

Tool: templates/motion-nextjs-client.tsx [2/2] Description: on server (SEO, performance) * - Animation runs on client (interactivity) * - Best of both worlds */ // ============================================================================ // KNOWN ISSUES & WORKAROUNDS // ============================================================================ /** * ISSUE 1: "motion is not defined" or SSR Errors * * Cause: Forgot "use client" directive * * Solution: Add "use client" at top of file: * * "use

Malicious tool definition detected

Tool: templates/motion-vite-basic.tsx [1/2] Description: // Motion + Vite + React + TypeScript - Basic Setup // Production-tested with Motion v12.23.24, React 19, Vite 6 /** * INSTALLATION * * 1.

Tool: templates/motion-vite-basic.tsx [2/2]

Malicious tool definition detected

Tool: templates/scroll-parallax.tsx [1/2] Description: // Motion Scroll Animations & Parallax Effects // Production-tested with Motion v12.23.24, React 19 /** * INSTALLATION * * pnpm add motion * * USAGE * * Copy examples below into your components.

Tool: templates/scroll-parallax.tsx [2/2] Description: export function StickyScrollIndicator() { const { scrollY } = useScroll() // Fade out and scale down after scrolling 200px const opacity = useTransform(scrollY, [0, 200], [1, 0]) const scale = useTransform(scrollY, [0, 200], [1, 0.5]) return ( <motion.div style={{ opacity, scale }} className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50" > <div className="flex flex-col items-center text-gray-600"> <p className="mb-2">Scroll Down</p> <svg cl

Malicious tool definition detected

Tool: templates/ui-components.tsx [1/2] Description: // Motion UI Components - Modal, Accordion, Carousel, Tabs // Production-tested with Motion v12.23.24, React 19 /** * INSTALLATION * * pnpm add motion * * USAGE * * Copy components below into your project.

Tool: templates/ui-components.tsx [2/2] Description: ( <button key={tab.id} onClick={() => setActiveTab(tab.id)} className="relative px-4 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white" > {tab.label} {/* Shared underline */} {activeTab === tab.id && ( <motion.div layoutId="activeTab" className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600" transition={{ type: "spring", stiffness: 300, damping: 30 }} /> )} </button> ))} </div> {/* Tab content */} <AnimatePre