/** * InteractiveWavesBackground — Perlin noise canvas waves * Converted from TypeScript/Tailwind to JSX/vanilla CSS */ import React, { useRef, useEffect } from 'react'; // ── Perlin Noise Engine ───────────────────────────────────────── class Grad { constructor(x, y, z) { this.x = x; this.y = y; this.z = z; } dot2(x, y) { return this.x * x + this.y * y; } } class Noise { constructor(seed = 0) { this.grad3 = [ new Grad(1,1,0), new Grad(-1,1,0), new Grad(1,-1,0), new Grad(-1,-1,0), new Grad(1,0,1), new Grad(-1,0,1), new Grad(1,0,-1), new Grad(-1,0,-1), new Grad(0,1,1), new Grad(0,-1,1), new Grad(0,1,-1), new Grad(0,-1,-1) ]; this.p = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240, 21,10,23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88, 237,149,56,87,174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83, 111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216, 80,73,209,76,132,187,208,89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123,5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58, 17,182,189,28,42,223,183,170,213,119,248,152,2,44,154,163,70,221,153,101,155,167,43,172,9, 129,22,39,253,19,98,108,110,79,113,224,232,178,185,112,104,218,246,97,228,251,34,242,193, 238,210,144,12,191,179,162,241,81,51,145,235,249,14,239,107,49,192,214,31,181,199,106,157, 184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,93,222,114,67,29,24,72,243,141,128, 195,78,66,215,61,156,180]; this.perm = new Array(512); this.gradP = new Array(512); this.seed(seed); } seed(seed) { if (seed > 0 && seed < 1) seed *= 65536; seed = Math.floor(seed); if (seed < 256) seed |= seed << 8; for (let i = 0; i < 256; i++) { let v = i & 1 ? this.p[i] ^ (seed & 255) : this.p[i] ^ ((seed >> 8) & 255); this.perm[i] = this.perm[i + 256] = v; this.gradP[i] = this.gradP[i + 256] = this.grad3[v % 12]; } } fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); } lerp(a, b, t) { return (1 - t) * a + t * b; } perlin2(x, y) { let X = Math.floor(x), Y = Math.floor(y); x -= X; y -= Y; X &= 255; Y &= 255; const n00 = this.gradP[X + this.perm[Y]].dot2(x, y); const n01 = this.gradP[X + this.perm[Y + 1]].dot2(x, y - 1); const n10 = this.gradP[X + 1 + this.perm[Y]].dot2(x - 1, y); const n11 = this.gradP[X + 1 + this.perm[Y + 1]].dot2(x - 1, y - 1); const u = this.fade(x); return this.lerp(this.lerp(n00, n10, u), this.lerp(n01, n11, u), this.fade(y)); } } // ── Component ─────────────────────────────────────────────────── export default function InteractiveWavesBackground({ lineColor = 'rgba(61, 112, 104, 0.15)', backgroundColor = 'transparent', waveSpeedX = 0.0125, waveSpeedY = 0.005, waveAmpX = 32, waveAmpY = 16, xGap = 10, yGap = 32, friction = 0.925, tension = 0.005, maxCursorMove = 100, }) { const containerRef = useRef(null); const canvasRef = useRef(null); const ctxRef = useRef(null); const boundingRef = useRef({ width: 0, height: 0, left: 0, top: 0 }); const noiseRef = useRef(new Noise(Math.random())); const linesRef = useRef([]); const mouseRef = useRef({ x: -10, y: 0, lx: 0, ly: 0, sx: 0, sy: 0, v: 0, vs: 0, a: 0, set: false }); const configRef = useRef({ lineColor, waveSpeedX, waveSpeedY, waveAmpX, waveAmpY, friction, tension, maxCursorMove, xGap, yGap }); const frameIdRef = useRef(null); useEffect(() => { configRef.current = { lineColor, waveSpeedX, waveSpeedY, waveAmpX, waveAmpY, friction, tension, maxCursorMove, xGap, yGap }; }, [lineColor, waveSpeedX, waveSpeedY, waveAmpX, waveAmpY, friction, tension, maxCursorMove, xGap, yGap]); useEffect(() => { const canvas = canvasRef.current; const container = containerRef.current; if (!canvas || !container) return; ctxRef.current = canvas.getContext('2d'); function setSize() { const rect = container.getBoundingClientRect(); boundingRef.current = { width: rect.width, height: rect.height, left: rect.left, top: rect.top }; canvas.width = rect.width; canvas.height = rect.height; } function setLines() { const { width, height } = boundingRef.current; linesRef.current = []; const oW = width + 200, oH = height + 30; const { xGap, yGap } = configRef.current; const totalLines = Math.ceil(oW / xGap); const totalPoints = Math.ceil(oH / yGap); const xStart = (width - xGap * totalLines) / 2; const yStart = (height - yGap * totalPoints) / 2; for (let i = 0; i <= totalLines; i++) { const pts = []; for (let j = 0; j <= totalPoints; j++) { pts.push({ x: xStart + xGap * i, y: yStart + yGap * j, wave: { x: 0, y: 0 }, cursor: { x: 0, y: 0, vx: 0, vy: 0 } }); } linesRef.current.push(pts); } } function movePoints(time) { const lines = linesRef.current; const mouse = mouseRef.current; const noise = noiseRef.current; const cfg = configRef.current; lines.forEach(pts => { pts.forEach(p => { const move = noise.perlin2((p.x + time * cfg.waveSpeedX) * 0.002, (p.y + time * cfg.waveSpeedY) * 0.0015) * 12; p.wave.x = Math.cos(move) * cfg.waveAmpX; p.wave.y = Math.sin(move) * cfg.waveAmpY; const dx = p.x - mouse.sx, dy = p.y - mouse.sy; const dist = Math.hypot(dx, dy); const l = Math.max(175, mouse.vs); if (dist < l) { const s = 1 - dist / l; const f = Math.cos(dist * 0.001) * s; p.cursor.vx += Math.cos(mouse.a) * f * l * mouse.vs * 0.00065; p.cursor.vy += Math.sin(mouse.a) * f * l * mouse.vs * 0.00065; } p.cursor.vx += (0 - p.cursor.x) * cfg.tension; p.cursor.vy += (0 - p.cursor.y) * cfg.tension; p.cursor.vx *= cfg.friction; p.cursor.vy *= cfg.friction; p.cursor.x += p.cursor.vx * 2; p.cursor.y += p.cursor.vy * 2; p.cursor.x = Math.min(cfg.maxCursorMove, Math.max(-cfg.maxCursorMove, p.cursor.x)); p.cursor.y = Math.min(cfg.maxCursorMove, Math.max(-cfg.maxCursorMove, p.cursor.y)); }); }); } function moved(point, withCursor = true) { return { x: Math.round((point.x + point.wave.x + (withCursor ? point.cursor.x : 0)) * 10) / 10, y: Math.round((point.y + point.wave.y + (withCursor ? point.cursor.y : 0)) * 10) / 10, }; } function drawLines() { const { width, height } = boundingRef.current; const ctx = ctxRef.current; if (!ctx) return; ctx.clearRect(0, 0, width, height); ctx.beginPath(); ctx.strokeStyle = configRef.current.lineColor; linesRef.current.forEach(points => { let p1 = moved(points[0], false); ctx.moveTo(p1.x, p1.y); points.forEach((p, idx) => { const isLast = idx === points.length - 1; p1 = moved(p, !isLast); const p2 = moved(points[idx + 1] || points[points.length - 1], !isLast); ctx.lineTo(p1.x, p1.y); if (isLast) ctx.moveTo(p2.x, p2.y); }); }); ctx.stroke(); } function tick(t) { const mouse = mouseRef.current; mouse.sx += (mouse.x - mouse.sx) * 0.1; mouse.sy += (mouse.y - mouse.sy) * 0.1; const dx = mouse.x - mouse.lx, dy = mouse.y - mouse.ly; mouse.v = Math.hypot(dx, dy); mouse.vs += (mouse.v - mouse.vs) * 0.1; mouse.vs = Math.min(100, mouse.vs); mouse.lx = mouse.x; mouse.ly = mouse.y; mouse.a = Math.atan2(dy, dx); movePoints(t); drawLines(); frameIdRef.current = requestAnimationFrame(tick); } function onResize() { setSize(); setLines(); } function onMouseMove(e) { const mouse = mouseRef.current; const b = boundingRef.current; mouse.x = e.clientX - b.left; mouse.y = e.clientY - b.top; if (!mouse.set) { mouse.sx = mouse.x; mouse.sy = mouse.y; mouse.lx = mouse.x; mouse.ly = mouse.y; mouse.set = true; } } function onTouchMove(e) { const t = e.touches[0]; const mouse = mouseRef.current; const b = boundingRef.current; mouse.x = t.clientX - b.left; mouse.y = t.clientY - b.top; if (!mouse.set) { mouse.sx = mouse.x; mouse.sy = mouse.y; mouse.lx = mouse.x; mouse.ly = mouse.y; mouse.set = true; } } setSize(); setLines(); frameIdRef.current = requestAnimationFrame(tick); window.addEventListener('resize', onResize); window.addEventListener('mousemove', onMouseMove); window.addEventListener('touchmove', onTouchMove, { passive: false }); return () => { window.removeEventListener('resize', onResize); window.removeEventListener('mousemove', onMouseMove); window.removeEventListener('touchmove', onTouchMove); if (frameIdRef.current !== null) cancelAnimationFrame(frameIdRef.current); }; }, []); return (
); }