useSpringMotion

@hua-labs/hua/motion

bash

npm install @hua-labs/hua

tsx

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

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


from*	number	-	Starting value
to*	number	-	Target value
mass	number	1	Virtual mass of the object
stiffness	number	100	Spring stiffness (higher = faster)
damping	number	10	Damping force (higher = less bounce)
restDelta	number	0.01	Minimum distance to consider at rest
restSpeed	number	0.01	Minimum speed to consider at rest
enabled	boolean	true	Enable/disable the spring
autoStart	boolean	false	Start animation automatically
onComplete	() => void	-	Callback when spring reaches rest


ref	RefObject<T \| null>	Ref to attach to element
style	CSSProperties	Style with CSS vars (--motion-progress, --motion-value)
value	number	Current spring value
velocity	number	Current velocity
isVisible	boolean	Visibility state
isAnimating	boolean	Whether spring is active
progress	number	Animation progress (0-1)
start	() => void	Start spring animation
stop	() => void	Stop animation
reset	() => void	Reset to initial state

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 }

usePulse useUnifiedMotion