{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <educlopez93@gmail.com>","css":{},"dependencies":["motion"],"description":"A ScaleDownFade text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useInView, useReducedMotion } from \"motion/react\";\nimport { useRef } from \"react\";\n\nexport interface ScaleDownFadeProps {\n  children: string;\n  className?: string;\n  /** Delay before the animation starts, in milliseconds. */\n  delay?: number;\n  /** Animate only once the text scrolls into view. */\n  triggerOnView?: boolean;\n}\n\nconst DURATION_S = 0.52;\nconst MS = 1000;\nconst EASE = [0.22, 1, 0.36, 1] as const;\n\n/**\n * ScaleDownFade — subtle premium settle-in where the text enters slightly\n * scaled up and drifts down to its natural size. The whole text animates as\n * a single element. From the animate-text catalog (`scale-down-fade`).\n * Safe default for product UIs where copy should feel polished but not animated.\n */\nexport default function ScaleDownFade({\n  children,\n  className = \"\",\n  delay = 0,\n  triggerOnView = false,\n}: ScaleDownFadeProps) {\n  const ref = useRef<HTMLSpanElement>(null);\n  const inView = useInView(ref, { once: true });\n  const shouldReduceMotion = useReducedMotion();\n  const play = (!triggerOnView || inView) && !shouldReduceMotion;\n\n  return (\n    <motion.span\n      animate={play ? { opacity: 1, scale: 1, y: 0 } : undefined}\n      aria-label={children}\n      className={className}\n      initial={\n        shouldReduceMotion ? { opacity: 1 } : { opacity: 0, scale: 1.04, y: 8 }\n      }\n      ref={ref}\n      style={{ display: \"inline-block\" }}\n      transition={\n        shouldReduceMotion\n          ? { duration: 0 }\n          : {\n              delay: delay / MS,\n              duration: DURATION_S,\n              ease: EASE,\n            }\n      }\n    >\n      {children}\n    </motion.span>\n  );\n}\n","path":"index.tsx","target":"components/smoothui/scale-down-fade/index.tsx","type":"registry:ui"}],"name":"scale-down-fade","registryDependencies":[],"title":"Scale Down Fade","type":"registry:ui"}