{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"audio-wave-visualizer","type":"registry:component","title":"Audio Wave Visualizer","description":"A bouncing equalizer bar animation for audio/podcast/music UI.","dependencies":["framer-motion"],"registryDependencies":[],"files":[{"path":"components/viberdy/audio-wave-visualizer.tsx","content":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { motion } from \"framer-motion\";\n\nconst BAR_COUNT = 24;\n\nfunction seededBars() {\n  return Array.from({ length: BAR_COUNT }, (_, i) => ({\n    base: 45 + ((i * 37) % 40),\n    duration: 0.7,\n    delay: (i % 6) * 0.06,\n  }));\n}\n\nexport function AudioWaveVisualizer({\n  playing = true,\n  color = \"#ff2d2d\",\n}: {\n  playing?: boolean;\n  color?: string;\n}) {\n  const [bars, setBars] = useState(seededBars);\n\n  useEffect(() => {\n    setBars(\n      Array.from({ length: BAR_COUNT }, () => ({\n        base: 20 + Math.random() * 60,\n        duration: 0.5 + Math.random() * 0.6,\n        delay: Math.random() * 0.4,\n      })),\n    );\n  }, []);\n\n  return (\n    <div className=\"flex h-24 items-center justify-center gap-[3px] rounded-2xl border border-neutral-200 px-4\">\n      {bars.map((bar, i) => (\n        <motion.span\n          key={i}\n          className=\"w-[3px] rounded-full\"\n          style={{ background: color }}\n          animate={\n            playing\n              ? { height: [`${bar.base * 0.3}%`, `${bar.base}%`, `${bar.base * 0.5}%`, `${bar.base * 0.85}%`] }\n              : { height: \"10%\" }\n          }\n          transition={\n            playing\n              ? { duration: bar.duration, delay: bar.delay, repeat: Infinity, repeatType: \"mirror\", ease: \"easeInOut\" }\n              : { duration: 0.3 }\n          }\n        />\n      ))}\n    </div>\n  );\n}\n","type":"registry:component","target":"components/viberdy/audio-wave-visualizer.tsx"}],"meta":{"tier":"free","tags":["audio","equalizer","visualizer","waveform"],"href":"https://viberdy.dev/library/audio-wave-visualizer","aiPrompt":"Create a React + Tailwind + Framer Motion \"audio equalizer bar visualizer\" component named AudioWaveVisualizer.\n\nBehavior:\n- A row of ~24 thin vertical bars whose heights continuously animate up and down like a music equalizer, each bar with its OWN randomized base height, duration, and delay, animated via Framer Motion's `animate` with an array of height keyframes and `repeat: Infinity, repeatType: \"mirror\"` — do not apply one identical shared animation to every bar, which reads as a single pulsing block instead of an organic equalizer.\n- IMPORTANT SSR/hydration detail: generate the per-bar randomization with `Math.random()` inside a post-mount `useEffect`, NOT inside a `useState(() => ...)` initializer — an initializer runs during render, including any server-render pass, and `Math.random()` there produces different values server-side vs. the first client render, which React flags as a hydration mismatch. Seed the initial state with a small deterministic pattern instead (e.g. derived from each bar's index), then replace it with real randomness in a one-time effect after mount, exactly like the standard \"mounted\" SSR-safety pattern.\n- A `playing` boolean prop: when false, all bars settle to a small flat height instead of animating.\n- Props: playing, color (bar fill color).\n\nStyle: compact rounded card, thin bars with small gaps, calm continuous bounce, not jittery.\n\nOutput a single self-contained \"use client\" component.","license":"https://viberdy.dev/license"}}