Variants: Named Animation States

const boxVariants = {
  start: { 
    rotate: 0,
    scale: 1,
    borderRadius: '12px',
  },
  end: { 
    rotate: 180,
    scale: 1.2,
    borderRadius: '60px',
  },
};

// Example 1: When currentVariant = 'start'
<motion.div
  variants={boxVariants}
  animate='start' // Matches boxVariants.start property
  transition={{ duration: 0.5, type: 'spring' }}
>
  start
</motion.div>

// Example 2: When currentVariant = 'end'
<motion.div
  variants={boxVariants}
  animate='end' // Matches boxVariants.end property
  transition={{ duration: 0.5, type: 'spring' }}
>
  end
</motion.div>

// Import Lucide icons
import { Upload, Clock, CheckCircle } from 'lucide-react';

// Define variants for coordinated animations
const containerVariants = {
  idle: { scale: 1 },
  active: { scale: 0.98 },
  success: { scale: 1 },
};

const iconContainerVariants = {
  idle: { scale: 1, rotate: 0 },
  active: { scale: 1, rotate: 0 },
  success: { scale: 1.15, rotate: 0 },
};

const progressBarVariants = {
  idle: { scaleX: 0 },
  active: { scaleX: 0.6 },
  success: { scaleX: 1 },
};

// Main component with state management
<motion.button
  className={cn(
    'button-base',
    currentState === 'idle' && 'bg-blue-500',
    currentState === 'active' && 'bg-purple-500',
    currentState === 'success' && 'bg-green-500'
  )}
  variants={containerVariants}
  animate={currentState}
  onClick={handleClick}
>
  {/* Icon container */}
  <motion.div variants={iconContainerVariants}>
    {/* Upload icon */}
    {currentState === 'idle' && <Upload />}
    
    {/* Clock icon with continuous rotation */}
    {currentState === 'active' && (
      <motion.div
        animate={{ rotate: 360 }}
        transition={{
          duration: 2,
          repeat: Infinity,
          ease: 'linear'
        }}
      >
        <Clock />
      </motion.div>
    )}
    
    {/* Success icon */}
    {currentState === 'success' && <CheckCircle />}
  </motion.div>
  
  {/* Text that changes based on state */}
  <div>
    {currentState === 'idle' && 'Upload File'}
    {currentState === 'active' && 'Processing...'}
    {currentState === 'success' && 'Upload Complete!'}
  </div>
  
  {/* Progress bar */}
  <motion.div
    className='progress-bar'
    variants={progressBarVariants}
    style={{ originX: 0 }} // Important: scales from left, not center
    transition={{
      duration: currentState === 'active' ? 2 : 0.3,
      ease: currentState === 'active' ? 'linear' : 'easeOut'
    }}
  />
</motion.button>

// Define variants for each element
const parentVariants = {
  collapsed: {
    backgroundColor: '#1e293b', // slate-800
    borderColor: 'rgba(148, 163, 184, 0.2)',
  },
  expanded: {
    backgroundColor: '#312e81', // indigo-900
    borderColor: 'rgba(129, 140, 248, 0.5)',
  },
};

const iconVariants = {
  collapsed: { rotate: 0, scale: 1 },
  expanded: { rotate: 180, scale: 1.1 },
};

const contentVariants = {
  collapsed: { opacity: 0, height: 0, y: -10 },
  expanded: { opacity: 1, height: 'auto', y: 0 },
};

const featureVariants = {
  collapsed: { opacity: 0, x: -20 },
  expanded: { opacity: 1, x: 0 },
};

// Build the UI - parent controls everything!
<motion.div
  className='w-400 rounded-2xl border-2 p-xl'
  variants={parentVariants}
  initial='collapsed'
  animate={currentState} // This state propagates to ALL children
  onClick={() => setCurrentState(currentState === 'collapsed' ? 'expanded' : 'collapsed')}
