Pacman

src/components/LandingHero/index.tsx

@@ -52,6 +52,7 @@ const LandingHero: React.FC<HeroProps> = ({
   imageAlt,
 }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [pacmanMode, setPacmanMode] = useState(false);
   const pixelsRef = useRef<{ getCanvas: () => HTMLCanvasElement | null }>(null);
 
   const [hashtagCopied, setHashtagCopied] = useState(false);
@@ -74,6 +75,16 @@ const LandingHero: React.FC<HeroProps> = ({
     };
   }, [isModalOpen]);
 
+  // Exit pacman mode on Escape key
+  useEffect(() => {
+    if (!pacmanMode) return;
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setPacmanMode(false);
+    };
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [pacmanMode]);
+
   const handleDownload = () => {
     const canvas = pixelsRef.current?.getCanvas();
     if (!canvas) return;
@@ -138,6 +149,7 @@ const LandingHero: React.FC<HeroProps> = ({
         initialSpeed={100}
         initialDensity={0.002}
         colorScheme="green"
+        pacmanMode={pacmanMode}
       />
 
       <section className={clsx(styles.landingHero, 'h-full relative w-full')}>
@@ -226,6 +238,20 @@ const LandingHero: React.FC<HeroProps> = ({
         </div>
       </section>
 
+      {/* Pacman Button */}
+      <button
+        onClick={() => setPacmanMode((v) => !v)}
+        className={`z-50 cursor-pointer absolute top-4 right-8 w-[18px] h-[18px] flex justify-center items-center transition-colors monospace text-[10px] leading-none ${
+          pacmanMode
+            ? 'bg-nextflow-600 text-black hover:bg-nextflow-800'
+            : 'bg-gray-100 text-black hover:bg-gray-300'
+        }`}
+        aria-label={pacmanMode ? 'Exit Pacman' : 'Play Pacman'}
+        title={pacmanMode ? 'Exit Pacman (Esc)' : 'Play Pacman'}
+      >
+        {pacmanMode ? 'x' : '\u25CF'}
+      </button>
+
       {/* Help Button */}
       <button
         onClick={() => setIsModalOpen(true)}