Math Curve Background

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3import { ErrorBoundary } from '@/components/ErrorBoundary'
4import {
5  buildPath,
6  getPoint,
7  getAngle,
8  getDetailScale,
9  getCurvePulseDuration,
10  type BackgroundCurveKey,
11} from '@/lib/math-curves'
12 
13const SPEED_DURATION: Record<string, number> = {
14  slow: 9000,
15  normal: 5500,
16  fast: 3000,
17}
18 
19export interface MathCurveBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
20  curve?: BackgroundCurveKey
21  speed?: 'slow' | 'normal' | 'fast'
22  opacity?: number
23  trackColor?: string
24  headColor?: string
25  strokeWidth?: number
26  children?: React.ReactNode
27}
28 
29const MathCurveBackground = React.forwardRef<HTMLDivElement, MathCurveBackgroundProps>(
30  (
31    {
32      className,
33      curve = 'rose',
34      speed = 'slow',
35      opacity = 0.15,
36      trackColor,
37      headColor,
38      strokeWidth = 2,
39      children,
40      ...props
41    },
42    ref
43  ) => {
44    const pathRef = React.useRef<SVGPathElement>(null)
45    const rectRef = React.useRef<SVGRectElement>(null)
46    const rafRef = React.useRef<number>(0)
47    const startTimeRef = React.useRef<number>(performance.now())
48 
49    const durationMs = SPEED_DURATION[speed] ?? SPEED_DURATION.slow
50    const HEAD_SIZE = 8
51 
52    const initialTrackPath = React.useMemo(() => buildPath(curve, 1.0), [curve])
53 
54    React.useEffect(() => {
55      startTimeRef.current = performance.now()
56 
57      const tick = () => {
58        const now = performance.now()
59        const elapsed = (now - startTimeRef.current) % durationMs
60        const progress = elapsed / durationMs
61        const detailScale = getDetailScale(now, getCurvePulseDuration(curve))
62 
63        const { x, y } = getPoint(curve, progress, detailScale)
64        const angle = getAngle(curve, progress, detailScale)
65 
66        if (pathRef.current) {
67          pathRef.current.setAttribute('d', buildPath(curve, detailScale))
68        }
69 
70        if (rectRef.current) {
71          const cx = x
72          const cy = y
73          rectRef.current.setAttribute('x', String(cx - HEAD_SIZE / 2))
74          rectRef.current.setAttribute('y', String(cy - HEAD_SIZE / 2))
75          rectRef.current.setAttribute('transform', `rotate(${angle} ${cx} ${cy})`)
76        }
77 
78        rafRef.current = requestAnimationFrame(tick)
79      }
80 
81      rafRef.current = requestAnimationFrame(tick)
82 
83      return () => {
84        cancelAnimationFrame(rafRef.current)
85      }
86    }, [curve, speed, durationMs, strokeWidth])
87 
88// … truncated