useBounceIn

@hua-labs/hua/motion

bash

npm install @hua-labs/hua

tsx

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

tsx

const bounceIn = useBounceIn({ duration: 600 });

return (
  <div ref={bounceIn.ref} style={bounceIn.style}>
    Content bounces in
  </div>
);

0.2

Light

intensity: 0.2

0.3

Normal

intensity: 0.3

0.5

Strong

intensity: 0.5


duration	number	600	Animation duration in milliseconds
delay	number	0	Delay before animation starts
intensity	number	0.3	Bounce intensity (scale overshoot amount)
threshold	number	0.1	Viewport intersection threshold (0-1)
triggerOnce	boolean	true	Only trigger once
easing	string	"cubic-bezier(0.34, 1.56, 0.64, 1)"	Easing function (default: bounce curve)
autoStart	boolean	true	Auto start on viewport entry
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 element
style	CSSProperties	Animated style (transform + opacity)
isVisible	boolean	Whether element is in viewport
isAnimating	boolean	Whether animation is in progress
progress	number	Animation progress (0-1)
start	() => void	Start animation
stop	() => void	Stop animation
reset	() => void	Reset to initial state

tsx

const bounceIn = useBounceIn({
  intensity: 0.5,  // More pronounced bounce overshoot
  duration: 800,
});