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

{
  "name": "animated-icon",
  "description": "Icons with animation effects",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "name": "animated-icon.tsx",
      "content": "\"use client\"\n\nimport React, { useEffect, useRef, 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 AnimatedIconProps {\n  /**\n   * Icon type for built-in icons or SVG paths\n   */\n  icon?:\n    | \"loading\"\n    | \"heart\"\n    | \"star\"\n    | \"hamburger\"\n    | \"arrow\"\n    | \"check\"\n    | \"x\"\n    | \"custom\"\n  /**\n   * Custom SVG path or paths for morphing\n   */\n  paths?: string | string[]\n  /**\n   * Animation type\n   */\n  animation?: \"spin\" | \"pulse\" | \"bounce\" | \"morph\" | \"draw\" | \"hover\" | \"click\"\n  /**\n   * Icon size\n   */\n  size?: number | string\n  /**\n   * Icon color\n   */\n  color?: string\n  /**\n   * Animation duration in milliseconds\n   */\n  duration?: number\n  /**\n   * Whether to animate automatically\n   */\n  autoAnimate?: boolean\n  /**\n   * Whether animation should repeat\n   */\n  repeat?: boolean\n  /**\n   * Custom CSS class\n   */\n  className?: string\n  /**\n   * Custom styling\n   */\n  style?: React.CSSProperties\n  /**\n   * Callback when animation completes\n   */\n  onAnimationComplete?: () => void\n  /**\n   * Callback when icon is clicked\n   */\n  onClick?: () => void\n  /**\n   * Whether icon is interactive\n   */\n  interactive?: boolean\n  /**\n   * Hover animation type\n   */\n  hoverAnimation?: \"scale\" | \"rotate\" | \"glow\" | \"shake\"\n  /**\n   * Click animation type\n   */\n  clickAnimation?: \"scale\" | \"rotate\" | \"ripple\"\n  /**\n   * Custom variants for complex animations\n   */\n  customVariants?: Variants\n  /**\n   * SVG viewBox\n   */\n  viewBox?: string\n  /**\n   * Stroke width for SVG paths\n   */\n  strokeWidth?: number\n  /**\n   * Whether to show loading state\n   */\n  loading?: boolean\n  /**\n   * Progress value for progress-based animations (0-1)\n   */\n  progress?: number\n}\n\n// Built-in icon paths\nconst iconPaths = {\n  loading:\n    \"M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83\",\n  heart: [\n    \"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\",\n    \"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\",\n  ],\n  star: \"m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2Z\",\n  hamburger: [\"M3 12h18M3 6h18M3 18h18\", \"m6 6 12 12M6 18 18 6\"],\n  arrow: \"M5 12l14 0m-7 -7l7 7l-7 7\",\n  check: \"m9 12 2 2 4-4\",\n  x: \"m18 6-12 12M6 6l12 12\",\n}\n\nconst animationVariants: { [key: string]: Variants } = {\n  spin: {\n    animate: {\n      rotate: 360,\n      transition: {\n        duration: 1,\n        repeat: Infinity,\n        ease: \"linear\",\n      },\n    },\n  },\n  pulse: {\n    animate: {\n      scale: [1, 1.2, 1],\n      transition: {\n        duration: 1,\n        repeat: Infinity,\n        ease: \"easeInOut\",\n      },\n    },\n  },\n  bounce: {\n    animate: {\n      y: [0, -10, 0],\n      transition: {\n        duration: 0.6,\n        repeat: Infinity,\n        ease: \"easeInOut\",\n      },\n    },\n  },\n  draw: {\n    initial: { pathLength: 0, opacity: 0 },\n    animate: {\n      pathLength: 1,\n      opacity: 1,\n      transition: { duration: 2, ease: \"easeInOut\" },\n    },\n  },\n  hover: {\n    whileHover: {\n      scale: 1.1,\n      transition: { duration: 0.2 },\n    },\n  },\n}\n\nconst hoverVariants = {\n  scale: { scale: 1.2 },\n  rotate: { rotate: 15 },\n  glow: { filter: \"drop-shadow(0 0 8px currentColor)\" },\n  shake: { x: [-2, 2, -2, 2, 0] },\n}\n\nconst clickVariants = {\n  scale: { scale: 0.9 },\n  rotate: { rotate: 180 },\n  ripple: { scale: [1, 1.3, 1] },\n}\n\n/**\n * Path morphing animation component\n */\nfunction MorphingPath({\n  paths,\n  duration,\n  strokeWidth = 2,\n  autoAnimate,\n  repeat,\n  onComplete,\n}: {\n  paths: string[]\n  duration: number\n  strokeWidth: number\n  autoAnimate: boolean\n  repeat: boolean\n  onComplete?: () => void\n}) {\n  const [currentPathIndex, setCurrentPathIndex] = useState(0)\n\n  useEffect(() => {\n    if (!autoAnimate || paths.length < 2) return\n\n    const interval = setInterval(() => {\n      setCurrentPathIndex((prev) => {\n        const next = (prev + 1) % paths.length\n        if (next === 0 && !repeat) {\n          clearInterval(interval)\n          onComplete?.()\n        }\n        return next\n      })\n    }, duration)\n\n    return () => clearInterval(interval)\n  }, [autoAnimate, paths.length, duration, repeat, onComplete])\n\n  return (\n    <motion.path\n      d={paths[currentPathIndex]}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={strokeWidth}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      animate={{ d: paths[currentPathIndex] }}\n      transition={{ duration: duration / 1000, ease: \"easeInOut\" }}\n    />\n  )\n}\n\n/**\n * Progressive drawing animation\n */\nfunction DrawingPath({\n  path,\n  duration,\n  strokeWidth = 2,\n  progress,\n  autoAnimate,\n}: {\n  path: string\n  duration: number\n  strokeWidth: number\n  progress?: number\n  autoAnimate: boolean\n}) {\n  const pathRef = useRef<SVGPathElement>(null)\n  const [pathLength, setPathLength] = useState(0)\n\n  useEffect(() => {\n    if (pathRef.current) {\n      const length = pathRef.current.getTotalLength()\n      setPathLength(length)\n    }\n  }, [path])\n\n  const animatedLength =\n    progress !== undefined ? pathLength * progress : pathLength\n\n  return (\n    <motion.path\n      ref={pathRef}\n      d={path}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={strokeWidth}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial={{ pathLength: 0 }}\n      animate={\n        autoAnimate\n          ? { pathLength: 1 }\n          : { pathLength: animatedLength / pathLength }\n      }\n      transition={{ duration: duration / 1000, ease: \"easeInOut\" }}\n      style={{\n        strokeDasharray: pathLength,\n        strokeDashoffset: pathLength - animatedLength,\n      }}\n    />\n  )\n}\n\n/**\n * Loading spinner component\n */\nfunction LoadingSpinner({\n  size,\n  strokeWidth = 2,\n}: {\n  size: number | string\n  strokeWidth: number\n}) {\n  return (\n    <motion.div\n      animate={{ rotate: 360 }}\n      transition={{ duration: 1, repeat: Infinity, ease: \"linear\" }}\n      style={{ width: size, height: size }}\n    >\n      <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeDasharray=\"60 40\"\n          opacity=\"0.3\"\n        />\n      </svg>\n    </motion.div>\n  )\n}\n\n/**\n * Animated icon component with multiple animation types\n */\nexport function AnimatedIcon({\n  icon = \"loading\",\n  paths,\n  animation = \"spin\",\n  size = 24,\n  color = \"currentColor\",\n  duration = 1000,\n  autoAnimate = true,\n  repeat = true,\n  className,\n  style,\n  onAnimationComplete,\n  onClick,\n  interactive = true,\n  hoverAnimation = \"scale\",\n  clickAnimation = \"scale\",\n  customVariants,\n  viewBox = \"0 0 24 24\",\n  strokeWidth = 2,\n  loading = false,\n  progress,\n}: AnimatedIconProps) {\n  const [isHovered, setIsHovered] = useState(false)\n  const [isClicked, setIsClicked] = useState(false)\n  const prefersReducedMotion = usePrefersReducedMotion()\n\n  const variants = customVariants || animationVariants[animation] || {}\n  const shouldAnimate = autoAnimate && !prefersReducedMotion\n\n  // Get icon paths\n  const getIconPaths = () => {\n    if (paths) {\n      return Array.isArray(paths) ? paths : [paths]\n    }\n\n    const builtInPath = iconPaths[icon as keyof typeof iconPaths]\n    return Array.isArray(builtInPath) ? builtInPath : [builtInPath]\n  }\n\n  const iconPathsArray = getIconPaths()\n\n  const handleClick = () => {\n    if (!interactive) return\n\n    setIsClicked(true)\n    setTimeout(() => setIsClicked(false), 200)\n    onClick?.()\n  }\n\n  const getHoverVariant = () => {\n    if (!interactive || !isHovered) return {}\n    return hoverVariants[hoverAnimation] || {}\n  }\n\n  const getClickVariant = () => {\n    if (!interactive || !isClicked) return {}\n    return clickVariants[clickAnimation] || {}\n  }\n\n  if (loading) {\n    return <LoadingSpinner size={size} strokeWidth={strokeWidth} />\n  }\n\n  const renderIcon = () => {\n    if (animation === \"morph\" && iconPathsArray.length > 1) {\n      return (\n        <MorphingPath\n          paths={iconPathsArray}\n          duration={duration}\n          strokeWidth={strokeWidth}\n          autoAnimate={shouldAnimate}\n          repeat={repeat}\n          onComplete={onAnimationComplete}\n        />\n      )\n    }\n\n    if (animation === \"draw\") {\n      return (\n        <DrawingPath\n          path={iconPathsArray[0]}\n          duration={duration}\n          strokeWidth={strokeWidth}\n          progress={progress}\n          autoAnimate={shouldAnimate}\n        />\n      )\n    }\n\n    return iconPathsArray.map((path, index) => (\n      <motion.path\n        key={index}\n        d={path}\n        fill={icon === \"heart\" ? \"currentColor\" : \"none\"}\n        stroke={icon === \"heart\" ? \"none\" : \"currentColor\"}\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    ))\n  }\n\n  return (\n    <motion.div\n      className={cn(\n        \"inline-flex items-center justify-center\",\n        interactive && \"cursor-pointer\",\n        className\n      )}\n      style={{\n        width: size,\n        height: size,\n        color,\n        ...style,\n      }}\n      onClick={handleClick}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      variants={variants}\n      animate={shouldAnimate ? \"animate\" : \"initial\"}\n      whileHover={!prefersReducedMotion ? getHoverVariant() : {}}\n      whileTap={!prefersReducedMotion ? getClickVariant() : {}}\n      onAnimationComplete={onAnimationComplete}\n    >\n      <svg\n        width=\"100%\"\n        height=\"100%\"\n        viewBox={viewBox}\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <AnimatePresence mode=\"wait\">{renderIcon()}</AnimatePresence>\n      </svg>\n    </motion.div>\n  )\n}\n\n/**\n * Preset animated icon variations\n */\nexport const AnimatedIconPresets = {\n  /**\n   * Spinning loading indicator\n   */\n  Spinner: (props: Omit<AnimatedIconProps, \"icon\" | \"animation\">) => (\n    <AnimatedIcon icon=\"loading\" animation=\"spin\" {...props} />\n  ),\n\n  /**\n   * Pulsing heart\n   */\n  HeartBeat: (props: Omit<AnimatedIconProps, \"icon\" | \"animation\">) => (\n    <AnimatedIcon icon=\"heart\" animation=\"pulse\" color=\"#ef4444\" {...props} />\n  ),\n\n  /**\n   * Morphing hamburger to X\n   */\n  MenuToggle: (props: Omit<AnimatedIconProps, \"icon\" | \"animation\">) => (\n    <AnimatedIcon icon=\"hamburger\" animation=\"morph\" {...props} />\n  ),\n\n  /**\n   * Drawing checkmark\n   */\n  CheckDraw: (props: Omit<AnimatedIconProps, \"icon\" | \"animation\">) => (\n    <AnimatedIcon icon=\"check\" animation=\"draw\" color=\"#10b981\" {...props} />\n  ),\n\n  /**\n   * Bouncing star\n   */\n  BounceStar: (props: Omit<AnimatedIconProps, \"icon\" | \"animation\">) => (\n    <AnimatedIcon icon=\"star\" animation=\"bounce\" color=\"#fbbf24\" {...props} />\n  ),\n\n  /**\n   * Interactive arrow\n   */\n  HoverArrow: (props: Omit<AnimatedIconProps, \"icon\" | \"hoverAnimation\">) => (\n    <AnimatedIcon icon=\"arrow\" hoverAnimation=\"scale\" interactive {...props} />\n  ),\n}\n\nexport default AnimatedIcon\n"
    }
  ],
  "type": "components:animation"
}