Skip to content
Docs
훅으로 돌아가기

useAutoMotion

@hua-labs/hua/framework
Pro
출시 예정

Pro 플랜 컴포넌트

곧 출시됩니다! 웨이팅리스트에 등록하고 소식을 받아보세요.

웨이팅리스트 등록

자동 슬라이드/스케일/페이드 모션 패키지 (Pro)

포함된 훅

useAutoSlide

자동으로 슬라이드를 전환하는 캐러셀 훅

useAutoScale

자동으로 스케일 펄스 효과를 생성하는 훅

useAutoFade

아이템 간 자동 크로스페이드 효과 훅

기본 사용법

tsx
import { useAutoSlide, useAutoScale, useAutoFade } from "@hua-labs/hua/framework";

// Auto-sliding carousel
const autoSlide = useAutoSlide({
  interval: 3000,
  itemCount: 4,
  pauseOnHover: true,
});

// Auto-scaling pulse
const autoScale = useAutoScale({
  minScale: 1,
  maxScale: 1.1,
  duration: 1000,
});

// Auto-fading crossfade
const autoFade = useAutoFade({
  duration: 1500,
  items: ['Item 1', 'Item 2', 'Item 3'],
});

라이브 데모

자동 슬라이드 캐러셀

Slide 1
Slide 2
Slide 3
Slide 4

API 레퍼런스

useAutoSlide Options

이름타입기본값설명
intervalnumber3000슬라이드 전환 간격 (밀리초)
itemCountnumber-총 슬라이드 항목 수
pauseOnHoverbooleantrue호버 시 자동 재생 일시정지 여부
loopbooleantrue무한 루프 여부

useAutoScale Options

이름타입기본값설명
minScalenumber1최소 스케일 값
maxScalenumber1.1최대 스케일 값
durationnumber1000애니메이션 지속 시간 (밀리초)

useAutoFade Options

이름타입기본값설명
durationnumber1500페이드 전환 지속 시간 (밀리초)
itemsReactNode[]-크로스페이드할 아이템 배열
crossfadebooleantrue동시 페이드인/아웃 크로스페이드 활성화 여부

사용 사례

히어로 캐러셀

랜딩 페이지 히어로 슬라이더

추천사

자동으로 전환되는 고객 후기

주목 인디케이터

새 알림 또는 상태 강조

배경 효과

동적 배경 그래디언트 애니메이션