>
  <div className='flex items-center justify-between'>
    <motion.h3 variants={titleVariants}>
      Premium Features
    </motion.h3>
    
    <motion.div variants={iconVariants}>
      <ChevronDown className='h-24 w-24' />
    </motion.div>
  </div>

  {/* Content animates based on parent state */}
  <motion.div variants={contentVariants}>
    <motion.div 
      variants={featureVariants}
      transition={{ delay: 0.1 }} // Stagger effect
    >
      <Sparkles /> Auto-propagation
    </motion.div>
    
    <motion.div 
      variants={featureVariants}
      transition={{ delay: 0.2 }}
    >
      <Zap /> No prop drilling
    </motion.div>
    
    <motion.div 
      variants={featureVariants}
      transition={{ delay: 0.3 }}
    >
      <Heart /> Perfect sync
    </motion.div>
  </motion.div>
</motion.div>

// Define ALL variants for multi-level propagation
const containerVariants = {
  closed: {
    backgroundColor: '#1e293b', // slate-800
    borderColor: 'rgba(148, 163, 184, 0.2)',
  },
  open: {
    backgroundColor: '#1e1b4b', // indigo-950
    borderColor: 'rgba(129, 140, 248, 0.5)',
  }
};

const headerVariants = {
  closed: { backgroundColor: 'rgba(99, 102, 241, 0.1)' },
  open: { backgroundColor: 'rgba(99, 102, 241, 0.2)' }
};

const titleVariants = {
  closed: { x: 0, color: '#e2e8f0' },
  open: { x: 10, color: '#c7d2fe' }
};

const iconVariants = {
  closed: { rotate: 0, scale: 1 },
  open: { rotate: 90, scale: 1.1 }
};

const contentVariants = {
  closed: { opacity: 0, height: 0 },
  open: { opacity: 1, height: 'auto' }
};

const sectionVariants = {
  closed: { opacity: 0, y: -10 },
  open: { opacity: 1, y: 0 }
};

const itemVariants = {
  closed: { x: -20, opacity: 0, scale: 0.95 },
  open: { x: 0, opacity: 1, scale: 1 }
};

const badgeVariants = {
  closed: { scale: 0, opacity: 0 },
  open: { scale: 1, opacity: 1 }
};

// Build the complete UI - one animate prop controls ALL levels!
<motion.div
  className='w-420 rounded-2xl border-2'
  variants={containerVariants}
  initial='closed'
  animate={isOpen ? 'open' : 'closed'} // This propagates everywhere!
  onClick={() => setIsOpen(!isOpen)}
>
  {/* Level 1: Header with background animation */}
  <motion.div className='rounded-t-2xl p-lg' variants={headerVariants}>
    <div className='flex items-center justify-between'>
      {/* Title slides and changes color */}
      <motion.h3 variants={titleVariants}>
        Navigation Menu
      </motion.h3>
      
      {/* Icon rotates 90 degrees */}
      <motion.div variants={iconVariants}>
        <Menu className='h-24 w-24' />
      </motion.div>
    </div>
  </motion.div>

  {/* Level 2: Content expands/collapses */}
  <motion.div variants={contentVariants}>
    <div className='p-lg pt-0'>
      
      {/* Level 3: Main section fades in */}
      <motion.div variants={sectionVariants} transition={{ delay: 0.1 }}>
        <h4>Main</h4>
        
        {/* Level 4: Items slide in from left */}
        <motion.div 
          variants={itemVariants} 
          transition={{ delay: 0.15 }}
        >
          <Home /> Dashboard
          {/* Badge scales in last */}
          <motion.div variants={badgeVariants} transition={{ delay: 0.3 }}>
            New
          </motion.div>
        </motion.div>
        
        <motion.div 
          variants={itemVariants} 
          transition={{ delay: 0.2 }}
        >
          <BarChart3 /> Analytics
        </motion.div>
      </motion.div>

      {/* Another Level 3: Settings section */}
      <motion.div variants={sectionVariants} transition={{ delay: 0.25 }}>
        <h4>Settings</h4>
        
        <motion.div 
          variants={itemVariants} 
          transition={{ delay: 0.3 }}
        >
          <Users /> Team
        </motion.div>
        
        <motion.div 
          variants={itemVariants} 
          transition={{ delay: 0.35 }}
        >
          <Settings /> Preferences
          {/* Another badge with even later delay */}
          <motion.div variants={badgeVariants} transition={{ delay: 0.45 }}>
            •
          </motion.div>
        </motion.div>
      </motion.div>
      
    </div>
  </motion.div>
