useSpringMotion

@hua-labs/hua/motion

물리 기반 스프링 모션으로 자연스러운 애니메이션

설치

bash

npm install @hua-labs/hua

Import

tsx

import { useSpringMotion } from "@hua-labs/hua/framework";

@hua-labs/motion-core의 모션 훅을 @hua-labs/hua/framework에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

기본 사용법

tsx

const spring = useSpringMotion({
  from: 0,
  to: 100,
  stiffness: 200,
  damping: 20,
});

return (
  <div
    ref={spring.ref}
    style={{
      ...spring.style,
      transform: `translateX(${spring.value}px)`,
    }}
  >
    Spring animated
  </div>
);

라이브 데모

바운스 스프링 데모

stiffness: 400, damping: 10

부드러운 스프링 데모

stiffness: 200, damping: 30

API 레퍼런스

옵션

이름	타입	기본값	설명
from*	number	-	docs:hooks.use-spring-motion.options.from
to*	number	-	docs:hooks.use-spring-motion.options.to
mass	number	1	docs:hooks.use-spring-motion.options.mass
stiffness	number	100	docs:hooks.use-spring-motion.options.stiffness
damping	number	10	docs:hooks.use-spring-motion.options.damping
restDelta	number	0.01	docs:hooks.use-spring-motion.options.restDelta
restSpeed	number	0.01	docs:hooks.use-spring-motion.options.restSpeed
enabled	boolean	true	docs:hooks.use-spring-motion.options.enabled
autoStart	boolean	false	docs:hooks.use-spring-motion.options.autoStart
onComplete	() => void	-	docs:hooks.use-spring-motion.options.onComplete

반환값

이름	타입	설명
ref	RefObject<T \| null>	docs:hooks.use-spring-motion.returns.ref
style	CSSProperties	docs:hooks.use-spring-motion.returns.style
value	number	docs:hooks.use-spring-motion.returns.value
velocity	number	docs:hooks.use-spring-motion.returns.velocity
isVisible	boolean	docs:hooks.use-spring-motion.returns.isVisible
isAnimating	boolean	docs:hooks.use-spring-motion.returns.isAnimating
progress	number	docs:hooks.use-spring-motion.returns.progress
start	() => void	docs:hooks.use-spring-motion.returns.start
stop	() => void	docs:hooks.use-spring-motion.returns.stop
reset	() => void	docs:hooks.use-spring-motion.returns.reset

프리셋

tsx

// Bouncy (playful UI elements)
config: { stiffness: 400, damping: 10, mass: 1 }

// Smooth (elegant transitions)
config: { stiffness: 200, damping: 30, mass: 1 }

// Stiff (snappy responses)
config: { stiffness: 500, damping: 25, mass: 1 }

// Heavy (weighty feel)
config: { stiffness: 300, damping: 20, mass: 3 }

사용 사례

부드러운 전환

자연스러운 물리 기반 전환 효과

바운스 애니메이션

탄성 있는 UI 인터랙션

커서 따라가기

마우스 위치를 스프링으로 추적

물리 기반 UI

자연스러운 물리 시뮬레이션 효과

usePulse useUnifiedMotion