useMotionState

@hua-labs/hua/motion

bash

npm install @hua-labs/hua

tsx

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

tsx

const motion = useMotionState({
  duration: 2000,
  autoStart: false,
});

return (
  <div>
    <p>State: {motion.state}</p>
    <p>Progress: {Math.round(motion.progress)}%</p>
    <p>Elapsed: {motion.elapsed}ms</p>

    <button onClick={motion.play}>Play</button>
    <button onClick={motion.pause}>Pause</button>
    <button onClick={motion.stop}>Stop</button>
    <button onClick={motion.reverse}>Reverse</button>
  </div>
);


initialState	"idle" \| "playing" \| "paused" \| "completed" \| "error"	"idle"	Initial playback state
duration	number	1000	Total animation duration in milliseconds
delay	number	0	Delay before playing
autoStart	boolean	false	Start playing automatically
loop	boolean	false	Loop when completed
direction	"forward" \| "reverse" \| "alternate"	"forward"	Playback direction
showOnMount	boolean	false	Show initial state on mount (SSR safety)


state	MotionState	Current state ("idle", "playing", "paused", "completed", "error")
direction	MotionDirection	Current direction ("forward", "reverse", "alternate")
progress	number	Playback progress (0-100)
elapsed	number	Elapsed time in milliseconds
remaining	number	Remaining time in milliseconds
mounted	boolean	Hydration safety flag
play	() => void	Start or resume playback
pause	() => void	Pause playback
stop	() => void	Stop and reset to idle
reset	() => void	Reset to initial state
reverse	() => void	Reverse playback direction
seek	(progress: number) => void	Seek to specific progress (0-100)
setState	(newState: MotionState) => void	Manually set state

useReducedMotion useRepeat