useUnifiedMotion

@hua-labs/hua/motion

통합 모션 시스템

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

// useMotion from hua wraps this hook
import { useUnifiedMotion } from "@hua-labs/motion-core";

const motion = useUnifiedMotion({
  type: "fadeIn",
  duration: 600,
  autoStart: false,
});

return (
  <div ref={motion.ref} style={motion.style}>
    Unified motion
  </div>
);

API 레퍼런스

옵션

이름	타입	기본값	설명
type*	"fadeIn" \| "slideUp" \| "slideLeft" \| "slideRight" \| "scaleIn" \| "bounceIn"	-	docs:hooks.use-unified-motion.options.type
duration	number	600	docs:hooks.use-unified-motion.options.duration
delay	number	0	docs:hooks.use-unified-motion.options.delay
autoStart	boolean	false	docs:hooks.use-unified-motion.options.autoStart
easing	string	"ease-out"	docs:hooks.use-unified-motion.options.easing
threshold	number	0.1	docs:hooks.use-unified-motion.options.threshold
triggerOnce	boolean	true	docs:hooks.use-unified-motion.options.triggerOnce
distance	number	50	docs:hooks.use-unified-motion.options.distance

반환값

이름	타입	설명
ref	RefObject<T \| null>	docs:hooks.use-unified-motion.returns.ref
style	CSSProperties	docs:hooks.use-unified-motion.returns.style
isVisible	boolean	docs:hooks.use-unified-motion.returns.isVisible
isAnimating	boolean	docs:hooks.use-unified-motion.returns.isAnimating
progress	number	docs:hooks.use-unified-motion.returns.progress
start	() => void	docs:hooks.use-unified-motion.returns.start
stop	() => void	docs:hooks.use-unified-motion.returns.stop
reset	() => void	docs:hooks.use-unified-motion.returns.reset

사용 사례

페이지 전환

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

로딩 상태

데이터 로딩 중 시각적 피드백

모달 애니메이션

모달 열기/닫기 전환 효과

인터랙티브 요소

사용자 상호작용 기반 동적 효과

useSpringMotion useCardList