@hua-labs/motion

v1.0.0

Animation

Unified

motion-core + motion-advanced 통합 패키지. 모든 모션 훅을 한 번에 제공.

💡 대부분의 경우 @hua-labs/hua-ux를 사용하세요. hua-ux에서 useMotion 등 핵심 훅을 제공합니다.

$npm install @hua-labs/motion

훅 카테고리

Auto 시리즈

자동화된 모션 훅들

useAutoSlideuseAutoScaleuseAutoFadeuseAutoPlay

오케스트레이션

복잡한 애니메이션 시퀀스 관리

useMotionOrchestrauseOrchestrationuseSequence

고급 인터랙션

레이아웃, 키보드, 스크롤 기반 모션

useLayoutMotionuseKeyboardToggleuseScrollDirectionuseStickyToggleuseScrollToggleuseVisibilityToggleuseInteractive

특수 기능

성능 최적화, 국제화, 게임 루프

usePerformanceMonitoruseLanguageAwareMotionuseGameLoop

사용 예시

Auto Slide

tsx

import { useAutoSlide } from '@hua-labs/motion';

function Carousel({ items }) {
  const { containerRef, currentIndex, next, prev } = useAutoSlide({
    autoPlay: true,
    interval: 3000,
    direction: 'horizontal',
  });

  return (
    <div ref={containerRef}>
      {items.map((item, i) => <Slide key={i} {...item} />)}
    </div>
  );
}

Orchestration

tsx

import { useMotionOrchestra } from '@hua-labs/motion';

function HeroSection() {
  const orchestra = useMotionOrchestra({
    sequence: [
      { target: 'title', type: 'fadeIn', duration: 500 },
      { target: 'subtitle', type: 'slideUp', delay: 200 },
      { target: 'cta', type: 'scale', delay: 400 },
    ],
  });

  return (
    <section ref={orchestra.containerRef}>
      <h1 ref={orchestra.refs.title}>Title</h1>
      <p ref={orchestra.refs.subtitle}>Subtitle</p>
      <button ref={orchestra.refs.cta}>Get Started</button>
    </section>
  );
}

Game Loop

tsx

import { useGameLoop } from '@hua-labs/motion';

function Game() {
  const { isRunning, fps, start, stop, pause } = useGameLoop({
    targetFPS: 60,
    onFrame: (deltaTime, gameState) => {
      // Update game logic
      updatePhysics(deltaTime);
      renderFrame();
    },
  });

  return (
    <div>
      <canvas ref={canvasRef} />
      <span>FPS: {fps}</span>
      <button onClick={isRunning ? pause : start}>
        {isRunning ? 'Pause' : 'Start'}
      </button>
    </div>
  );
}

Exports

Import Path	설명
@hua-labs/motion	모든 훅 (Core + Advanced)
@hua-labs/motion/core	코어 훅만
@hua-labs/motion/page	페이지 전환 훅
@hua-labs/motion/scroll	스크롤 관련 훅
@hua-labs/motion/element	엘리먼트 애니메이션