{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "audio-waveform-visualizer",
  "type": "registry:ui",
  "title": "Audio Waveform Visualizer",
  "description": "Kinetic frequency equalizer with spring bouncing bars, soundwave playback toggles, and BPM tracking.",
  "category": "3d",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/3d/audio-waveform-visualizer/audio-waveform-visualizer.tsx",
      "type": "registry:ui",
      "target": "components/ui/audio-waveform-visualizer.tsx",
      "content": "import React, { useState } from 'react';\nimport { motion } from 'framer-motion';\nimport { Play, Pause, SpeakerHigh } from '@phosphor-icons/react';\n\nexport const AudioWaveformVisualizer: React.FC = () => {\n  const [isPlaying, setIsPlaying] = useState(true);\n\n  const bars = Array.from({ length: 22 });\n\n  return (\n    <div className=\"w-full max-w-sm mx-auto p-5 rounded-3xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-950 shadow-xl font-mono\">\n      <div className=\"flex items-center justify-between pb-3 border-b border-zinc-200 dark:border-white/10\">\n        <div className=\"flex items-center gap-2\">\n          <SpeakerHigh size={16} className=\"text-indigo-500\" />\n          <span className=\"text-xs font-bold text-zinc-900 dark:text-white\">SYNTHESIS AUDIO CORE</span>\n        </div>\n        <span className=\"text-[10px] text-emerald-500 font-bold\">128 BPM</span>\n      </div>\n\n      <div className=\"flex items-center justify-between h-20 my-4 px-2\">\n        {bars.map((_, i) => (\n          <motion.div\n            key={i}\n            animate={{\n              height: isPlaying\n                ? [`${Math.sin(i * 0.5) * 35 + 40}%`, `${Math.cos(i * 0.8) * 30 + 35}%`, `${Math.sin(i * 1.2) * 40 + 45}%`]\n                : '15%',\n            }}\n            transition={{\n              duration: 0.6 + (i % 5) * 0.1,\n              repeat: Infinity,\n              repeatType: 'reverse',\n              ease: 'easeInOut',\n            }}\n            className=\"w-1.5 rounded-full bg-gradient-to-t from-indigo-600 via-violet-500 to-cyan-400\"\n          />\n        ))}\n      </div>\n\n      <div className=\"flex items-center justify-between pt-2\">\n        <span className=\"text-[11px] text-zinc-500\">Spatial Kernel Audio #04</span>\n        <button\n          onClick={() => setIsPlaying(!isPlaying)}\n          className=\"flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 hover:bg-indigo-500 text-white transition-colors cursor-pointer\"\n        >\n          {isPlaying ? <Pause size={14} weight=\"fill\" /> : <Play size={14} weight=\"fill\" />}\n        </button>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}