bggrid

src/components/HeroBackground.tsx

@@ -36,7 +36,6 @@ function drawParticles(
   isDark: boolean,
 ) {
   const now = Date.now() / 1000
-  // dark mode: light particles on dark bg; light mode: mid-gray particles on light bg
   const tone = isDark ? 220 : 140
 
   for (const p of particles) {
@@ -123,9 +122,26 @@ export default function HeroBackground({
     }
   }, [])
 
+  // grid line color: light grey at 50% opacity in dark, dark grey at 50% opacity in light
+  const gridColor = isDark ? 'rgba(200,200,200,0.07)' : 'rgba(60,60,60,0.07)'
+
   return (
     <div style={{ position: 'relative', width: '100%', height: '100%' }}>
       <canvas ref={canvasRef} style={{ display: 'block', width: '100%', height: '100%' }} />
+
+      {/* Grid overlay */}
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          backgroundImage: `linear-gradient(to right, ${gridColor} 1px, transparent 1px),
+                            linear-gradient(to bottom, ${gridColor} 1px, transparent 1px)`,
+          backgroundSize: '100px 100px',
+          pointerEvents: 'none',
+        }}
+      />
+
       {showToggle && (
         <button
           onClick={handleToggle}