{"name":"text-reveal","type":"registry:component","files":[{"path":"text-reveal.tsx","type":"registry:component","target":"components/animated/text-reveal.tsx","content":"\"use client\";\n\nimport { motion, type Transition, useInView, useReducedMotion } from \"motion/react\";\nimport {\n  useRef,\n  type ComponentType,\n  type ElementType,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { EASE_OUT } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\ntype SplitMode = \"word\" | \"char\";\n\nexport interface TextRevealProps {\n  text: string | string[];\n  as?: ElementType;\n  className?: string;\n  split?: SplitMode;\n  stagger?: number;\n  delay?: number;\n  blur?: number;\n  yOffset?: string | number;\n  spring?: { stiffness?: number; damping?: number; mass?: number };\n  once?: boolean;\n  whileInView?: boolean;\n  children?: ReactNode;\n}\n\nconst DEFAULT_SPRING = { stiffness: 140, damping: 26, mass: 1.2 };\n\ntype TextRevealRootProps = {\n  children?: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLElement>;\n};\n\nexport function TextReveal({\n  text,\n  as: Comp = \"span\",\n  className,\n  split = \"word\",\n  stagger = 0.09,\n  delay = 0,\n  blur = 12,\n  yOffset = \"40%\",\n  spring,\n  once = true,\n  whileInView = false,\n  children,\n}: TextRevealProps) {\n  const Root = Comp as ComponentType<TextRevealRootProps>;\n  const ref = useRef<HTMLElement>(null);\n  const inView = useInView(ref, { once, amount: 0.4 });\n  const reduce = useReducedMotion();\n  const shouldAnimate = whileInView ? inView : true;\n\n  const lines = Array.isArray(text) ? text : [text];\n  const s = { ...DEFAULT_SPRING, ...spring };\n\n  const lineOffsets = lines.map((_, lineIndex) =>\n    lines\n      .slice(0, lineIndex)\n      .reduce(\n        (count, line) =>\n          count + (split === \"word\" ? line.split(\" \").length : Array.from(line).length),\n        0,\n      ),\n  );\n\n  return (\n    <Root ref={ref} className={cn(\"block\", className)}>\n      {lines.map((line, lineIndex) => {\n        const units = split === \"word\" ? line.split(\" \") : Array.from(line);\n        const lineKey = `${line}-${lineIndex}`;\n\n        return (\n          <span key={lineKey} className=\"block\">\n            {units.map((unit, i) => {\n              const d = delay + (lineOffsets[lineIndex] + i) * stagger;\n              const unitKey = `${unit}-${i}`;\n              const initial = reduce\n                ? { opacity: 0 }\n                : { y: yOffset, opacity: 0, filter: `blur(${blur}px)` };\n              const animate = shouldAnimate\n                ? reduce\n                  ? { opacity: 1 }\n                  : { y: 0, opacity: 1, filter: \"blur(0px)\" }\n                : initial;\n              const transition: Transition = reduce\n                ? { opacity: { duration: 0.25, ease: EASE_OUT, delay: d * 0.3 } }\n                : {\n                    y: { type: \"spring\" as const, ...s, delay: d },\n                    opacity: { duration: 0.7, ease: EASE_OUT, delay: d },\n                    filter: { duration: 0.9, ease: EASE_OUT, delay: d },\n                  };\n              return (\n                <motion.span\n                  key={unitKey}\n                  initial={initial}\n                  animate={animate}\n                  transition={transition}\n                  className=\"inline-block will-change-transform\"\n                >\n                  {unit}\n                  {split === \"word\" && i < units.length - 1 ? (\n                    <span className=\"inline-block\">&nbsp;</span>\n                  ) : null}\n                </motion.span>\n              );\n            })}\n          </span>\n        );\n      })}\n      {children}\n    </Root>\n  );\n}\n"}],"dependencies":["motion"],"registryDependencies":["https://www.honestui.com/r/ease.json"]}