useScrollReveal

@hua-labs/hua/motion

bash

npm install @hua-labs/hua

tsx

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

tsx

const reveal = useScrollReveal({ threshold: 0.2 });

return (
  <div ref={reveal.ref} style={reveal.style}>
    Content reveals on scroll
  </div>
);

fadeIn

slideUp

slideLeft

scaleIn


threshold	number	0.1	Viewport intersection threshold (0-1)
rootMargin	string	"0px"	IntersectionObserver root margin
triggerOnce	boolean	true	Only trigger animation once
duration	number	700	Animation duration in milliseconds
motionType	"fadeIn" \| "slideUp" \| "slideLeft" \| "slideRight" \| "scaleIn" \| "bounceIn"	"fadeIn"	Animation type on reveal
delay	number	0	Animation delay in milliseconds
easing	string	"ease-out"	CSS easing function
onComplete	() => void	-	Callback when reveal animation completes
onStart	() => void	-	Callback when reveal 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 object
isVisible	boolean	Whether element is in viewport
isAnimating	boolean	Whether animation is in progress
progress	number	Animation progress (0-1)
start	() => void	Manually start reveal
stop	() => void	Stop animation
reset	() => void	Reset to hidden state

tsx

const reveal = useScrollReveal({
  motionType: "slideUp",
  delay: 200,
  easing: "ease-in-out",
});