import {
  useFadeIn,
  useGesture,
  useScrollProgress
} from "@hua-labs/hua/framework";

function MyComponent() {
  // Fade-in on scroll
  const fadeIn = useFadeIn({ threshold: 0.2 });

  // Gesture detection
  const gesture = useGesture({
    onSwipe: (dir) => console.log('Swiped:', dir),
  });

  // Scroll progress
  const { progress } = useScrollProgress();

  return (
    <div
      ref={fadeIn.ref}
      style={fadeIn.style}
      {...gesture}
    >
      Scroll: {Math.round(progress * 100)}%
    </div>
  );
}