{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-kinetic-type",
  "type": "registry:component",
  "title": "Hero kinetic type",
  "description": "A kinetic type hero where each headline line slides up from a mask with staggered timing and the last line is accented. Pass your own lines and copy.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/hero-kinetic-type.tsx",
      "type": "registry:ui",
      "target": "components/ui/hero-kinetic-type.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\nfunction HeroKineticType({\n  lines = [\"Ship interfaces\", \"that feel\", \"composed.\"],\n  description = \"Plan, build and ship from one calm workspace. Every detail considered, nothing in your way.\",\n  className,\n}: {\n  lines?: string[]\n  description?: string\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  return (\n    <section\n      data-slot=\"hero-kinetic-type\"\n      data-tier=\"premium\"\n      className={cn(\n        \"relative overflow-hidden rounded-2xl border border-border bg-bg px-4 py-14 sm:px-12 sm:py-28\",\n        className\n      )}\n    >\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute inset-x-0 top-0 h-px bg-[linear-gradient(90deg,transparent,color-mix(in_oklch,var(--accent)_50%,transparent),transparent)]\"\n      />\n      <div className=\"relative mx-auto max-w-4xl min-w-0\">\n        <h1 className=\"text-[clamp(1.75rem,4vw+1rem,3.75rem)] font-medium leading-[1.08] tracking-[-0.028em] text-fg sm:leading-[1.05] sm:tracking-[-0.034em]\">\n          {lines.map((line, i) => (\n            <span key={line} className=\"block overflow-hidden py-0.5\">\n              <motion.span\n                className=\"block\"\n                initial={reduce ? false : { y: \"110%\" }}\n                animate={{ y: 0 }}\n                transition={{ duration: 0.7, delay: 0.08 + i * 0.1, ease: [0.22, 1, 0.36, 1] }}\n              >\n                {i === lines.length - 1 ? (\n                  <span className=\"bg-[linear-gradient(100deg,var(--fg)_0%,var(--accent)_60%,var(--accent-2)_100%)] bg-clip-text text-transparent\">\n                    {line}\n                  </span>\n                ) : (\n                  line\n                )}\n              </motion.span>\n            </span>\n          ))}\n        </h1>\n        <motion.p\n          initial={reduce ? false : { y: 12 }}\n          animate={{ y: 0 }}\n          transition={{ delay: 0.45, duration: 0.45 }}\n          className=\"mt-5 max-w-lg text-sm leading-[1.55] text-fg-muted sm:mt-6 sm:text-base\"\n        >\n          {description}\n        </motion.p>\n        <motion.div\n          initial={reduce ? false : { y: 10 }}\n          animate={{ y: 0 }}\n          transition={{ delay: 0.55 }}\n          className=\"mt-7 flex flex-col gap-3 sm:mt-8 sm:flex-row sm:flex-wrap\"\n        >\n          <Button className=\"w-full sm:w-auto\">Start free trial</Button>\n          <Button variant=\"outline\" className=\"w-full sm:w-auto\">Free kit</Button>\n        </motion.div>\n      </div>\n    </section>\n  )\n}\nexport { HeroKineticType }\n"
    }
  ]
}