useMotion

@hua-labs/hua/motion

bash

npm install @hua-labs/hua

tsx

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

tsx

const motion = useMotion({
  type: 'fadeIn',
  duration: 600,
  autoStart: true,
});

return (
  <div ref={motion.ref} style={motion.style}>
    Fade in on viewport enter
  </div>
);

fadeIn

Fade

slideUp

Slide

scaleIn

Scale

bounceIn

Bounce


type	EntranceType	-	Motion type: 'fadeIn' \| 'slideUp' \| 'slideLeft' \| 'slideRight' \| 'scaleIn' \| 'bounceIn'
duration	number	600	Animation duration in milliseconds
autoStart	boolean	true	Auto start via IntersectionObserver
delay	number	0	Delay before animation starts (ms)
easing	string	"ease-out"	CSS easing function (bounceIn uses cubic-bezier by default)
threshold	number	0.1	Viewport intersection threshold (0-1)
triggerOnce	boolean	true	Only trigger animation once
distance	number	50	Slide distance in pixels (for slide types)
onComplete	() => void	-	Callback when animation completes
onStart	() => void	-	Callback when animation starts
onStop	() => void	-	Callback when animation is stopped
onReset	() => void	-	Callback when animation is reset


ref	RefObject<T \| null>	Ref to attach to animated element
style	CSSProperties	Computed style with transition properties
isVisible	boolean	Whether element has animated in
isAnimating	boolean	Whether animation is in progress
progress	number	Animation progress (0-1)
start	() => void	Start the animation
stop	() => void	Stop the animation
reset	() => void	Reset to initial state

tsx

// Bounce in with custom distance
const motion = useMotion({
  type: 'bounceIn',
  duration: 800,
  distance: 100,
  threshold: 0.2,
  triggerOnce: false,
  onComplete: () => console.log('Animation done!'),
});

return (
  <>
    <button onClick={motion.start}>Replay</button>
    <button onClick={motion.reset}>Reset</button>
    <div ref={motion.ref} style={motion.style}>
      Bounce!
    </div>
  </>
);

useFadeIn