스프링 물리

import { calculateSpring } from '@hua-labs/motion-core'
import type { SpringConfig, SpringResult } from '@hua-labs/motion-core'

function calculateSpring(
  currentValue: number,
  currentVelocity: number,
  targetValue: number,
  deltaTime: number,
  config: SpringConfig
): SpringResult

interface SpringConfig {
  stiffness: number   // 강성 (k): 높을수록 빠르게 수렴
  damping: number     // 감쇠 (c): 높을수록 진동 없이 수렴
  mass: number        // 질량 (m): 높을수록 느리게 수렴
}

interface SpringResult {
  value: number      // 새 위치
  velocity: number   // 새 속도
}

F_spring  = -k × displacement
F_damping = -c × velocity
a         = (F_spring + F_damping) / m
v_new     = v + a × Δt
x_new     = x + v_new × Δt

import { calculateSpring } from '@hua-labs/motion-core'

let value = 0
let velocity = 0
const target = 100
const config = { stiffness: 100, damping: 20, mass: 1 }

function animationLoop(currentTime: number) {
  const deltaTime = 1 / 60  // 60fps

  const result = calculateSpring(value, velocity, target, deltaTime, config)
  value = result.value
  velocity = result.velocity

  // 정지 조건: 목표에 충분히 가까워지고 속도가 작으면 종료
  if (Math.abs(value - target) < 0.01 && Math.abs(velocity) < 0.01) {
    value = target
    return
  }

  requestAnimationFrame(animationLoop)
}

import { useSpringMotion } from '@hua-labs/motion-core'

function SpringCounter() {
  const { value, isAnimating } = useSpringMotion({
    from: 0,
    to: 200,
    stiffness: 150,
    damping: 25,
    mass: 1
  })

  return (
    <div>
      <span>{Math.round(value)}</span>
      {isAnimating && <span> (애니메이션 중)</span>}
    </div>
  )
}

interface MotionProfileSpring {
  mass: number        // 기본값: 프로필별 상이
  stiffness: number
  damping: number
  restDelta: number   // 정지 위치 임계값
  restSpeed: number   // 정지 속도 임계값
}