{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-generate-effect",
  "type": "registry:ui",
  "title": "Text Generate Effect",
  "description": "Reveals text word-by-word for a typing/AI-generation feel. For hero copy and intros.",
  "dependencies": [
    "@saasflare/ui",
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/text-generate-effect.tsx",
      "type": "registry:ui",
      "content": "\"use client\"\n\n/**\n * @fileoverview Text that fades in word by word with staggered timing.\n * @author Saasflare™\n * Splits text into words and animates each one sequentially, creating\n * a \"generate\" or \"type\" appearance effect. Ideal for hero headlines.\n * @module packages/ui/components/ui/text-generate-effect\n * @package ui\n *\n * @component\n * @example\n * import { TextGenerateEffect } from '@saasflare/ui';\n * <TextGenerateEffect text=\"Build your SaaS in record time\" />\n *\n * @example\n * // Slower generation with custom tag\n * <TextGenerateEffect\n *   text=\"Ship faster. Scale better. Sleep more.\"\n *   stagger={0.08}\n *   as=\"h1\"\n *   className=\"text-4xl font-bold\"\n * />\n */\n\nimport { useMemo, useRef } from \"react\"\nimport { m, useInView } from \"motion/react\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\nimport { useSaasflareMotion, springGentle } from \"@saasflare/ui\"\n\n/** Props for the TextGenerateEffect component. */\nexport interface TextGenerateEffectProps extends SaasflareComponentProps {\n  /** Text string to animate word by word. */\n  text: string\n  /** Delay between each word in seconds. Default: `0.05` */\n  stagger?: number\n  /** Duration per word fade-in in seconds. Default: `0.4` */\n  duration?: number\n  /** Whether animation triggers only once. Default: `true` */\n  once?: boolean\n  /** HTML element to render. Default: `\"p\"` */\n  as?: \"p\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"span\"\n  /** Additional class names. */\n  className?: string\n}\n\n/**\n * Text that reveals word by word with staggered fade-in.\n *\n * - Each word fades from transparent to opaque sequentially\n * - Triggers when the element scrolls into view\n * - Renders full text immediately when motion is disabled (`animated={false}`,\n *   provider opt-out, or `prefers-reduced-motion`)\n * - Preserves natural text wrapping and spacing\n *\n * @component\n * @package ui\n */\nexport function TextGenerateEffect({\n  text,\n  stagger = 0.05,\n  duration = 0.4,\n  once = true,\n  as: Tag = \"p\",\n  className,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n}: TextGenerateEffectProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  const motion = useSaasflareMotion(sf.animated, springGentle)\n  const ref = useRef<HTMLElement>(null)\n  const isInView = useInView(ref, { once, margin: \"-50px\" })\n\n  const words = useMemo(() => text.split(/\\s+/), [text])\n\n  if (motion.disabled) {\n    return (\n      <Tag\n        className={className}\n        data-slot=\"text-generate-effect\"\n        data-surface={sf.surface}\n        data-radius={sf.radius}\n        data-animated={String(sf.animated)}\n      >\n        {text}\n      </Tag>\n    )\n  }\n\n  return (\n    <Tag\n      ref={ref as React.RefObject<HTMLParagraphElement & HTMLHeadingElement & HTMLSpanElement>}\n      className={cn(\"inline\", className)}\n      data-slot=\"text-generate-effect\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n    >\n      {words.map((word, i) => (\n        <m.span\n          key={`${word}-${i}`}\n          initial={{ opacity: 0, filter: \"blur(4px)\" }}\n          animate={\n            isInView\n              ? { opacity: 1, filter: \"blur(0px)\" }\n              : { opacity: 0, filter: \"blur(4px)\" }\n          }\n          transition={{ duration, delay: i * stagger }}\n          className=\"inline-block\"\n        >\n          {word}\n          {i < words.length - 1 && \"\\u00A0\"}\n        </m.span>\n      ))}\n    </Tag>\n  )\n}\n",
      "target": "components/ui/text-generate-effect.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/text-generate-effect.json"
  }
}