🎮 Build Interactive Mouse Effects

import { useState, useEffect } from 'react';

function MouseTracker() {
  // Create a state to store mouse position
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });

  useEffect(() => {
    // This function runs every time the mouse moves
    const handleMouseMove = (e) => {
      setMousePos({
        x: e.clientX,  // Horizontal position
        y: e.clientY   // Vertical position
      });
    };

    // Tell the browser to listen for mouse movement
    window.addEventListener('mousemove', handleMouseMove);

    // Cleanup: Remove listener when component unmounts
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []); // Empty array means "run once on mount"

  return (
    <div>
      <p>Mouse position: ({mousePos.x}, {mousePos.y})</p>
    </div>
  );
}

function InteractiveBricks() {
  const [hoveredBrick, setHoveredBrick] = useState(null);
  
  // Create array of bricks [0, 1, 2, 3, ..., 23]
  const bricks = Array.from({ length: 24 }, (_, i) => i);

  const getBrickStyle = (index) => {
    const isHovered = hoveredBrick === index;
    
    return {
      width: isHovered ? '70px' : '60px',      // Grow when hovered
      height: isHovered ? '70px' : '60px',
      backgroundColor: isHovered ? '#FFD700' : '#8B4513',  // Gold vs Brown
      transform: isHovered 
        ? 'scale(1.15) rotate(5deg)'           // Bigger + slight rotation
        : 'scale(1) rotate(0deg)',             // Normal state
      transition: 'all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)', // Bouncy!
      cursor: 'pointer',
    };
  };

  return (
    <div>
      {bricks.map((brick) => (
        <div
          key={brick}
          style={getBrickStyle(brick)}
          onMouseEnter={() => setHoveredBrick(brick)}    // Track entry
          onMouseLeave={() => setHoveredBrick(null)}      // Track exit
        >
          {brick + 1}
        </div>
      ))}
    </div>
  );
}

function ButterflyFollower() {
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
  const [butterflyPos, setButterflyPos] = useState({ x: 0, y: 0 });
  const animationFrameRef = useRef(null);

  // Track mouse (from Step 1)
  useEffect(() => {
    const handleMouseMove = (e) => {
      setMousePos({ x: e.clientX, y: e.clientY });
    };
    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, []);

  // Smooth following animation
  useEffect(() => {
    const animate = () => {
      setButterflyPos((prev) => {
        const speed = 0.1;  // Move 10% of the distance per frame
        
        return {
          // Lerp formula for X coordinate
          x: prev.x + (mousePos.x - prev.x) * speed,
          // Lerp formula for Y coordinate
          y: prev.y + (mousePos.y - prev.y) * speed,
        };
      });

      // Request next frame (60 times per second)
      animationFrameRef.current = requestAnimationFrame(animate);
    };

    // Start the animation loop
    animationFrameRef.current = requestAnimationFrame(animate);

    // Cleanup: Stop animation when component unmounts
    return () => {
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current);
      }
    };
  }, [mousePos]); // Re-run when mouse position changes

  return (
    <div
      style={{
        position: 'fixed',
        left: butterflyPos.x,
        top: butterflyPos.y,
        transform: 'translate(-50%, -50%)',  // Center on position
        pointerEvents: 'none',  // Don't block mouse clicks
        fontSize: '40px',
      }}
    >
      🦋
    </div>
  );
}

function ThemedDemo() {
  const [theme, setTheme] = useState('minecraft');

  // Theme configuration object
  const themes = {
    minecraft: {
      name: 'Minecraft',
      brickColors: ['#8B4513', '#A0522D', '#CD853F', '#DEB887'],
      butterflyEmoji: '🦋',
      backgroundColor: '#87CEEB',  // Sky blue
      borderRadius: '2px',          // Sharp edges
      borderStyle: '2px solid #654321',
    },
    roblox: {
      name: 'Roblox',
      brickColors: ['#FF0000', '#00FF00', '#0000FF', '#FFFF00'],
      butterflyEmoji: '🚀',
      backgroundColor: '#A8DADC',  // Soft blue
      borderRadius: '8px',          // Rounded edges
      borderStyle: '2px solid rgba(255,255,255,0.5)',
    },
  };

  // Get current theme
  const currentTheme = themes[theme];

  return (
    <div style={{ backgroundColor: currentTheme.backgroundColor }}>
      {/* Theme Switcher Buttons */}
      <button onClick={() => setTheme('minecraft')}>
        ⛏️ Minecraft
      </button>
      <button onClick={() => setTheme('roblox')}>
        🎮 Roblox
      </button>

      {/* Bricks using current theme */}
      <div style={{
        backgroundColor: currentTheme.brickColors[0],
        borderRadius: currentTheme.borderRadius,
        border: currentTheme.borderStyle,
      }}>
        Brick
      </div>

      {/* Follower using current theme emoji */}
      <div>{currentTheme.butterflyEmoji}</div>
    </div>
  );
}

function TrailEffect() {
  const [butterflyPos, setButterflyPos] = useState({ x: 0, y: 0 });
  const [trail, setTrail] = useState([]);

  // Add to trail every 60 milliseconds
  useEffect(() => {
    const interval = setInterval(() => {
      setTrail((prev) => {
        // Keep only last 8 positions (prevent memory issues)
        const newTrail = [...prev.slice(-8)];
        
        // Add current position with unique ID
        newTrail.push({
          x: butterflyPos.x,
          y: butterflyPos.y,
          id: Date.now(),  // Unique identifier
        });
        
        return newTrail;
      });
    }, 60); // 60ms = ~16 times per second

    return () => clearInterval(interval);
  }, [butterflyPos]);

  return (
    <div>
      {/* Butterfly */}
      <div
        style={{
          position: 'fixed',
          left: butterflyPos.x,
          top: butterflyPos.y,
        }}
      >
        🦋
      </div>

      {/* Trail sparkles */}
      {trail.map((point, index) => (
        <div
          key={point.id}
          style={{
            position: 'fixed',
            left: point.x,
            top: point.y,
            fontSize: '14px',
            // Fade based on position in array
            // Newer sparkles (higher index) = more visible
            opacity: (index / trail.length) * 0.5,
            pointerEvents: 'none',  // Don't block clicks
          }}
        >
          ✨
        </div>
      ))}
    </div>
  );
}