Element Along Svg Path

1import {
2  createContext,
3  RefObject,
4  useContext,
5  useEffect,
6  useRef,
7  useState,
8} from "react"
9import {
10  motion,
11  MotionValue,
12  useMotionValue,
13  useScroll,
14  UseScrollOptions,
15  useSpring,
16  useTime,
17  useTransform,
18} from "motion/react"
19 
20import { cn } from "@/lib/utils"
21 
22type PreserveAspectRatioAlign =
23  | "none"
24  | "xMinYMin"
25  | "xMidYMin"
26  | "xMaxYMin"
27  | "xMinYMid"
28  | "xMidYMid"
29  | "xMaxYMid"
30  | "xMinYMax"
31  | "xMidYMax"
32  | "xMaxYMax"
33 
34type PreserveAspectRatioMeetOrSlice = "meet" | "slice"
35 
36type PreserveAspectRatio =
37  | PreserveAspectRatioAlign
38  | `${Exclude<PreserveAspectRatioAlign, "none">} ${PreserveAspectRatioMeetOrSlice}`
39 
40interface ElementAlongPathProps {
41  // Path properties
42  path: string
43  pathId?: string
44  className?: string
45  preserveAspectRatio?: PreserveAspectRatio
46  showPath?: boolean
47  direction?: "normal" | "reverse"
48 
49  // SVG properties
50  width?: string | number
51  height?: string | number
52  viewBox?: string
53 
54  // Animation properties
55  animationType?: "auto" | "scroll"
56 
57  // Animation properties if animationType is auto
58  duration?: number
59  transition?: any
60 
61  // Scroll animation properties if animationType is scroll
62  scrollContainer?: RefObject<HTMLElement | null>
63  scrollOffset?: UseScrollOptions["offset"]
64  scrollTransformValues?: [number, number]
65 
66  // Children
67  children?: React.ReactNode
68}
69 
70interface ElementAlongPathItemProps {
71  children: React.ReactNode
72  className?: string
73  startOffset?: number // 0-100 percentage
74  transition?: any // Override parent transition
75}
76 
77// Create context
78const ElementAlongPathContext = createContext<{
79  path: string
80  animationType: "auto" | "scroll"
81  direction: "normal" | "reverse" // Add direction to context
82  progress: MotionValue<number>
83  scrollYProgress: MotionValue<number>
84  scrollTransformValues: [number, number]
85  transition: any
86  setHovered: (isHovered: boolean) => void
87} | null>(null)
88 
89// Context hook
90export const useElementAlongPathContext = () => {
91  const context = useContext(ElementAlongPathContext)
92  if (!context) {
93    throw new Error("ElementAlongPathItem must be used within ElementAlongPath")
94  }
95  return context
96}
97 
98// Item component
99export const ElementAlongPathItem = ({
100  children,
101  className,
102  startOffset = 0,
103  transition: itemTransition,
104}: ElementAlongPathItemProps) => {
105  const {
106    path,
107    animationType,
108    progress,
109    scrollYProgress,
110    scrollTransformValues,
111    direction,
112    transition: parentTransition,
113    setHovered,
114// … truncated