useMouse

@hua-labs/hua/motion

마우스 위치 추적 — 커서 효과, 스포트라이트, 패럴랙스용

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

const { x, y, isOver } = useMouse();

return (
  <div className="relative w-64 h-64 border">
    {isOver && (
      <div
        className="absolute w-4 h-4 bg-primary rounded-full"
        style={{ left: x, top: y, transform: 'translate(-50%, -50%)' }}
      />
    )}
  </div>
);

API 레퍼런스

옵션

이름	타입	기본값	설명
targetRef	RefObject<HTMLElement \| null>	-	docs:hooks.use-mouse.options.targetRef
throttle	number	0	docs:hooks.use-mouse.options.throttle

반환값

이름	타입	설명
x	number	docs:hooks.use-mouse.returns.x
y	number	docs:hooks.use-mouse.returns.y
elementX	number	docs:hooks.use-mouse.returns.elementX
elementY	number	docs:hooks.use-mouse.returns.elementY
isOver	boolean	docs:hooks.use-mouse.returns.isOver

사용 사례

커서 추적

마우스 위치 기반 커서 효과

스포트라이트 효과

마우스 따라다니는 스포트라이트

패럴랙스 호버

마우스 호버 기반 깊이감 효과

툴팁 위치 지정

마우스 위치 기반 툴팁 배치

useGesture useHoverMotion