{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "wave-frequency-bars",
  "type": "registry:ui",
  "title": "Audio Frequency Spectrum Equalizer",
  "description": "Multi-band audio frequency analyzer bars with spring kinematic height oscillations and gradient chromatic peaks.",
  "category": "animations",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "registry/animations/wave-frequency-bars/wave-frequency-bars.tsx",
      "type": "registry:ui",
      "target": "components/ui/wave-frequency-bars.tsx",
      "content": "import React, { useEffect, useState } from 'react';\nimport { motion } from 'framer-motion';\n\nexport const WaveFrequencyBars: React.FC = () => {\n  const [isPlaying, setIsPlaying] = useState(true);\n  const barCount = 18;\n\n  return (\n    <div className=\"flex flex-col items-center gap-4 p-6 rounded-2xl bg-zinc-100 dark:bg-zinc-950/80 border border-zinc-200 dark:border-white/10 w-full max-w-sm mx-auto shadow-md\">\n      <div className=\"w-full flex items-center justify-between text-[11px] font-mono text-zinc-500 dark:text-zinc-400\">\n        <span>MASTER AUDIO BUS</span>\n        <button\n          onClick={() => setIsPlaying(!isPlaying)}\n          className=\"px-2 py-0.5 rounded bg-zinc-200 dark:bg-white/10 hover:text-zinc-900 dark:hover:text-white transition-colors cursor-pointer\"\n        >\n          {isPlaying ? 'PAUSE' : 'PLAY'}\n        </button>\n      </div>\n\n      <div className=\"flex items-end justify-center gap-1.5 h-24 w-full\">\n        {Array.from({ length: barCount }).map((_, i) => (\n          <motion.div\n            key={i}\n            animate={\n              isPlaying\n                ? {\n                    height: ['15%', `${Math.min(95, Math.max(25, ((i * 17) % 75) + 20))}%`, '30%'],\n                  }\n                : { height: '15%' }\n            }\n            transition={{\n              repeat: Infinity,\n              repeatType: 'reverse',\n              duration: 0.4 + (i % 5) * 0.12,\n              ease: 'easeInOut',\n            }}\n            className=\"w-2.5 rounded-full bg-gradient-to-t from-indigo-500 via-cyan-400 to-emerald-400 shadow-[0_0_8px_rgba(99,102,241,0.4)]\"\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}