import React, { useRef, useEffect, useState } from "react"; import anime from "animejs"; const COLORS = [ "#22c55e", // Brand primary "#84cc16", // Brand secondary "#4ade80", // Accent "#818cf8", // Violet "#f472b6", // Pink "#fca311", // Orange "#38bdf8", // Sky blue "#f43f5e", // Coral "#f59e42", // Warm ]; function randBetween(a, b) { return a + Math.random() * (b - a); } function lerp(a, b, t) { return a + (b - a) * t; } function shadeColor(color, percent){ // percent from -1 to 1 // Simple shade via hex let R = parseInt(color.substring(1,3),16), G = parseInt(color.substring(3,5),16), B = parseInt(color.substring(5,7),16); R = ~~Math.min(255,Math.max(0,R + R*percent)); G = ~~Math.min(255,Math.max(0,G + G*percent)); B = ~~Math.min(255,Math.max(0,B + B*percent)); return `rgb(${R},${G},${B})`; } export default function App() { const canvasRef = useRef(null); const [_, setRerender] = useState(0); // force rerender for theme const [waves, setWaves] = useState( () => Array.from({length: 8}, (_,i) => ({ baseRadius: randBetween(40,120), amp: randBetween(10,50), freq: randBetween(0.8,2.6), color: COLORS[i % COLORS.length], speed: randBetween(0.5,1.8), spin: randBetween(-1,1), })) ); // Visual energy state const waveState = useRef(waves.map(() => 0.6)); // amplitude energy (0-1) const colorShift = useRef(0); const globalSpin = useRef(0); const mousePos = useRef({ x: 0.5, y: 0.5 }); const isPressed = useRef(false); const keysDown = useRef({}); // Responsive canvas size const [canvasSize, setCanvasSize] = useState({w: 480, h: 340}); useEffect(() => { function handleResize() { const dpr = window.devicePixelRatio || 1; const w = Math.min(window.innerWidth-24, 700), h = Math.min(window.innerHeight-120, 520); setCanvasSize({w, h}); } handleResize(); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); // Mouse + keyboard interactions useEffect(() => { function onMouseMove(e) { const rect = canvasRef.current.getBoundingClientRect(); mousePos.current.x = (e.clientX - rect.left) / rect.width; mousePos.current.y = (e.clientY - rect.top) / rect.height; } function onMouseDown() { isPressed.current = true; } function onMouseUp() { isPressed.current = false; } function onKeyDown(e) { if(!keysDown.current[e.code]) { keysDown.current[e.code] = true; pumpEnergy((e.keyCode % waveState.current.length), 0.72 + 0.2*Math.random()); // Small global color/shape effect colorShift.current += randBetween(-0.2,0.3); globalSpin.current += randBetween(-0.2,0.2); } } function onKeyUp(e) { keysDown.current[e.code] = false; } let canvas = canvasRef.current; canvas.addEventListener("mousemove", onMouseMove); canvas.addEventListener("mousedown", onMouseDown); canvas.addEventListener("mouseup", onMouseUp); window.addEventListener("keydown", onKeyDown); window.addEventListener("keyup", onKeyUp); return () => { canvas.removeEventListener("mousemove", onMouseMove); canvas.removeEventListener("mousedown", onMouseDown); canvas.removeEventListener("mouseup", onMouseUp); window.removeEventListener("keydown", onKeyDown); window.removeEventListener("keyup", onKeyUp); }; }, [waves]); // Energy bump on activity function pumpEnergy(waveIdx, amount) { const energies = waveState.current; energies[waveIdx % energies.length] = Math.min(1.0, energies[waveIdx % energies.length] + amount); } // Animate: draw continuously useEffect(() => { let raf; let last = performance.now(); function draw() { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); const dpr = window.devicePixelRatio || 1; const w = canvas.width, h = canvas.height; ctx.clearRect(0,0,w,h); // Background gradient const grad = ctx.createLinearGradient(0,0,w, h); grad.addColorStop(0, shadeColor("#22c55e", 0.16+0.3*Math.sin(performance.now()/3500))); grad.addColorStop(1, shadeColor("#4ade80", -0.08+0.1*Math.cos(performance.now()/2100))); ctx.fillStyle = grad; ctx.fillRect(0,0,w,h); const t = performance.now()/1000; // Animate energy levels (decay) waveState.current.forEach((val,i,arr) => { arr[i] = lerp(val, 0.3, 0.017); // smooth decay to ~0.3 baseline if (isPressed.current && i==0) arr[i] = Math.min(1.0, arr[i] + 0.012); // mouse hold highlights first wave }); // Animate global effect decay colorShift.current *= 0.89; globalSpin.current *= 0.92; // Draw all waves for(let idx=waves.length-1; idx>=0; idx--) { const cfg = waves[idx]; const energy = waveState.current[idx]; const mx = mousePos.current.x, my = mousePos.current.y; const sway = Math.sin(t * cfg.speed + idx) * 0.3 + Math.cos(t * 0.7 + idx*0.9 + mx*3) * 0.18; const angleOffset = (t * cfg.spin * (0.8+my)) + globalSpin.current + idx*0.19 + colorShift.current*0.6; ctx.save(); ctx.translate(w/2, h/2); ctx.rotate(angleOffset); // Wave ring: draw shape ctx.beginPath(); let points = 90 + idx*10; for(let i=0; i<=points; i++){ let theta = (i/points) * Math.PI*2; // Pulsing/Deforming radius using sine + energy modulation + mouse let deform = Math.sin(theta * cfg.freq + t * (1.4 + idx*0.1) + sway * 2) * (cfg.amp * (0.7 + 0.7*energy)); // Mouse Y impacts bulge; mouse X shifts contour deform += Math.sin(theta * mx * 2 + my) * (30*mx*my) * (0.25+energy*0.4); // Keyboard globalSpin boosts amplitude deform += Math.sin(theta*1.2 + globalSpin.current * 2 + angleOffset) * 6 * (0.5+energy*0.8); let r = cfg.baseRadius + deform; let x = r * Math.cos(theta); let y = r * Math.sin(theta); if(i===0) ctx.moveTo(x,y); else ctx.lineTo(x,y); } // Fill style: color with alpha blends for trailing effect let col = cfg.color; const baseAlpha = 0.28 + 0.14 * energy; ctx.fillStyle = `rgba(${parseInt(col.substring(1,3),16)},${parseInt(col.substring(3,5),16)},${parseInt(col.substring(5,7),16)},${baseAlpha.toFixed(2)})`; ctx.shadowColor = shadeColor(col, 0.32); ctx.shadowBlur = 20 + 36*energy; ctx.closePath(); ctx.fill(); // Outer stroke border if(idx%2===0) { ctx.strokeStyle = `rgba(80,80,80,${0.15+0.07*energy})`; ctx.lineWidth = 2+ energy*3; ctx.shadowBlur = 0; ctx.stroke(); } ctx.restore(); } // Light burst at center ctx.save(); ctx.translate(w/2,h/2); let baseGlow = waveState.current.reduce((a,b)=>a+b,0)/waves.length; ctx.beginPath(); ctx.arc(0,0,28+38*baseGlow, 0,2*Math.PI); ctx.globalAlpha = 0.19+0.26*baseGlow; ctx.fillStyle = shadeColor('#fca311', baseGlow-0.2); ctx.shadowColor = '#fff4cc'; ctx.shadowBlur = 80+ 50*baseGlow; ctx.fill(); ctx.restore(); raf = requestAnimationFrame(draw); } draw(); return () => raf && cancelAnimationFrame(raf); }, [waves, canvasSize]); // Kick in a visual pop on click const handleCanvasClick = () => { anime({ targets: waveState.current, value: (el,i)=>Math.min(1,el + 0.48+0.25*Math.random()), easing: "easeOutQuad", duration: 200 }); colorShift.current += randBetween(-0.16, 0.32); globalSpin.current += randBetween(-0.08,0.3); }; // Hint animation state for touch/mouse/keys const [showHint, setShowHint] = useState(true); useEffect(()=>{ let t = setTimeout(()=>setShowHint(false),3000); return ()=>clearTimeout(t); },[]); return (

Moodwave Visualizer

Shapes, waves, and aura-like colors swirl and pulse as you move your mouse or tap any key.
The visuals dance to your gestures—try building a rhythm! No sound needed, just play and enjoy the visuals.

Mouse: Sways shapes & bulges ring Keyboard: Pops, spins & colors Click: Bursts every wave

Artwork reacts live — all visuals are generative, no audio needed.

); }