Stitch Path

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface StitchPathProps extends Omit<
8  React.ComponentProps<"svg">,
9  "target"
10> {
11  /** Path data, in the `0 0 100 100` box the component draws in. */
12  d?: string
13  /** Length of one stitch. */
14  stitch?: number
15  /** Bare thread between two stitches. */
16  gap?: number
17  /** Thread thickness in pixels. It does not stretch with the box. */
18  thickness?: number
19  /** Sew it yourself, 0 to 1. Leave it out to sew on scroll. */
20  progress?: number
21  /** Follow this element through the viewport instead of the path's own box. */
22  target?: React.RefObject<HTMLElement | null>
23  /** Draw the holes the thread is sewn through. */
24  guide?: boolean
25}
26 
27const DEFAULT_PATH = "M 0 62 C 18 6 42 6 52 48 S 78 96 100 34"
28 
29const clamp = (value: number) => Math.min(Math.max(value, 0), 1)
30 
31export function StitchPath({
32  d = DEFAULT_PATH,
33  stitch = 5,
34  gap = 4,
35  thickness = 2,
36  progress,
37  target,
38  guide = true,
39  className,
40  ...props
41}: StitchPathProps) {
42  const maskId = React.useId()
43  const hostRef = React.useRef<SVGSVGElement>(null)
44  const revealRef = React.useRef<SVGPathElement>(null)
45  const controlled = progress !== undefined
46 
47  React.useEffect(() => {
48    const node = revealRef.current
49    if (!node) {
50      return
51    }
52 
53    // `pathLength="1"` normalises the path, so the offset is the fraction of it
54    // still to be sewn and the geometry never has to be measured.
55    const draw = (value: number) => {
56      node.style.strokeDashoffset = `${1 - clamp(value)}`
57    }
58 
59    if (controlled) {
60      draw(progress)
61      return
62    }
63 
64    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
65      draw(1)
66      return
67    }
68 
69    let frame = 0
70 
71    const measure = () => {
72      const box = target?.current ?? hostRef.current
73      if (!box) {
74        return
75      }
76 
77      // Zero when the top edge sits on the bottom of the viewport, one when the
78      // bottom edge has cleared the top of it.
79      const rect = box.getBoundingClientRect()
80      const travel = window.innerHeight + rect.height
81      draw(travel > 0 ? (window.innerHeight - rect.top) / travel : 1)
82    }
83 
84    const onScroll = () => {
85      cancelAnimationFrame(frame)
86      frame = requestAnimationFrame(measure)
87    }
88 
89    measure()
90    window.addEventListener("scroll", onScroll, { passive: true })
91    window.addEventListener("resize", onScroll, { passive: true })
92    return () => {
93// … truncated