shadcn/app/public/registry/styles/default/animated-text.json

{
  "name": "animated-text",
  "description": "Text with reveal animations",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "name": "animated-text.tsx",
      "content": "\"use client\"\n\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\"\nimport { AnimatePresence, motion, Variants } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Custom hook to detect prefers-reduced-motion\n */\nfunction usePrefersReducedMotion(): boolean {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false)\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return\n\n    const mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n    setPrefersReducedMotion(mediaQuery.matches)\n\n    const handleChange = (event: MediaQueryListEvent) => {\n      setPrefersReducedMotion(event.matches)\n    }\n\n    mediaQuery.addEventListener(\"change\", handleChange)\n    return () => mediaQuery.removeEventListener(\"change\", handleChange)\n  }, [])\n\n  return prefersReducedMotion\n}\n\nexport interface AnimatedTextProps {\n  /**\n   * Text to animate\n   */\n  text: string\n  /**\n   * Animation type\n   */\n  animation?:\n    | \"typewriter\"\n    | \"wordReveal\"\n    | \"letterShuffle\"\n    | \"gradient\"\n    | \"glitch\"\n  /**\n   * Animation duration in milliseconds\n   */\n  duration?: number\n  /**\n   * Delay between characters/words in milliseconds\n   */\n  delay?: number\n  /**\n   * Whether to repeat the animation\n   */\n  repeat?: boolean\n  /**\n   * Repeat delay in milliseconds\n   */\n  repeatDelay?: number\n  /**\n   * Whether to start animation automatically\n   */\n  autoStart?: boolean\n  /**\n   * Callback when animation completes\n   */\n  onComplete?: () => void\n  /**\n   * Custom CSS class\n   */\n  className?: string\n  /**\n   * Custom styling\n   */\n  style?: React.CSSProperties\n  /**\n   * Gradient colors for gradient animation\n   */\n  gradientColors?: string[]\n  /**\n   * Glitch intensity (0-1)\n   */\n  glitchIntensity?: number\n  /**\n   * Cursor character for typewriter\n   */\n  cursor?: string\n  /**\n   * Whether to show cursor\n   */\n  showCursor?: boolean\n}\n\nconst letterVariants: Variants = {\n  hidden: { opacity: 0, y: 20 },\n  visible: (i: number) => ({\n    opacity: 1,\n    y: 0,\n    transition: {\n      delay: i * 0.05,\n      duration: 0.3,\n      ease: \"easeOut\",\n    },\n  }),\n}\n\nconst wordVariants: Variants = {\n  hidden: { opacity: 0, scale: 0.8, y: 20 },\n  visible: (i: number) => ({\n    opacity: 1,\n    scale: 1,\n    y: 0,\n    transition: {\n      delay: i * 0.1,\n      duration: 0.5,\n      ease: \"easeOut\",\n    },\n  }),\n}\n\nconst glitchVariants: Variants = {\n  glitch: {\n    x: [0, -2, 2, -1, 1, 0],\n    filter: [\n      \"hue-rotate(0deg)\",\n      \"hue-rotate(90deg)\",\n      \"hue-rotate(180deg)\",\n      \"hue-rotate(270deg)\",\n      \"hue-rotate(0deg)\",\n    ],\n    transition: {\n      duration: 0.2,\n      repeat: Infinity,\n      repeatType: \"reverse\",\n    },\n  },\n}\n\n/**\n * Generate random characters for shuffle effect\n */\nfunction getRandomChar(): string {\n  const chars =\n    \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*\"\n  return chars[Math.floor(Math.random() * chars.length)]\n}\n\n/**\n * Typewriter animation hook\n */\nfunction useTypewriter(text: string, speed: number, autoStart: boolean) {\n  const [displayText, setDisplayText] = useState(\"\")\n  const [isComplete, setIsComplete] = useState(false)\n  const [currentIndex, setCurrentIndex] = useState(0)\n\n  const startAnimation = useCallback(() => {\n    setDisplayText(\"\")\n    setCurrentIndex(0)\n    setIsComplete(false)\n  }, [])\n\n  useEffect(() => {\n    if (!autoStart) return\n    startAnimation()\n  }, [text, autoStart, startAnimation])\n\n  useEffect(() => {\n    if (currentIndex < text.length && !isComplete) {\n      const timer = setTimeout(() => {\n        setDisplayText((prev) => prev + text[currentIndex])\n        setCurrentIndex((prev) => prev + 1)\n      }, speed)\n\n      return () => clearTimeout(timer)\n    } else if (currentIndex >= text.length) {\n      setIsComplete(true)\n    }\n  }, [currentIndex, text, speed, isComplete])\n\n  return { displayText, isComplete, startAnimation }\n}\n\n/**\n * Letter shuffle animation hook\n */\nfunction useLetterShuffle(text: string, duration: number, autoStart: boolean) {\n  const [displayText, setDisplayText] = useState(text)\n  const [isAnimating, setIsAnimating] = useState(false)\n\n  const startAnimation = useCallback(() => {\n    setIsAnimating(true)\n    let iterations = 0\n    const maxIterations = text.length\n\n    const interval = setInterval(() => {\n      setDisplayText(() =>\n        text\n          .split(\"\")\n          .map((char, index) => {\n            if (index < iterations) {\n              return text[index]\n            }\n            return char === \" \" ? \" \" : getRandomChar()\n          })\n          .join(\"\")\n      )\n\n      if (iterations >= maxIterations) {\n        clearInterval(interval)\n        setDisplayText(text)\n        setIsAnimating(false)\n      }\n\n      iterations += 1 / 3\n    }, duration / maxIterations)\n\n    // Store interval ref for cleanup\n    const currentInterval = interval\n    return () => clearInterval(currentInterval)\n  }, [text, duration])\n\n  useEffect(() => {\n    if (autoStart) {\n      startAnimation()\n    }\n  }, [autoStart, startAnimation])\n\n  return { displayText, isAnimating, startAnimation }\n}\n\n/**\n * Animated text component with multiple animation types\n */\nexport function AnimatedText({\n  text,\n  animation = \"typewriter\",\n  duration = 2000,\n  delay = 50,\n  repeat = false,\n  repeatDelay = 1000,\n  autoStart = true,\n  onComplete,\n  className,\n  style,\n  gradientColors = [\"#ff6b6b\", \"#4ecdc4\", \"#45b7d1\", \"#96ceb4\", \"#ffeaa7\"],\n  glitchIntensity = 0.5,\n  cursor = \"|\",\n  showCursor = true,\n}: AnimatedTextProps) {\n  const [animationKey, setAnimationKey] = useState(0)\n  const [showGradient, setShowGradient] = useState(false)\n  const prefersReducedMotion = usePrefersReducedMotion()\n\n  // Disable animations if user prefers reduced motion\n  const shouldAnimate = !prefersReducedMotion && autoStart\n\n  const {\n    displayText: typewriterText,\n    isComplete: typewriterComplete,\n    startAnimation: startTypewriter,\n  } = useTypewriter(text, delay, shouldAnimate && animation === \"typewriter\")\n  const {\n    displayText: shuffleText,\n    isAnimating: shuffleAnimating,\n    startAnimation: startShuffle,\n  } = useLetterShuffle(\n    text,\n    duration,\n    shouldAnimate && animation === \"letterShuffle\"\n  )\n\n  // Handle repeat animation\n  useEffect(() => {\n    if (!repeat) return\n\n    let timer: NodeJS.Timeout\n\n    if (animation === \"typewriter\" && typewriterComplete) {\n      timer = setTimeout(() => {\n        startTypewriter()\n      }, repeatDelay)\n    } else if (animation === \"letterShuffle\" && !shuffleAnimating) {\n      timer = setTimeout(() => {\n        startShuffle()\n      }, repeatDelay)\n    } else if ([\"wordReveal\", \"gradient\", \"glitch\"].includes(animation)) {\n      timer = setTimeout(() => {\n        setAnimationKey((prev) => prev + 1)\n      }, duration + repeatDelay)\n    }\n\n    return () => clearTimeout(timer)\n  }, [\n    animation,\n    typewriterComplete,\n    shuffleAnimating,\n    repeat,\n    repeatDelay,\n    duration,\n    startTypewriter,\n    startShuffle,\n  ])\n\n  // Handle completion callback\n  useEffect(() => {\n    if (!onComplete) return\n\n    if (animation === \"typewriter\" && typewriterComplete) {\n      onComplete()\n    } else if (\n      animation === \"letterShuffle\" &&\n      !shuffleAnimating &&\n      shuffleText === text\n    ) {\n      onComplete()\n    }\n  }, [\n    animation,\n    typewriterComplete,\n    shuffleAnimating,\n    onComplete,\n    shuffleText,\n    text,\n  ])\n\n  // Gradient animation effect\n  useEffect(() => {\n    if (animation === \"gradient\") {\n      setShowGradient(true)\n      const timer = setTimeout(() => setShowGradient(false), duration)\n      return () => clearTimeout(timer)\n    }\n  }, [animation, duration, animationKey])\n\n  const gradientStyle = useMemo(() => {\n    if (animation !== \"gradient\" || !showGradient) return {}\n\n    return {\n      background: `linear-gradient(-45deg, ${gradientColors.join(\", \")})`,\n      backgroundSize: \"400% 400%\",\n      WebkitBackgroundClip: \"text\",\n      WebkitTextFillColor: \"transparent\",\n      animation: `gradientShift ${duration}ms ease-in-out infinite`,\n    }\n  }, [animation, showGradient, gradientColors, duration])\n\n  const renderContent = () => {\n    // Show final text immediately if reduced motion is preferred\n    if (prefersReducedMotion) {\n      return <span>{text}</span>\n    }\n\n    switch (animation) {\n      case \"typewriter\":\n        return (\n          <span className=\"relative\">\n            {typewriterText}\n            {showCursor && (\n              <motion.span\n                animate={{ opacity: [0, 1, 0] }}\n                transition={{ duration: 1, repeat: Infinity }}\n                className=\"ml-1\"\n              >\n                {cursor}\n              </motion.span>\n            )}\n          </span>\n        )\n\n      case \"wordReveal\":\n        return (\n          <motion.div\n            key={animationKey}\n            className=\"flex flex-wrap gap-1\"\n            initial=\"hidden\"\n            animate=\"visible\"\n            onAnimationComplete={() => onComplete?.()}\n          >\n            {text.split(\" \").map((word, i) => (\n              <motion.span\n                key={i}\n                custom={i}\n                variants={wordVariants}\n                className=\"inline-block\"\n              >\n                {word}\n              </motion.span>\n            ))}\n          </motion.div>\n        )\n\n      case \"letterShuffle\":\n        return <span>{shuffleText}</span>\n\n      case \"gradient\":\n        return (\n          <motion.span\n            key={animationKey}\n            style={gradientStyle}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{ duration: 0.5 }}\n            onAnimationComplete={() => onComplete?.()}\n          >\n            {text}\n          </motion.span>\n        )\n\n      case \"glitch\":\n        return (\n          <motion.div\n            key={animationKey}\n            className=\"relative\"\n            onAnimationComplete={() => onComplete?.()}\n          >\n            <motion.span\n              variants={glitchVariants}\n              animate=\"glitch\"\n              style={{\n                textShadow: `${glitchIntensity * 2}px 0 #ff0000, ${-glitchIntensity * 2}px 0 #00ffff`,\n              }}\n            >\n              {text}\n            </motion.span>\n            <motion.span\n              className=\"absolute inset-0 opacity-80\"\n              variants={glitchVariants}\n              animate=\"glitch\"\n              style={{\n                color: \"#ff0000\",\n                left: `${glitchIntensity}px`,\n                mixBlendMode: \"multiply\",\n              }}\n            >\n              {text}\n            </motion.span>\n            <motion.span\n              className=\"absolute inset-0 opacity-80\"\n              variants={glitchVariants}\n              animate=\"glitch\"\n              style={{\n                color: \"#00ffff\",\n                left: `${-glitchIntensity}px`,\n                mixBlendMode: \"multiply\",\n              }}\n            >\n              {text}\n            </motion.span>\n          </motion.div>\n        )\n\n      default:\n        return text\n    }\n  }\n\n  return (\n    <>\n      {animation === \"gradient\" && (\n        <style>{`\n          @keyframes gradientShift {\n            0%,\n            100% {\n              background-position: 0% 50%;\n            }\n            50% {\n              background-position: 100% 50%;\n            }\n          }\n        `}</style>\n      )}\n      <div className={cn(\"inline-block\", className)} style={style}>\n        <AnimatePresence mode=\"wait\">{renderContent()}</AnimatePresence>\n      </div>\n    </>\n  )\n}\n\nexport default AnimatedText\n"
    }
  ],
  "type": "components:animation"
}