shadcn/app/public/registry/styles/default/reveal-animation.json

{
  "name": "reveal-animation",
  "description": "Element reveal animations on scroll",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "name": "reveal-animation.tsx",
      "content": "\"use client\"\n\nimport React, { useCallback, useEffect, useRef, useState } from \"react\"\nimport { motion, useAnimation, useInView, 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 RevealAnimationProps {\n  /**\n   * Children to animate\n   */\n  children: React.ReactNode\n  /**\n   * Animation direction\n   */\n  direction?: \"up\" | \"down\" | \"left\" | \"right\" | \"fade\" | \"scale\" | \"rotate\"\n  /**\n   * Animation duration in milliseconds\n   */\n  duration?: number\n  /**\n   * Delay before animation starts in milliseconds\n   */\n  delay?: number\n  /**\n   * Distance for directional animations\n   */\n  distance?: number\n  /**\n   * Whether to stagger children animations\n   */\n  staggerChildren?: boolean\n  /**\n   * Stagger delay between children in milliseconds\n   */\n  staggerDelay?: number\n  /**\n   * Intersection threshold (0-1)\n   */\n  threshold?: number\n  /**\n   * Root margin for intersection observer\n   */\n  rootMargin?: string\n  /**\n   * Whether animation should trigger once or every time\n   */\n  triggerOnce?: boolean\n  /**\n   * Custom CSS class\n   */\n  className?: string\n  /**\n   * Custom styling\n   */\n  style?: React.CSSProperties\n  /**\n   * Callback when animation starts\n   */\n  onAnimationStart?: () => void\n  /**\n   * Callback when animation completes\n   */\n  onAnimationComplete?: () => void\n  /**\n   * Custom variants for complex animations\n   */\n  customVariants?: Variants\n  /**\n   * Whether to use viewport detection or custom trigger\n   */\n  useViewport?: boolean\n  /**\n   * Manual trigger (when useViewport is false)\n   */\n  trigger?: boolean\n  /**\n   * Easing function\n   */\n  easing?:\n    | \"linear\"\n    | \"easeIn\"\n    | \"easeOut\"\n    | \"easeInOut\"\n    | \"circIn\"\n    | \"circOut\"\n    | \"circInOut\"\n    | \"backIn\"\n    | \"backOut\"\n    | \"backInOut\"\n  /**\n   * Whether to animate on scroll\n   */\n  animateOnScroll?: boolean\n  /**\n   * Scroll animation progress (0-1)\n   */\n  scrollProgress?: number\n}\n\nconst easingFunctions = {\n  linear: [0, 0, 1, 1],\n  easeIn: [0.42, 0, 1, 1],\n  easeOut: [0, 0, 0.58, 1],\n  easeInOut: [0.42, 0, 0.58, 1],\n  circIn: [0.6, 0.04, 0.98, 0.335],\n  circOut: [0.075, 0.82, 0.165, 1],\n  circInOut: [0.785, 0.135, 0.15, 0.86],\n  backIn: [0.6, -0.28, 0.735, 0.045],\n  backOut: [0.175, 0.885, 0.32, 1.275],\n  backInOut: [0.68, -0.55, 0.265, 1.55],\n} as const\n\nconst directionVariants = {\n  up: {\n    hidden: { opacity: 0, y: 50 },\n    visible: { opacity: 1, y: 0 },\n  },\n  down: {\n    hidden: { opacity: 0, y: -50 },\n    visible: { opacity: 1, y: 0 },\n  },\n  left: {\n    hidden: { opacity: 0, x: 50 },\n    visible: { opacity: 1, x: 0 },\n  },\n  right: {\n    hidden: { opacity: 0, x: -50 },\n    visible: { opacity: 1, x: 0 },\n  },\n  fade: {\n    hidden: { opacity: 0 },\n    visible: { opacity: 1 },\n  },\n  scale: {\n    hidden: { opacity: 0, scale: 0.8 },\n    visible: { opacity: 1, scale: 1 },\n  },\n  rotate: {\n    hidden: { opacity: 0, rotate: -10, scale: 0.9 },\n    visible: { opacity: 1, rotate: 0, scale: 1 },\n  },\n}\n\n/**\n * Custom hook for scroll-based animations\n */\nfunction useScrollAnimation(animateOnScroll: boolean, scrollProgress?: number) {\n  const [progress, setProgress] = useState(0)\n\n  useEffect(() => {\n    if (!animateOnScroll) return\n\n    if (scrollProgress !== undefined) {\n      setProgress(scrollProgress)\n      return\n    }\n\n    const handleScroll = () => {\n      const scrolled = window.scrollY\n      const maxScroll =\n        document.documentElement.scrollHeight - window.innerHeight\n      const progress = Math.min(scrolled / maxScroll, 1)\n      setProgress(progress)\n    }\n\n    window.addEventListener(\"scroll\", handleScroll)\n    return () => window.removeEventListener(\"scroll\", handleScroll)\n  }, [animateOnScroll, scrollProgress])\n\n  return progress\n}\n\n/**\n * Custom hook for intersection-based reveal\n */\nfunction useRevealAnimation(\n  threshold: number,\n  rootMargin: string,\n  triggerOnce: boolean,\n  useViewport: boolean,\n  manualTrigger?: boolean\n) {\n  const ref = useRef<HTMLDivElement>(null)\n  const isInView = useInView(ref, {\n    amount: threshold,\n    margin: rootMargin as any,\n    once: triggerOnce,\n  })\n  const controls = useAnimation()\n\n  const [hasTriggered, setHasTriggered] = useState(false)\n\n  useEffect(() => {\n    if (!useViewport && manualTrigger !== undefined) {\n      if (manualTrigger && !hasTriggered) {\n        controls.start(\"visible\")\n        setHasTriggered(true)\n      } else if (!manualTrigger && !triggerOnce) {\n        controls.start(\"hidden\")\n      }\n      return\n    }\n\n    if (useViewport) {\n      if (isInView) {\n        controls.start(\"visible\")\n        setHasTriggered(true)\n      } else if (!triggerOnce && hasTriggered) {\n        controls.start(\"hidden\")\n      }\n    }\n  }, [\n    isInView,\n    controls,\n    useViewport,\n    manualTrigger,\n    triggerOnce,\n    hasTriggered,\n  ])\n\n  return { ref, controls, isInView: useViewport ? isInView : manualTrigger }\n}\n\n/**\n * Reveal animation component with scroll and intersection triggers\n */\nexport function RevealAnimation({\n  children,\n  direction = \"up\",\n  duration = 600,\n  delay = 0,\n  distance = 50,\n  staggerChildren = false,\n  staggerDelay = 100,\n  threshold = 0.1,\n  rootMargin = \"0px\",\n  triggerOnce = true,\n  className,\n  style,\n  onAnimationStart,\n  onAnimationComplete,\n  customVariants,\n  useViewport = true,\n  trigger,\n  easing = \"easeOut\",\n  animateOnScroll = false,\n  scrollProgress,\n}: RevealAnimationProps) {\n  const prefersReducedMotion = usePrefersReducedMotion()\n\n  const { ref, controls, isInView } = useRevealAnimation(\n    threshold,\n    rootMargin,\n    triggerOnce,\n    useViewport,\n    trigger\n  )\n\n  const scrollAnimationProgress = useScrollAnimation(\n    animateOnScroll,\n    scrollProgress\n  )\n\n  // Skip animations if reduced motion is preferred\n  useEffect(() => {\n    if (prefersReducedMotion) {\n      controls.set(\"visible\")\n    }\n  }, [prefersReducedMotion, controls])\n\n  const variants = customVariants || {\n    ...directionVariants[direction],\n    hidden: {\n      ...directionVariants[direction].hidden,\n      ...(direction === \"up\" && { y: distance }),\n      ...(direction === \"down\" && { y: -distance }),\n      ...(direction === \"left\" && { x: distance }),\n      ...(direction === \"right\" && { x: -distance }),\n    },\n  }\n\n  const containerVariants: Variants = staggerChildren\n    ? {\n        hidden: {},\n        visible: {\n          transition: {\n            staggerChildren: staggerDelay / 1000,\n            delayChildren: delay / 1000,\n          },\n        },\n      }\n    : variants\n\n  const childVariants: Variants = staggerChildren ? variants : {}\n\n  const transition = {\n    duration: duration / 1000,\n    delay: staggerChildren ? 0 : delay / 1000,\n    ease: easingFunctions[easing] as any,\n  }\n\n  // Handle scroll-based animation\n  useEffect(() => {\n    if (animateOnScroll) {\n      const progress = scrollAnimationProgress\n      if (progress > 0) {\n        controls.start(\"visible\")\n      } else {\n        controls.start(\"hidden\")\n      }\n    }\n  }, [animateOnScroll, scrollAnimationProgress, controls])\n\n  const handleAnimationStart = () => {\n    onAnimationStart?.()\n  }\n\n  const handleAnimationComplete = () => {\n    onAnimationComplete?.()\n  }\n\n  const renderChildren = () => {\n    if (!staggerChildren) {\n      return children\n    }\n\n    return React.Children.map(children, (child, index) => (\n      <motion.div\n        key={index}\n        variants={childVariants}\n        transition={{\n          ...transition,\n          delay: index * (staggerDelay / 1000),\n        }}\n        onAnimationStart={index === 0 ? handleAnimationStart : undefined}\n        onAnimationComplete={\n          index === React.Children.count(children) - 1\n            ? handleAnimationComplete\n            : undefined\n        }\n      >\n        {child}\n      </motion.div>\n    ))\n  }\n\n  return (\n    <motion.div\n      ref={ref}\n      className={cn(className)}\n      style={style}\n      variants={containerVariants}\n      initial=\"hidden\"\n      animate={controls}\n      transition={transition}\n      onAnimationStart={!staggerChildren ? handleAnimationStart : undefined}\n      onAnimationComplete={\n        !staggerChildren ? handleAnimationComplete : undefined\n      }\n    >\n      {renderChildren()}\n    </motion.div>\n  )\n}\n\n/**\n * Multiple reveal animations for complex layouts\n */\nexport function RevealGroup({\n  children,\n  staggerDelay = 200,\n  ...props\n}: {\n  children: React.ReactNode\n  staggerDelay?: number\n} & Omit<RevealAnimationProps, \"children\" | \"staggerChildren\">) {\n  return (\n    <div>\n      {React.Children.map(children, (child, index) => (\n        <RevealAnimation key={index} delay={index * staggerDelay} {...props}>\n          {child}\n        </RevealAnimation>\n      ))}\n    </div>\n  )\n}\n\n/**\n * Scroll-triggered reveal with progress\n */\nexport function ScrollReveal({\n  children,\n  startOffset = 0,\n  endOffset = 1,\n  ...props\n}: {\n  children: React.ReactNode\n  startOffset?: number\n  endOffset?: number\n} & Omit<RevealAnimationProps, \"children\" | \"animateOnScroll\">) {\n  const ref = useRef<HTMLDivElement>(null)\n  const [scrollProgress, setScrollProgress] = useState(0)\n\n  useEffect(() => {\n    const handleScroll = () => {\n      if (!ref.current) return\n\n      const element = ref.current\n      const rect = element.getBoundingClientRect()\n      const windowHeight = window.innerHeight\n\n      const elementTop = rect.top\n      const elementHeight = rect.height\n\n      const startPoint = windowHeight * (1 - startOffset)\n      const endPoint = -elementHeight * endOffset\n\n      const progress = Math.max(\n        0,\n        Math.min(1, (startPoint - elementTop) / (startPoint - endPoint))\n      )\n      setScrollProgress(progress)\n    }\n\n    window.addEventListener(\"scroll\", handleScroll)\n    handleScroll() // Initial call\n\n    return () => window.removeEventListener(\"scroll\", handleScroll)\n  }, [startOffset, endOffset])\n\n  return (\n    <div ref={ref}>\n      <RevealAnimation\n        animateOnScroll\n        scrollProgress={scrollProgress}\n        {...props}\n      >\n        {children}\n      </RevealAnimation>\n    </div>\n  )\n}\n\n/**\n * Preset reveal animation variations\n */\nexport const RevealPresets = {\n  /**\n   * Gentle fade up\n   */\n  FadeUp: (props: Omit<RevealAnimationProps, \"direction\" | \"easing\">) => (\n    <RevealAnimation direction=\"up\" easing=\"easeOut\" {...props} />\n  ),\n\n  /**\n   * Bouncy scale\n   */\n  BounceScale: (props: Omit<RevealAnimationProps, \"direction\" | \"easing\">) => (\n    <RevealAnimation\n      direction=\"scale\"\n      easing=\"backOut\"\n      duration={800}\n      {...props}\n    />\n  ),\n\n  /**\n   * Staggered list reveal\n   */\n  StaggerList: (\n    props: Omit<RevealAnimationProps, \"staggerChildren\" | \"direction\">\n  ) => (\n    <RevealAnimation\n      direction=\"up\"\n      staggerChildren\n      staggerDelay={150}\n      {...props}\n    />\n  ),\n\n  /**\n   * Slide from left\n   */\n  SlideLeft: (props: Omit<RevealAnimationProps, \"direction\" | \"distance\">) => (\n    <RevealAnimation direction=\"left\" distance={100} {...props} />\n  ),\n\n  /**\n   * Rotate reveal\n   */\n  RotateReveal: (props: Omit<RevealAnimationProps, \"direction\" | \"easing\">) => (\n    <RevealAnimation\n      direction=\"rotate\"\n      easing=\"backOut\"\n      duration={1000}\n      {...props}\n    />\n  ),\n\n  /**\n   * Progressive scroll reveal\n   */\n  ScrollProgressive: (props: Omit<RevealAnimationProps, \"animateOnScroll\">) => (\n    <RevealAnimation animateOnScroll useViewport={false} {...props} />\n  ),\n}\n\nexport default RevealAnimation\n"
    }
  ],
  "type": "components:animation"
}