useSmartMotion

@hua-labs/hua/motion

컨텍스트 인식 스마트 애니메이션

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

const card = useSmartMotion({
  type: "card",
  entrance: "slideUp",
  hover: true,
  delay: 200,
});

return (
  <div ref={card.ref} style={card.style} className="card">
    Smart motion card
  </div>
);

API 레퍼런스

옵션

이름	타입	기본값	설명
type	"hero" \| "title" \| "button" \| "card" \| "text" \| "image"	-	docs:hooks.use-smart-motion.options.type
entrance	"fadeIn" \| "slideUp" \| "slideLeft" \| "slideRight" \| "scaleIn" \| "bounceIn"	-	docs:hooks.use-smart-motion.options.entrance
hover	boolean	-	docs:hooks.use-smart-motion.options.hover
click	boolean	-	docs:hooks.use-smart-motion.options.click
delay	number	0	docs:hooks.use-smart-motion.options.delay
duration	number	700	docs:hooks.use-smart-motion.options.duration
threshold	number	0.1	docs:hooks.use-smart-motion.options.threshold
autoLanguageSync	boolean	false	docs:hooks.use-smart-motion.options.autoLanguageSync

반환값

이름	타입	설명
ref	RefObject<T \| null>	docs:hooks.use-smart-motion.returns.ref
style	CSSProperties	docs:hooks.use-smart-motion.returns.style
isVisible	boolean	docs:hooks.use-smart-motion.returns.isVisible
isHovered	boolean	docs:hooks.use-smart-motion.returns.isHovered
isClicked	boolean	docs:hooks.use-smart-motion.returns.isClicked

사용 사례

카드

카드 컴포넌트 호버 및 클릭 효과

히어로 섹션

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

버튼

버튼 호버 및 클릭 피드백 효과

이미지 갤러리

갤러리 이미지 호버 및 전환

usePageMotions usePageTransitionPro