{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeline-animation",
  "title": "Timeline Animation",
  "description": "Scroll-linked sequenced motion for hero timelines.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/default/ui/timeline-animation.tsx",
      "content": "\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport {\n  type HTMLMotionProps,\n  motion,\n  useInView,\n  useReducedMotion,\n} from \"motion/react\"\nimport type React from \"react\"\n\ntype TimelineContentProps<T extends keyof HTMLElementTagNameMap> = {\n  children?: React.ReactNode\n  animationNum: number\n  className?: string\n  timelineRef: React.RefObject<HTMLElement | null>\n  as?: T\n  customVariants?: Variants\n  once?: boolean\n} & HTMLMotionProps<T>\n\nexport const TimelineAnimation = <\n  T extends keyof HTMLElementTagNameMap = \"div\",\n>({\n  children,\n  animationNum,\n  timelineRef,\n  className,\n  as,\n  customVariants,\n  once = true,\n  ...props\n}: TimelineContentProps<T>) => {\n  const reduce = useReducedMotion()\n\n  const defaultSequenceVariants: Variants = {\n    visible: (i: number) => ({\n      y: 0,\n      opacity: 1,\n      transition: {\n        delay: reduce ? 0 : i * 0.5,\n        duration: reduce ? 0 : 0.5,\n      },\n    }),\n    hidden: {\n      y: reduce ? 0 : 8,\n      opacity: reduce ? 1 : 0,\n    },\n  }\n\n  const sequenceVariants = customVariants || defaultSequenceVariants\n\n  const isInView = useInView(timelineRef, {\n    once,\n  })\n\n  const MotionComponent = motion[as || \"div\"] as React.ElementType\n\n  return (\n    <MotionComponent\n      initial={reduce ? false : \"hidden\"}\n      animate={reduce || isInView ? \"visible\" : \"hidden\"}\n      custom={animationNum}\n      variants={sequenceVariants}\n      className={className}\n      {...props}\n    >\n      {children}\n    </MotionComponent>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/ui/timeline-animation.tsx"
    }
  ],
  "type": "registry:ui"
}