{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-stagger-inview-demo",
  "title": "Text Stagger Inview Demo",
  "description": "Demo showing a split text with stagger animation.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/text-stagger-inview"
  ],
  "files": [
    {
      "path": "registry/demo/text/text-stagger-inview/index.tsx",
      "content": "'use client';\n\nimport {\n  AnimationConfig,\n  AnimationSelector,\n  StaggerInput,\n  useSetAnimationConfig,\n} from '@/components/docs/animation-config';\nimport { TextStaggerInview } from '@/components/systaliko-ui/text/text-stagger-inview';\n\nexport const TextStaggerInviewDemo = () => {\n  return (\n    <AnimationConfig>\n      <TextStaggerInviewDemoContent />\n    </AnimationConfig>\n  );\n};\n\nconst TextStaggerInviewDemoContent = () => {\n  const { animation, staggerValue } = useSetAnimationConfig();\n  return (\n    <div className=\"flex h-80 flex-col justify-between gap-8\">\n      <div className=\"flex flex-col gap-4 items-start\">\n        <AnimationSelector />\n        <StaggerInput />\n      </div>\n      <TextStaggerInview\n        key={`${animation}-${staggerValue}`}\n        animation={animation}\n        className=\"text-4xl tracking-tight font-bold\"\n        staggerValue={staggerValue}\n      >\n        Stagger Text Inview Demo\n      </TextStaggerInview>\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/systaliko-ui/demo/text/text-stagger-inview.tsx"
    }
  ],
  "type": "registry:ui"
}