From 0b2e32bd24878719473dc2610ba680e843dbdab0 Mon Sep 17 00:00:00 2001
From: Mackie <iwan.mackie@gmail.com>
Date: Wed, 3 Jun 2026 10:55:58 +0800
Subject: [PATCH] bggrid

---
 src/components/HeroBackground.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/HeroBackground.tsx b/src/components/HeroBackground.tsx
index 5609598..1a8384e 100644
--- a/src/components/HeroBackground.tsx
+++ b/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}