Pixel trail

import { useState, useEffect } from 'react';
import { PixelTrail } from "@/components/ui/pixel-trail"; 
const DemoOne = () => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleChange = () => {
        const darkMode = mediaQuery.matches;
        setIsDarkMode(darkMode);
        if (darkMode) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    };
    handleChange(); // Set initial state based on OS preference
    mediaQuery.addEventListener('change', handleChange);
    return () => mediaQuery.removeEventListener('change', handleChange);
  }, []);

  // Configuration for PixelTrail
  const gridSizeValue: number = 50;
  const trailSizeValue: number = 0.1;
  const maxAgeValue: number = 250;
  const interpolateValue: number = 5;
  const gooeyFilterConfig = { id: "demo-one-goo-filter", strength: 2 };

  // Determine pixel color based on theme: Pure Black or Pure White
  const pixelColorForTrail = isDarkMode ? "#FFFFFF" : "#000000"; 

  return (
    // Main page container: handles theme background and default text color
    <div className="flex flex-col w-full h-screen justify-center items-center 
                   relative overflow-hidden 
                   bg-white text-black  {/* Light Mode: White BG, Black Text */}
                   dark:bg-black dark:text-white {/* Dark Mode: Black BG, White Text */}
                   transition-colors duration-300">
      
      {/* Instructional text: also inverts with theme */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
                      text-4xl sm:text-5xl font-bold pointer-events-none select-none
                      text-black opacity-20      {/* Light Mode: Faint Black Text */}
                      dark:text-white dark:opacity-20 {/* Dark Mode: Faint White Text */}
                      z-0"> {/* Behind the canvas */}
        Move Mouse
      </div>

      {/* Container for the PixelTrail effect */}
      <div 
        style={{ 
            width: '100%', 
            height: '100%', 
            position: 'relative', 
            overflow: 'hidden' 
        }}
      >
        <PixelTrail
          gridSize={gridSizeValue}
          trailSize={trailSizeValue}
          maxAge={maxAgeValue}
          interpolate={interpolateValue}
          color={pixelColorForTrail} // This is the crucial prop for black/white pixels
          gooeyFilter={gooeyFilterConfig}
        />
      </div>
      
    </div>
  );
};

export { DemoOne };