{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-split-motion-demo",
  "type": "registry:component",
  "title": "Hero — split (motion) example",
  "description": "Usage example (demo) for Hero — split (motion): the code behind the preview on https://facadeui.dev/components/hero-split-motion. Installs the items it uses.",
  "categories": [
    "example"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/examples-content.json",
    "https://facadeui.dev/r/hero-split-motion.json"
  ],
  "files": [
    {
      "path": "hero-split-motion.tsx",
      "type": "registry:component",
      "target": "components/examples/hero-split-motion-demo.tsx",
      "content": "\"use client\"\n\n/**\n * The `hero-split` demo, with the motion variant swapped in.\n *\n * Identical props: the motion variant only changes which slot components\n * the static section renders through.\n *\n * `\"use client\"` is required here, not incidental: the motion variant is a\n * client component, and icon components cannot cross a server-to-client\n * boundary as props. See the note on `IconComponent`.\n */\n\nimport { HeroSplitMotion } from \"@/components/sections/hero-split-motion\"\n\nimport { ACTIONS, MediaPlaceholder } from \"./content\"\n\nexport function Demo() {\n  return (\n    <HeroSplitMotion\n      eyebrow=\"Sections\"\n      title=\"Build the page, not the primitives\"\n      description=\"Every section takes typed content and slots, so assembling a landing page is composition rather than another round of copy-paste.\"\n      actions={ACTIONS}\n      note=\"Works in any React 19 project.\"\n      media={<MediaPlaceholder label=\"Product screenshot\" />}\n      headingLevel={1}\n      spacing=\"md\"\n    />\n  )\n}\n"
    }
  ],
  "docs": "Example only: components/examples/hero-split-motion-demo.tsx renders Hero — split (motion) with sample content from components/examples/content.tsx. Copy what you need into your page. Docs: https://facadeui.dev/components/hero-split-motion"
}