{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "waveform-hero",
  "type": "registry:component",
  "title": "Waveform hero",
  "description": "A hero with an audio waveform of hairline bars that pulse in a staggered loop, a headline, copy and a magnetic CTA. Bars hold still for reduced motion.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/magnetic-cta.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/waveform-hero.tsx",
      "type": "registry:ui",
      "target": "components/ui/waveform-hero.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { MagneticCta } from \"@/components/ui/magnetic-cta\"\n\nfunction WaveformHero({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  const bars = Array.from({ length: 48 }, (_, i) => 20 + Math.abs(Math.sin(i * 0.45)) * 70)\n  return (\n    <section data-slot=\"waveform-hero\" data-tier=\"premium\" className={cn(\"overflow-hidden rounded-2xl border border-border bg-bg px-4 py-12 sm:px-6 sm:py-16\", className)}>\n      <div className=\"mx-auto flex max-w-3xl flex-col items-center text-center\">\n        <h2 className=\"text-[clamp(1.75rem,3.5vw+1rem,3rem)] font-medium tracking-[-0.028em] text-fg\">Sound without the noise</h2>\n        <p className=\"mt-3 max-w-md text-sm leading-[1.55] text-fg-muted\">A kinetic waveform drawn in hairline bars. It holds still for anyone who prefers reduced motion.</p>\n        <div className=\"mt-8 flex h-20 w-full max-w-full items-end justify-center gap-0.5 overflow-hidden sm:mt-10 sm:h-24 sm:gap-1\" role=\"img\" aria-label=\"Decorative audio waveform\">\n          {bars.map((h, i) => (\n            <motion.div\n              key={i}\n              className=\"w-1.5 rounded-full bg-accent/80\"\n              style={{ height: `${h}%` }}\n              animate={reduce ? undefined : { scaleY: [0.55, 1, 0.7, 1] }}\n              transition={reduce ? undefined : { duration: 1.6 + (i % 5) * 0.1, repeat: Infinity, ease: \"easeInOut\", delay: i * 0.02 }}\n            />\n          ))}\n        </div>\n        <div className=\"mt-8\"><MagneticCta>Start free</MagneticCta></div>\n      </div>\n    </section>\n  )\n}\nexport { WaveformHero }\n"
    }
  ]
}