usePulse

@hua-labs/hua/motion

주목을 끄는 펄스 애니메이션 — 알림, 배지, 라이브 인디케이터용

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

const pulse = usePulse({ intensity: 1, autoStart: true });

return (
  <div ref={pulse.ref} style={pulse.style}>
    <NotificationBadge />
  </div>
);

라이브 데모

주목 효과 데모

심박 데모

장바구니 알림

API 레퍼런스

옵션

이름	타입	기본값	설명
duration	number	3000	docs:hooks.use-pulse.options.duration
intensity	number	1	docs:hooks.use-pulse.options.intensity
repeatCount	number	Infinity	docs:hooks.use-pulse.options.repeatCount
repeatDelay	number	0	docs:hooks.use-pulse.options.repeatDelay
autoStart	boolean	false	docs:hooks.use-pulse.options.autoStart

반환값

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

사용 사례

알림

알림 배지 및 팝업 애니메이션

주목 인디케이터

배지, 알림 점 강조

로딩 상태

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

라이브 인디케이터

라이브 방송/실시간 상태 표시

useBounceIn useSpringMotion