Elastic Line

1"use client"
2 
3import React, { useEffect, useRef, useState } from "react"
4import {
5  animate,
6  motion,
7  useAnimationFrame,
8  useMotionValue,
9  ValueAnimationTransition,
10} from "motion/react"
11 
12import { useDimensions } from "@/hooks/use-dimensions"
13import { useElasticLineEvents } from "@/hooks/use-elastic-line-events"
14 
15interface ElasticLineProps {
16  isVertical?: boolean
17  grabThreshold?: number
18  releaseThreshold?: number
19  strokeWidth?: number
20  transition?: ValueAnimationTransition
21  animateInTransition?: ValueAnimationTransition
22  className?: string
23}
24 
25const ElasticLine: React.FC<ElasticLineProps> = ({
26  isVertical = false,
27  grabThreshold = 5,
28  releaseThreshold = 100,
29  strokeWidth = 1,
30  transition = {
31    type: "spring",
32    stiffness: 300,
33    damping: 5,
34  },
35  animateInTransition = {
36    duration: 0.3,
37    ease: "easeInOut",
38  },
39  className,
40}) => {
41  const containerRef = useRef<SVGSVGElement>(null)
42  const dimensions = useDimensions(containerRef)
43  const pathRef = useRef<SVGPathElement>(null)
44  const [hasAnimatedIn, setHasAnimatedIn] = useState(false)
45 
46  // Clamp releaseThreshold to container dimensions
47  const clampedReleaseThreshold = Math.min(
48    releaseThreshold,
49    isVertical ? dimensions.width / 2 : dimensions.height / 2
50  )
51 
52  const { isGrabbed, controlPoint } = useElasticLineEvents(
53    containerRef,
54    isVertical,
55    grabThreshold,
56    clampedReleaseThreshold
57  )
58 
59  const x = useMotionValue(dimensions.width / 2)
60  const y = useMotionValue(dimensions.height / 2)
61  const pathLength = useMotionValue(0)
62 
63  useEffect(() => {
64    // Initial draw animation
65    if (!hasAnimatedIn && dimensions.width > 0 && dimensions.height > 0) {
66      animate(pathLength, 1, {
67        ...animateInTransition,
68        onComplete: () => setHasAnimatedIn(true),
69      })
70    }
71    x.set(dimensions.width / 2)
72    y.set(dimensions.height / 2)
73  }, [dimensions, hasAnimatedIn])
74 
75  useEffect(() => {
76    if (!isGrabbed && hasAnimatedIn) {
77      animate(x, dimensions.width / 2, transition)
78      animate(y, dimensions.height / 2, transition)
79    }
80  }, [isGrabbed])
81 
82  useAnimationFrame(() => {
83    if (isGrabbed) {
84      x.set(controlPoint.x)
85      y.set(controlPoint.y)
86    }
87 
88    const controlX = hasAnimatedIn ? x.get() : dimensions.width / 2
89    const controlY = hasAnimatedIn ? y.get() : dimensions.height / 2
90 
91    pathRef.current?.setAttribute(
92      "d",
93      isVertical
94        ? `M${dimensions.width / 2} 0Q${controlX} ${controlY} ${
95// … truncated