useInView

@hua-labs/hua/motion

bash

npm install @hua-labs/hua

tsx

import { useInView } from "@hua-labs/ui";

const { ref, inView } = useInView({ threshold: 0.5 });

return (
  <div ref={ref}>
    {inView ? 'In view!' : 'Not in view'}
  </div>
);

const { ref, inView } = useInView({
  triggerOnce: true,
  threshold: 0.3
});

return (
  <div ref={ref} className={inView ? 'animate-fade-in' : 'opacity-0'}>
    Animates once when visible
  </div>
);


threshold	number \| number[]	0	Intersection observer threshold (0-1)
rootMargin	string	"0px"	IntersectionObserver root margin
triggerOnce	boolean	false	Only trigger once when entering viewport
initialInView	boolean	false	Initial inView state before observation


ref	RefObject<T \| null>	Ref to attach to observed element
inView	boolean	Whether element is in viewport
entry	IntersectionObserverEntry \| null	Latest IntersectionObserver entry

useSmartMotion useScrollProgress