Text Along Path

1import { RefObject, useEffect, useRef } from "react"
2import { useScroll, UseScrollOptions, useTransform } from "motion/react"
3 
4type PreserveAspectRatioAlign =
5  | "none"
6  | "xMinYMin"
7  | "xMidYMin"
8  | "xMaxYMin"
9  | "xMinYMid"
10  | "xMidYMid"
11  | "xMaxYMid"
12  | "xMinYMax"
13  | "xMidYMax"
14  | "xMaxYMax"
15 
16type PreserveAspectRatioMeetOrSlice = "meet" | "slice"
17 
18type PreserveAspectRatio =
19  | PreserveAspectRatioAlign
20  | `${Exclude<PreserveAspectRatioAlign, "none">} ${PreserveAspectRatioMeetOrSlice}`
21 
22interface AnimatedPathTextProps {
23  // Path properties
24  path: string
25  pathId?: string
26  pathClassName?: string
27  preserveAspectRatio?: PreserveAspectRatio
28  showPath?: boolean
29 
30  // SVG properties
31  width?: string | number
32  height?: string | number
33  viewBox?: string
34  svgClassName?: string
35 
36  // Text properties
37  text: string
38  textClassName?: string
39  textAnchor?: "start" | "middle" | "end"
40 
41  // Animation properties
42  animationType?: "auto" | "scroll"
43 
44  // Animation properties if animationType is auto
45  duration?: number
46  repeatCount?: number | "indefinite"
47  easingFunction?: {
48    calcMode?: string
49    keyTimes?: string
50    keySplines?: string
51  }
52 
53  // Scroll animation properties if animationType is scroll
54  scrollContainer?: RefObject<HTMLElement | null>
55  scrollOffset?: UseScrollOptions["offset"]
56  scrollTransformValues?: [number, number]
57}
58 
59const AnimatedPathText = ({
60  // Path defaults
61  path,
62  pathId,
63  pathClassName,
64  preserveAspectRatio = "xMidYMid meet",
65  showPath = false,
66 
67  // SVG defaults
68  width = "100%",
69  height = "100%",
70  viewBox = "0 0 100 100",
71  svgClassName,
72 
73  // Text defaults
74  text,
75  textClassName,
76  textAnchor = "start",
77 
78  // Animation type
79  animationType = "auto",
80 
81  // Animation defaults
82  duration = 4,
83  repeatCount = "indefinite",
84 
85  easingFunction = {},
86 
87  // Scroll animation defaults
88  scrollContainer,
89  scrollOffset = ["start end", "end end"],
90  scrollTransformValues = [0, 100],
91}: AnimatedPathTextProps) => {
92  const textPathRefs = useRef<SVGTextPathElement[]>([])
93 
94  // naive id for the path. you should rather use yours :)
95  const id =
96    pathId || `animated-path-${Math.random().toString(36).substring(7)}`
97 
98  const { scrollYProgress } = useScroll({
99    ...(scrollContainer && { container: scrollContainer }),
100    offset: scrollOffset,
101  })
102 
103  const t = useTransform(scrollYProgress, [0, 1], scrollTransformValues)
104 
105  useEffect(() => {
106    // Re-initialize scroll handler when container ref changes
107// … truncated