Skip to content
Docs
문서로 돌아가기

훅

애니메이션, 제스처, 스크롤, 유틸리티를 위한 React 훅 컬렉션

설치

bash
npm install @hua-labs/hua
Import
tsx
import { useFadeIn, useGesture, useScrollProgress } from "@hua-labs/hua/framework";
58
훅
7
카테고리
9
Pro 훅
레지스트리
YAML + 메타데이터

코어 애니메이션

14 레지스트리 기반 항목

useMotion

통합 애니메이션 훅 — 페이드, 슬라이드, 스케일, 바운스 등 모든 모션을 하나로

useFadeIn

스크롤 뷰포트 진입 시 부드러운 페이드인 애니메이션

useSlide

Deprecated

상하좌우 방향별 슬라이드 애니메이션

useSlideUp

아래에서 위로 슬라이드 인 애니메이션

useSlideLeft

오른쪽에서 왼쪽으로 슬라이드 인 애니메이션

useSlideRight

왼쪽에서 오른쪽으로 슬라이드 인 애니메이션

useSlideDown

위에서 아래로 슬라이드 인 애니메이션

useScaleIn

스케일 확대 애니메이션으로 등장

useBounceIn

탄성 있는 바운스 애니메이션으로 등장

usePulse

주목을 끄는 펄스 애니메이션 — 알림, 배지, 라이브 인디케이터용

useSpringMotion

물리 기반 스프링 모션으로 자연스러운 애니메이션

useUnifiedMotion

통합 모션 시스템

useCardList

카드 리스트 스태거 애니메이션

useStagger

기본 사용법

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

function MyComponent() {
  const fadeIn = useFadeIn({ threshold: 0.2 });
  const gesture = useGesture({
    onSwipe: (dir) => console.log("Swiped:", dir),
  });
  const { progress } = useScrollProgress();

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