{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-stagger-hover-demo",
  "title": "Text Stagger Hover Demo",
  "description": "Demo showing a split text with stagger animation on hover.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/text-stagger-hover"
  ],
  "files": [
    {
      "path": "registry/demo/text/text-stagger-hover/index.tsx",
      "content": "'use client';\nimport {\n  AnimationConfig,\n  AnimationSelector,\n  StaggerSelector,\n  useSetAnimationConfig,\n} from '@/components/docs/animation-config';\nimport {\n  TextStaggerHover,\n  TextStaggerHoverActive,\n  TextStaggerHoverHidden,\n} from '@/components/systaliko-ui/text/text-stagger-hover';\n\nconst TextStaggerHoverDemoContent = () => {\n  const { animation, staggerDirection } = 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        <StaggerSelector />\n      </div>\n\n      <TextStaggerHover className=\"cursor-pointer text-4xl font-bold uppercase tracking-tighter\">\n        <TextStaggerHoverActive\n          key={`${animation}-${staggerDirection}`}\n          className=\"opacity-20\"\n          transition={{ duration: 0.3, ease: 'easeOut' }}\n          animation={animation}\n          staggerDirection={staggerDirection}\n        >\n          Text Stagger Hover Demo\n        </TextStaggerHoverActive>\n\n        <TextStaggerHoverHidden\n          key={`${animation}-${staggerDirection}-2`}\n          animation={animation}\n          transition={{ duration: 0.3, ease: 'easeOut' }}\n          staggerDirection={staggerDirection}\n        >\n          Text Stagger Hover Demo\n        </TextStaggerHoverHidden>\n      </TextStaggerHover>\n    </div>\n  );\n};\n\nexport const TextStaggerHoverDemo = () => {\n  return (\n    <AnimationConfig>\n      <TextStaggerHoverDemoContent />\n    </AnimationConfig>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/systaliko-ui/demo/text/text-stagger-hover.tsx"
    }
  ],
  "type": "registry:ui"
}