{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <educlopez93@gmail.com>","css":{},"dependencies":["motion"],"description":"A SharedAxisX text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\n\nexport interface SharedAxisXProps {\n  className?: string;\n  /** Interval between phrase swaps in milliseconds. */\n  interval?: number;\n  phrases: string[];\n}\n\nconst ENTER_EASE = [0.2, 0, 0, 1] as const;\nconst EXIT_EASE = [0.4, 0, 1, 1] as const;\n\n/**\n * SharedAxisX — horizontal shared-axis phrase transition inspired by Google Material.\n * Outgoing phrase slides left as the next slides in from the right.\n * From the animate-text catalog (`shared-axis-x`).\n */\nexport default function SharedAxisX({\n  phrases,\n  className = \"\",\n  interval = 2500,\n}: SharedAxisXProps) {\n  const [index, setIndex] = useState(0);\n  const shouldReduceMotion = useReducedMotion();\n\n  useEffect(() => {\n    const id = setInterval(() => {\n      setIndex((prev) => (prev + 1) % phrases.length);\n    }, interval);\n    return () => clearInterval(id);\n  }, [interval, phrases.length]);\n\n  return (\n    <span\n      aria-live=\"polite\"\n      className={`relative inline-block overflow-hidden ${className}`}\n    >\n      <AnimatePresence mode=\"wait\">\n        <motion.span\n          animate={\n            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1, x: 0 }\n          }\n          exit={\n            shouldReduceMotion\n              ? { opacity: 0, transition: { duration: 0 } }\n              : {\n                  opacity: 0,\n                  scale: 0.98,\n                  transition: { duration: 0.36, ease: EXIT_EASE },\n                  x: -20,\n                }\n          }\n          initial={\n            shouldReduceMotion\n              ? { opacity: 1 }\n              : { opacity: 0, scale: 0.98, x: 24 }\n          }\n          key={index}\n          style={{ display: \"inline-block\" }}\n          transition={\n            shouldReduceMotion\n              ? { duration: 0 }\n              : { duration: 0.5, ease: ENTER_EASE }\n          }\n        >\n          {phrases[index]}\n        </motion.span>\n      </AnimatePresence>\n    </span>\n  );\n}\n","path":"index.tsx","target":"components/smoothui/shared-axis-x/index.tsx","type":"registry:ui"}],"name":"shared-axis-x","registryDependencies":[],"title":"Shared Axis X","type":"registry:ui"}