useGestureMotion

@hua-labs/hua/motion

제스처와 모션을 결합한 통합 인터랙션

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

const { ref, motionStyle, isActive } = useGestureMotion({
  gestureType: "hover",
  duration: 200,
});

return (
  <div ref={ref} style={motionStyle} className="card">
    {isActive ? 'Hovering!' : 'Hover me'}
  </div>
);

API 레퍼런스

옵션

이름	타입	기본값	설명
gestureType*	"hover" \| "drag" \| "pinch" \| "swipe" \| "tilt"	-	docs:hooks.use-gesture-motion.options.gestureType
duration	number	300	docs:hooks.use-gesture-motion.options.duration
easing	string	"ease-out"	docs:hooks.use-gesture-motion.options.easing
sensitivity	number	1	docs:hooks.use-gesture-motion.options.sensitivity
enabled	boolean	true	docs:hooks.use-gesture-motion.options.enabled
onGestureStart	() => void	-	docs:hooks.use-gesture-motion.options.onGestureStart
onGestureEnd	() => void	-	docs:hooks.use-gesture-motion.options.onGestureEnd

반환값

이름	타입	설명
ref	RefObject<HTMLElement \| null>	docs:hooks.use-gesture-motion.returns.ref
motionStyle	CSSProperties	docs:hooks.use-gesture-motion.returns.motionStyle
isActive	boolean	docs:hooks.use-gesture-motion.returns.isActive
gestureState	GestureState	docs:hooks.use-gesture-motion.returns.gestureState

사용 사례

드래그 앤 드롭

터치/마우스 기반 요소 이동

인터랙티브 UI

제스처 기반 인터랙티브 컴포넌트

카드

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

이미지 갤러리

갤러리 이미지 호버 및 전환

useHoverMotion useToggleMotion