</motion.div>

const bubbleVariants = {
  initial: () => ({
    scale: 0,
    opacity: 0,
    backgroundColor: `hsl(${Math.floor(Math.random() * 360)}, 80%, 50%)`,
  }),
  animate: {
    scale: 1,
    opacity: 1,
  },
};

<motion.div 
  initial='initial' // String 'initial' triggers function for each child
  animate='animate' // String 'animate' propagates to all children
>
  {positions.map((pos, index) => (
    <motion.div
      key={index}
      variants={bubbleVariants} 
      // Child receives 'initial' string → calls bubbleVariants.initial()
      // Child receives 'animate' string → uses bubbleVariants.animate
    />
  ))}
</motion.div>

const dotVariants = {
  initial: { scale: 0, opacity: 0 },
  animate: (delay: number) => ({
    scale: 1,
    opacity: 1,
    transition: {
      delay: delay, // Use custom delay value
      type: 'spring',
      stiffness: 200,
    },
  }),
};

const delays = [0.5, 0.2, 0.5, 0.2, 1, 0.2, 0.5, 0.2, 0.5];

{positions.map((pos, index) => (
  <motion.div
    key={index}
    custom={delays[index]} // Pass delay to variant function
    variants={dotVariants}
    initial='initial' // String 'initial' → uses dotVariants.initial
    animate='animate' // String 'animate' → calls dotVariants.animate(delays[index])
  />
))}

// For example, when index = 4:
// custom={1} (center dot with 1s delay)
// animate='animate' calls dotVariants.animate(1)
// Returns: { scale: 1, opacity: 1, transition: { delay: 1, ... } }

const steps = [
  { 
    label: 'Cart',
    icon: ShoppingCart,
    bgColor: '#3b82f6', // blue-500
  },
  { 
    label: 'Details',
    icon: User,
    bgColor: '#8b5cf6', // purple-500
  },
  { 
    label: 'Payment',
    icon: CreditCard,
    bgColor: '#f97316', // orange-500
  },
  { 
    label: 'Complete',
    icon: CheckCircle,
    bgColor: '#10b981', // green-500
  },
];

// Icon variants use custom color data
const iconVariants = {
  inactive: { 
    scale: 0.8, 
    opacity: 0.5,
    backgroundColor: '#404040', // neutral-700
  },
  active: (step: typeof steps[number]) => ({
    scale: 1,
    opacity: 1,
    backgroundColor: step.bgColor, // Custom color for each step
    transition: {
      duration: 0.3,
      type: 'spring',
    },
  }),
  complete: (step: typeof steps[number]) => ({ 
    scale: 1, 
    opacity: 1,
    backgroundColor: step.bgColor, // Maintains custom color
  }),
};

// Usage - Icon background animates to custom color
<motion.div
  key={step.label}
  custom={step}  // Pass entire step object
  animate={isActive ? 'active' : 'inactive'}
>
  <motion.div
    className='flex h-60 w-60 items-center justify-center rounded-full'
    style={{ backgroundColor: '#404040' }} // Initial color
    variants={iconVariants}
    custom={step}  // Pass step data to variant function
  >
    <Icon className='h-24 w-24 text-white' />
  </motion.div>
</motion.div>