Add animation support to all Curve components

Author: NumberOneBot

src/components/CompositeCurve/CompositeCurve.tsx

@@ -1,67 +1,28 @@
-import {
-  useEffect,
-  useMemo,
-  useState,
-  useCallback,
-  type CSSProperties
-} from 'react'
+import { useEffect, useMemo, useState, useCallback } from 'react'
 import {
   calcBiQuadCoefficients,
   calcCompositeMagnitudes,
   calcMagnitudes
 } from '../../math'
 import { type GraphFilter, type Magnitude } from '../../types'
 import { useGraph, FrequencyResponseCurve } from '..'
+import type { DefaultCurveProps } from '../types'
 
 const getFilterKey = (filter: GraphFilter) =>
   `${filter.type}_${filter.freq}_${filter.q}_${filter.gain}`
 
-type CompositeCurveProps = {
+type CompositeCurveProps = DefaultCurveProps & {
   /**
    * Array of filters to combine into a single frequency response curve
    */
   filters: GraphFilter[]
-  /**
-   * Whether to render the curve with a dotted/dashed line style
-   * @default false
-   */
-  dotted?: boolean
-  /**
-   * Composite curve color
-   * @default theme.curve.color || '#FFFFFF'
-   */
-  color?: string
-  /**
-   * Composite curve opacity
-   * @default theme.curve.opacity || 1
-   */
-  opacity?: number
-  /**
-   * Composite curve line width
-   * @default theme.curve.width || 1.5
-   */
-  lineWidth?: number
   /**
    * Adjusts the resolution of the curve by reducing the number of points based on the graph's width.
    * Lower values = more points = smoother curve but slower performance.
    * Recommended to increase this value when rendering more than 10 filters.
    * @default 2
    */
   resolutionFactor?: number
-  /**
-   * Optional gradient ID to fill the curve with a gradient
-   * The gradient must be defined by `FilterGradient` component and referenced by its ID
-   * @default undefined
-   */
-  gradientId?: string
-  /**
-   * Additional CSS classes to apply to the curve path
-   */
-  className?: string
-  /**
-   * Additional inline styles to apply to the curve path
-   */
-  style?: CSSProperties
 }
 /**
  * Renders a composite frequency response curve by combining multiple filter responses.
@@ -72,14 +33,19 @@ type CompositeCurveProps = {
  */
 export const CompositeCurve = ({
   filters,
-  dotted = false,
+  resolutionFactor = 2,
+
   color,
+  dotted,
   opacity,
   lineWidth,
-  resolutionFactor = 2,
   gradientId,
-  className,
-  style
+
+  style,
+  easing,
+  animate,
+  duration, // ms
+  className
 }: CompositeCurveProps) => {
   const { scale, width } = useGraph()
   const { minFreq, maxFreq, sampleRate } = scale
@@ -128,18 +94,23 @@ export const CompositeCurve = ({
     return calcCompositeMagnitudes(allMags)
   }, [magnitudesCache])
 
+  if (!compositeMagnitudes.length) return null
+
   return (
     <>
       <use href="#centerLine" />
       <FrequencyResponseCurve
         magnitudes={compositeMagnitudes}
-        dotted={dotted}
         color={color}
+        dotted={dotted}
         opacity={opacity}
         lineWidth={lineWidth}
         gradientId={gradientId}
-        className={className}
         style={style}
+        easing={easing}
+        animate={animate}
+        duration={duration}
+        className={className}
       />
     </>
   )

src/components/FilterCurve/FilterCurve.tsx

@@ -99,24 +99,28 @@ export type FilterCurveProps = DefaultCurveProps &
  **/
 export const FilterCurve = ({
   filter,
-  color,
   index = -1,
-  lineWidth,
-  opacity,
-
   resolutionFactor = 2,
 
+  color,
+  dotted,
+  opacity,
+  lineWidth,
   gradientId,
+
   showPin = false,
   showBypass = false,
-  active = false,
 
+  active = false,
   activeColor,
-  activeLineWidth,
   activeOpacity,
+  activeLineWidth,
 
-  className,
   style,
+  easing,
+  animate,
+  duration, // ms
+  className,
 
   onChange
 }: FilterCurveProps) => {
@@ -169,17 +173,21 @@ export const FilterCurve = ({
           filter={filter}
           color={curveColor}
           opacity={curveOpacity}
-          width={curveWidth}
+          lineWidth={curveWidth}
         />
       )}
       <FrequencyResponseCurve
         magnitudes={magnitudes}
+        dotted={dotted}
         color={curveColor}
         opacity={curveOpacity}
         lineWidth={curveWidth}
         gradientId={gradientId}
-        className={className}
         style={style}
+        easing={easing}
+        animate={animate}
+        duration={duration}
+        className={className}
       />
     </>
   )

src/components/FilterCurve/FilterPin.tsx

@@ -12,15 +12,15 @@ import { useGraph } from '../..'
 export type FilterPinProps = {
   filter: GraphFilter
   vars: BiQuadCoefficients
-  width?: number
+  lineWidth?: number
   opacity?: CSSProperties['opacity']
   color?: CSSProperties['color']
 }
 export const FilterPin = ({
   filter,
   vars,
   opacity,
-  width,
+  lineWidth,
   color
 }: FilterPinProps) => {
   const { scale, height, logScale } = useGraph()
@@ -71,7 +71,7 @@ export const FilterPin = ({
         y1={pointY}
         y2={magnitudeY}
         stroke={color}
-        strokeWidth={width}
+        strokeWidth={lineWidth}
         strokeOpacity={opacity}
       />
     )

src/components/FrequencyResponseCurve/FrequencyResponseCurve.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useLayoutEffect, useMemo, useRef } from 'react'
 
 import { type DefaultCurveProps, easingSplines } from '../types'
 import { plotCurve, scaleMagnitudes } from '../../math'
@@ -40,37 +40,53 @@ export const FrequencyResponseCurve = ({
     theme: { curve }
   } = useGraph()
 
-  const previousPathRef = useRef<string>('')
-  const [initialized, setInitialized] = useState(false)
+  // Track first mount and previous path
+  const firstMount = useRef(true)
+  const prevPathRef = useRef<string>('')
+  // Reference to animate element
+  const animateRef = useRef<SVGAnimateElement>(null)
 
-  const points = scaleMagnitudes(magnitudes, scale, width, height)
-  const path = plotCurve(points, scale, width, height)
+  // Memoize paths calculation
+  const { currentPath, initialPath } = useMemo(() => {
+    const points = scaleMagnitudes(magnitudes, scale, width, height)
+    const flatPoints = points.map((p) => ({ x: p.x, y: height / 2 }))
 
-  // Single effect to handle both initialization and updates
-  useEffect(() => {
-    if (!initialized) {
-      // First time - create flat line with same number of points
-      const zeroes = new Array(magnitudes.length).fill(0)
-      const initialPoints = scaleMagnitudes(zeroes, scale, width, height)
-      previousPathRef.current = plotCurve(initialPoints, scale, width, height)
-      setInitialized(true)
-    } else {
-      previousPathRef.current = path
+    const currentPath = plotCurve(points, scale, width, height)
+    const initialPath = plotCurve(flatPoints, scale, width, height)
+
+    return {
+      currentPath,
+      initialPath
+    }
+  }, [magnitudes, scale, width, height])
+
+  // Handle initial mount state
+  useLayoutEffect(() => {
+    if (firstMount.current) {
+      prevPathRef.current = initialPath
+      firstMount.current = false
     }
-  }, [path, magnitudes.length, scale, width, height])
+  }, [initialPath])
 
-  // Don't render animation until initialized
-  const showAnimation = animate && initialized && previousPathRef.current
+  // Update previous path and trigger animation
+  useLayoutEffect(() => {
+    if (!firstMount.current && animate && animateRef.current) {
+      prevPathRef.current = currentPath
+      animateRef.current.beginElement()
+    }
+  }, [magnitudes, animate])
+
+  // Determine which path to display
+  const displayPath = animate && firstMount.current ? initialPath : currentPath
+  const fromPath = prevPathRef.current || initialPath
 
   const curveColor = color || curve.color
   const curveWidth = lineWidth || curve.width
   const curveOpacity = opacity || curve.opacity
 
-  // NOTE: center line should be rendered on top of all filter curves but behind the final, resulting one
-
   return (
     <path
-      d={path}
+      d={displayPath}
       stroke={curveColor}
       strokeWidth={curveWidth}
       strokeOpacity={curveOpacity}
@@ -80,17 +96,17 @@ export const FrequencyResponseCurve = ({
       className={className}
       style={style}
     >
-      {showAnimation && (
+      {animate && (
         <animate
-          key={path} // Forces new animation when path changes
-          attributeName="d"
-          from={previousPathRef.current}
-          to={path}
-          dur={`${duration}ms`}
+          ref={animateRef}
+          from={fromPath}
+          to={currentPath}
           fill="freeze"
+          repeatCount="1"
           calcMode="spline"
+          attributeName="d"
+          dur={`${duration}ms`}
           keySplines={easingSplines[easing]}
-          repeatCount="1"
         />
       )}
     </path>

src/components/types.ts

@@ -1,11 +1,14 @@
 import type { CSSProperties } from 'react'
 
 export const easingSplines = {
+  // Standard CSS easing values translated to SVG keySplines format
   linear: '0 0 1 1',
-  easeIn: '0.4 0 1 1',
-  easeOut: '0 0 0.2 1',
-  easeInOut: '0.4 0 0.2 1',
-  elastic: '0.6 0.5 0.15 0.95'
+  easeIn: '0.42 0 1 1',
+  easeOut: '0 0 0.58 1',
+  easeInOut: '0.42 0 0.58 1',
+  // Cubic bezier curves for more dramatic effects
+  elastic: '0.64 0 0.78 1.5',
+  bounce: '0.32 1.5 0.67 0.78'
 } as const
 
 export type EasingType = keyof typeof easingSplines
@@ -43,17 +46,17 @@ export type DefaultCurveProps = CurveStyleProps &
   CurveAnimationProps & {
     /**
      * Color override for the curve stroke
-     * @default theme.curve.color
+     * @default theme.curve.color || '#FFFFFF'
      */
     color?: CSSProperties['color']
     /**
      * Opacity override for the curve stroke
-     * @default theme.curve.opacity
+     * @default theme.curve.opacity || 1
      */
     opacity?: CSSProperties['opacity']
     /**
      * Line width override for the curve stroke
-     * @default theme.curve.width
+     * @default theme.curve.width || 1.5
      */
     lineWidth?: number
     /**