"use client"; import { useEffect, useRef } from "react"; import { cn } from "@/lib/utils"; export function WavyBackground({ children, className, colors = ["#7c6cff", "#5b8cff", "#a78bfa"], }: { children?: React.ReactNode; className?: string; colors?: string[]; }) { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; let raf = 0; let width = 0; let height = 0; let t = 0; function resize() { if (!canvas) return; const rect = canvas.getBoundingClientRect(); width = rect.width; height = rect.height; const dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = width * dpr; canvas.height = height * dpr; ctx?.setTransform(dpr, 0, 0, dpr, 0, 0); } function drawWave( offset: number, amplitude: number, wavelength: number, color: string, alpha: number ) { if (!ctx) return; ctx.beginPath(); ctx.moveTo(0, height); for (let x = 0; x <= width; x += 8) { const y = height * 0.55 + Math.sin(x / wavelength + t + offset) * amplitude + Math.sin(x / (wavelength * 2) - t * 0.6) * amplitude * 0.4; ctx.lineTo(x, y); } ctx.lineTo(width, height); ctx.closePath(); ctx.globalAlpha = alpha; ctx.fillStyle = color; ctx.fill(); ctx.globalAlpha = 1; } function draw() { if (!ctx) return; t += 0.008; ctx.clearRect(0, 0, width, height); drawWave(0, 30, 120, colors[0] ?? "#7c6cff", 0.35); drawWave(2, 40, 160, colors[1] ?? "#5b8cff", 0.3); drawWave(4, 25, 100, colors[2] ?? "#a78bfa", 0.25); raf = requestAnimationFrame(draw); } resize(); draw(); const ro = new ResizeObserver(resize); ro.observe(canvas); return () => { cancelAnimationFrame(raf); ro.disconnect(); }; }, [colors]); return (

); } export default function Demo() { return (

Wavy Background

Layered flowing wave blobs animate gently behind your content.

); }