{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-kinetic",
  "type": "registry:component",
  "title": "Pricing kinetic",
  "description": "A pricing section pairing a kinetic headline and a typographic marquee with a free versus premium feature comparison table. Built for React launch pages.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/feature-comparison.json",
    "https://ui.minidev.pro/r/magnetic-cta.json",
    "https://ui.minidev.pro/r/morph-price.json",
    "https://ui.minidev.pro/r/typographic-marquee.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/pricing-kinetic.tsx",
      "type": "registry:ui",
      "target": "components/ui/pricing-kinetic.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { MorphPrice } from \"@/components/ui/morph-price\"\nimport { FeatureComparison } from \"@/components/ui/feature-comparison\"\nimport { MagneticCta } from \"@/components/ui/magnetic-cta\"\nimport { TypographicMarquee } from \"@/components/ui/typographic-marquee\"\n\nfunction PricingKinetic({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  return (\n    <div data-slot=\"pricing-kinetic\" data-tier=\"premium\" className={cn(\"space-y-12\", className)}>\n      <div className=\"space-y-3 text-center\">\n        <motion.h2 initial={reduce ? false : { y: 10 }} animate={{ y: 0 }} className=\"text-4xl font-medium tracking-[-0.030em] text-fg\">\n          Price the moment\n        </motion.h2>\n        <p className=\"text-sm text-fg-muted\">Morphing price, comparison, magnetic close.</p>\n      </div>\n      <TypographicMarquee />\n      <div className=\"mx-auto max-w-md\"><MorphPrice /></div>\n      <FeatureComparison\n        rows={[\n          { feature: \"Product UI\", free: true, premium: true },\n          { feature: \"Kinetic heroes\", free: false, premium: true },\n          { feature: \"Page kits\", free: false, premium: true },\n          { feature: \"Audit gate\", free: true, premium: true },\n        ]}\n      />\n      <div className=\"flex justify-center\"><MagneticCta size=\"lg\">Upgrade to Pro</MagneticCta></div>\n    </div>\n  )\n}\nexport { PricingKinetic }\n"
    }
  ]
}