useHoverMotion

@hua-labs/hua/motion

호버 시 트랜스폼 애니메이션 — 스케일, 리프트, 글로우 효과

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

const hover = useHoverMotion({
  hoverScale: 1.05,
  hoverY: -2,
  duration: 200,
});

return (
  <div ref={hover.ref} style={hover.style}>
    Hover me for scale + lift effect
  </div>
);

라이브 데모

스케일 효과

Scale

리프트 효과

Lift

글로우 효과

Glow

API 레퍼런스

옵션

이름	타입	기본값	설명
duration	number	200	docs:hooks.use-hover-motion.options.duration
easing	string	"ease-out"	docs:hooks.use-hover-motion.options.easing
hoverScale	number	1.05	docs:hooks.use-hover-motion.options.hoverScale
hoverY	number	-2	docs:hooks.use-hover-motion.options.hoverY
hoverOpacity	number	1	docs:hooks.use-hover-motion.options.hoverOpacity

반환값

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

사용 사례

카드

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

버튼

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

이미지 갤러리

갤러리 이미지 호버 및 전환

인터랙티브 UI

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

useMouse useGestureMotion