Marquee Along Svg Path

1import React, { RefObject, useCallback, useEffect, useRef } from "react"
2import {
3  motion,
4  SpringOptions,
5  useAnimationFrame,
6  useMotionValue,
7  useScroll,
8  useSpring,
9  useTransform,
10  useVelocity,
11} from "motion/react"
12 
13import { cn } from "@/lib/utils"
14 
15// Custom wrap function
16const wrap = (min: number, max: number, value: number): number => {
17  const range = max - min
18  return ((((value - min) % range) + range) % range) + min
19}
20 
21type PreserveAspectRatioAlign =
22  | "none"
23  | "xMinYMin"
24  | "xMidYMin"
25  | "xMaxYMin"
26  | "xMinYMid"
27  | "xMidYMid"
28  | "xMaxYMid"
29  | "xMinYMax"
30  | "xMidYMax"
31  | "xMaxYMax"
32 
33interface CSSVariableInterpolation {
34  property: string
35  from: number | string
36  to: number | string
37}
38 
39type PreserveAspectRatioMeetOrSlice = "meet" | "slice"
40 
41type PreserveAspectRatio =
42  | PreserveAspectRatioAlign
43  | `${Exclude<PreserveAspectRatioAlign, "none">} ${PreserveAspectRatioMeetOrSlice}`
44 
45interface MarqueeAlongSvgPathProps {
46  children: React.ReactNode
47  className?: string
48 
49  // Path properties
50  path: string
51  pathId?: string
52  preserveAspectRatio?: PreserveAspectRatio
53  showPath?: boolean
54 
55  // SVG properties
56  width?: string | number
57  height?: string | number
58  viewBox?: string
59 
60  // Marquee properties
61  baseVelocity?: number
62  direction?: "normal" | "reverse"
63  easing?: (value: number) => number
64  slowdownOnHover?: boolean
65  slowDownFactor?: number
66  slowDownSpringConfig?: SpringOptions
67 
68  // Scroll properties
69  useScrollVelocity?: boolean
70  scrollAwareDirection?: boolean
71  scrollSpringConfig?: SpringOptions
72  scrollContainer?: RefObject<HTMLElement | null> | HTMLElement | null
73 
74  // Item repetition
75  repeat?: number
76 
77  // Drag properties
78  draggable?: boolean
79  dragSensitivity?: number
80  dragVelocityDecay?: number
81  dragAwareDirection?: boolean
82  grabCursor?: boolean
83 
84  // Z-index properties
85  enableRollingZIndex?: boolean
86  zIndexBase?: number
87  zIndexRange?: number
88 
89  cssVariableInterpolation?: CSSVariableInterpolation[]
90 
91  // Responsive properties
92  responsive?: boolean
93}
94 
95const MarqueeAlongSvgPath = ({
96  children,
97  className,
98 
99  // Path defaults
100  path,
101  pathId,
102  preserveAspectRatio = "xMidYMid meet",
103  showPath = false,
104 
105  // SVG defaults
106  width = "100%",
107  height = "100%",
108  viewBox = "0 0 100 100",
109 
110  // Marquee defaults
111  baseVelocity = 5,
112  direction = "normal",
113  easing,
114  slowdownOnHover = false,
115  slowDownFactor = 0.3,
116  slowDownSpringConfig = { damping: 50, stiffness: 400 },
117 
118  // Scroll defaults
119// … truncated