usePageMotions

@hua-labs/hua/motion

페이지 수준 모션 오케스트레이션

설치

bash

npm install @hua-labs/hua

Import

tsx

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

@hua-labs/motion-core의 모션 훅을 @hua-labs/hua/framework에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

기본 사용법

tsx

const motions = usePageMotions({
  hero: { type: "hero", entrance: "fadeIn", delay: 0 },
  title: { type: "title", entrance: "slideUp", delay: 200 },
  cta: { type: "button", entrance: "scaleIn", hover: true, delay: 400 },
});

return (
  <div>
    <div ref={motions.hero.ref} style={motions.hero.style}>Hero</div>
    <h1 ref={motions.title.ref} style={motions.title.style}>Title</h1>
    <button ref={motions.cta.ref} style={motions.cta.style}>CTA</button>
  </div>
);

API 레퍼런스

옵션

이름	타입	기본값	설명
config*	Record<string, PageMotionElement>	-	docs:hooks.use-page-motions.options.config
config[id].type*	"hero" \| "title" \| "button" \| "card" \| "text" \| "image"	-	docs:hooks.use-page-motions.options.configidtype
config[id].entrance	"fadeIn" \| "slideUp" \| "slideLeft" \| "slideRight" \| "scaleIn" \| "bounceIn"	-	docs:hooks.use-page-motions.options.configidentrance
config[id].hover	boolean	-	docs:hooks.use-page-motions.options.configidhover
config[id].click	boolean	-	docs:hooks.use-page-motions.options.configidclick
config[id].delay	number	0	docs:hooks.use-page-motions.options.configiddelay
config[id].duration	number	700	docs:hooks.use-page-motions.options.configidduration

반환값

이름	타입	설명
[elementId]	MotionRef	docs:hooks.use-page-motions.returns.elementId
reset	() => void	docs:hooks.use-page-motions.returns.reset

사용 사례

페이지 전환

부드러운 페이지 간 전환 효과

랜딩 페이지 섹션

스크롤 시 섹션별 등장 애니메이션

콘텐츠 섹션

스크롤 시 콘텐츠 블록 순차 등장

히어로 섹션

페이지 진입 시 히어로 영역 애니메이션

useSimplePageMotion useSmartMotion