More

frontend/src/components/home/HexCanvas.tsx

@@ -1,131 +1,63 @@
-import { useRef, useEffect } from 'react';
+import { useMemo } from 'react';
 
-const HEX_COUNT = 70;
-const TAU = Math.PI * 2;
+const HEX_COUNT = 50;
 
-interface Hex {
-  x: number;
-  y: number;
-  baseY: number;
+interface HexConfig {
   size: number;
   opacity: number;
-  speed: number;
-  phase: number;
+  top: number;
+  driftDuration: number;
+  bobDuration: number;
+  bobAmount: number;
+  delay: number;
+  reverse: boolean;
 }
 
-function initHexes(w: number, h: number): Hex[] {
-  const hexes: Hex[] = [];
+function generateHexes(): HexConfig[] {
+  const hexes: HexConfig[] = [];
   for (let i = 0; i < HEX_COUNT; i++) {
-    const y = Math.random() * h;
-    const side = Math.random() < 0.5 ? 'left' : 'right';
-    const x = side === 'left' ? Math.random() * w * 0.3 : w * 0.7 + Math.random() * w * 0.3;
+    const driftDuration = 18 + Math.random() * 35;
     hexes.push({
-      x,
-      y,
-      baseY: y,
-      size: 8 + Math.random() * 20,
-      opacity: 0.08 + Math.random() * 0.15,
-      speed: 6 + Math.random() * 14,
-      phase: Math.random() * TAU,
+      size: 10 + Math.random() * 32,
+      opacity: 0.06 + Math.random() * 0.18,
+      top: Math.random() * 100,
+      driftDuration,
+      bobDuration: 3 + Math.random() * 5,
+      bobAmount: 8 + Math.random() * 30,
+      delay: -Math.random() * driftDuration,
+      reverse: Math.random() < 0.3,
     });
   }
   return hexes;
 }
 
-function drawHex(ctx: CanvasRenderingContext2D, cx: number, cy: number, r: number) {
-  ctx.beginPath();
-  for (let i = 0; i < 6; i++) {
-    const angle = (TAU / 6) * i - Math.PI / 6;
-    const px = cx + r * Math.cos(angle);
-    const py = cy + r * Math.sin(angle);
-    if (i === 0) ctx.moveTo(px, py);
-    else ctx.lineTo(px, py);
-  }
-  ctx.closePath();
-}
-
 export default function HexCanvas({ isDark = false }: { isDark?: boolean }) {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const hexesRef = useRef<Hex[]>([]);
-  const animRef = useRef(0);
-  const isDarkRef = useRef(isDark);
-  isDarkRef.current = isDark;
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    let w = 0;
-    let h = 0;
-
-    function resize() {
-      const dpr = window.devicePixelRatio || 1;
-      const rect = canvas!.parentElement!.getBoundingClientRect();
-      w = rect.width;
-      h = rect.height;
-      canvas!.width = w * dpr;
-      canvas!.height = h * dpr;
-      canvas!.style.width = `${w}px`;
-      canvas!.style.height = `${h}px`;
-      ctx!.setTransform(dpr, 0, 0, dpr, 0, 0);
-      hexesRef.current = initHexes(w, h);
-    }
-
-    resize();
-    const ro = new ResizeObserver(resize);
-    ro.observe(canvas.parentElement!);
-
-    let prev = performance.now();
-
-    function frame(now: number) {
-      const dt = (now - prev) / 1000;
-      prev = now;
-      ctx!.clearRect(0, 0, w, h);
-
-      for (const hex of hexesRef.current) {
-        hex.x += hex.speed * dt * 0.3;
-        if (hex.x > w * 0.3 + hex.size && hex.x < w * 0.7 - hex.size) {
-          hex.x = w * 0.7 + hex.size;
-        }
-        if (hex.x > w + hex.size * 2) {
-          hex.x = -hex.size * 2;
-          hex.y = Math.random() * h;
-          hex.baseY = hex.y;
-        }
-
-        const bob = Math.sin(now / 1000 + hex.phase) * 8;
-        hex.y = hex.baseY + bob;
-
-        const dark = isDarkRef.current;
-        ctx!.globalAlpha = hex.opacity * (dark ? 0.6 : 1);
-        ctx!.fillStyle = dark ? '#058172' : '#00a28c';
-        drawHex(ctx!, hex.x, hex.y, hex.size);
-        ctx!.fill();
-
-        ctx!.globalAlpha = hex.opacity * 0.5 * (dark ? 0.6 : 1);
-        ctx!.strokeStyle = dark ? '#0a665b' : '#05c9aa';
-        ctx!.lineWidth = 1;
-        drawHex(ctx!, hex.x, hex.y, hex.size);
-        ctx!.stroke();
-      }
-
-      animRef.current = requestAnimationFrame(frame);
-    }
-
-    animRef.current = requestAnimationFrame(frame);
-    return () => {
-      cancelAnimationFrame(animRef.current);
-      ro.disconnect();
-    };
-  }, []);
+  const hexes = useMemo(generateHexes, []);
 
   return (
-    <canvas
-      ref={canvasRef}
-      className="absolute inset-0 pointer-events-none"
-      style={{ zIndex: 0 }}
-    />
+    <div className="absolute inset-0 overflow-hidden pointer-events-none" style={{ zIndex: 0 }}>
+      {hexes.map((hex, i) => (
+        <div
+          key={i}
+          className="absolute"
+          style={{
+            top: `${hex.top}%`,
+            animation: `hex-drift ${hex.driftDuration}s linear ${hex.delay}s infinite${hex.reverse ? ' reverse' : ''}`,
+          }}
+        >
+          <div
+            className="bg-teal-500"
+            style={{
+              width: hex.size,
+              height: hex.size,
+              opacity: hex.opacity * (isDark ? 0.6 : 1),
+              clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)',
+              animation: `hex-bob ${hex.bobDuration}s ease-in-out infinite`,
+              '--bob': `${hex.bobAmount}px`,
+            } as React.CSSProperties}
+          />
+        </div>
+      ))}
+    </div>
   );
 }