@hua-labs/motion-advanced

Pro

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

function AnimatedSection() {
  const orchestra = useMotionOrchestra({
    mode: 'stagger',      // 'sequential' | 'parallel' | 'stagger'
    staggerDelay: 100,    // stagger 모드 시 간격 (ms)
    autoStart: false,
    loop: false,
    onComplete: () => console.log('All done!')
  });

  // 모션 단계 추가
  useEffect(() => {
    orchestra.addMotion({
      id: 'title',
      motion: () => animateTitle(),
      delay: 0
    });
    orchestra.addMotion({
      id: 'content',
      motion: () => animateContent(),
      delay: 200
    });
  }, []);

  return (
    <div>
      <button onClick={orchestra.play}>Play</button>
      <button onClick={orchestra.pause}>Pause</button>
      <button onClick={orchestra.stop}>Stop</button>
      <p>Step: {orchestra.currentStep} / {orchestra.totalSteps}</p>
    </div>
  );
}

// Returns
// - addMotion(step): 모션 단계 추가
// - removeMotion(id): 모션 단계 제거
// - play(): 재생 시작
// - stop(): 정지
// - pause(): 일시정지
// - resume(): 재개
// - isPlaying: boolean
// - currentStep: number
// - completedSteps: Set<string>
// - totalSteps: number

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

function Game() {
  const game = useGameLoop({
    fps: 60,           // 목표 FPS (기본값: 60)
    autoStart: false,
    maxFPS: 120,       // 최대 FPS 제한
    minFPS: 30,        // 최소 FPS 경고 임계값
  });

  // 업데이트 로직 등록
  useEffect(() => {
    const cleanup = game.onUpdate((deltaTime, elapsedTime) => {
      // 게임 로직 업데이트 (물리, AI 등)
      updatePhysics(deltaTime);
    });
    return cleanup;
  }, []);

  // 렌더링 로직 등록
  useEffect(() => {
    const cleanup = game.onRender((deltaTime, elapsedTime) => {
      // 렌더링 (canvas 등)
      renderFrame();
    });
    return cleanup;
  }, []);

  return (
    <div>
      <canvas ref={canvasRef} />
      <p>FPS: {game.fps}</p>
      <p>Frame: {game.frameCount}</p>
      <p>Elapsed: {Math.round(game.elapsedTime)}ms</p>
      <button onClick={game.start}>Start</button>
      <button onClick={game.pause}>Pause</button>
      <button onClick={game.resume}>Resume</button>
      <button onClick={game.stop}>Stop</button>
      <button onClick={game.reset}>Reset</button>
    </div>
  );
}

// Returns
// - isRunning: boolean
// - fps: number (현재 FPS)
// - deltaTime: number (프레임 간 시간 차이 ms)
// - elapsedTime: number (총 경과 시간 ms)
// - frameCount: number
// - mounted: boolean
// - start(), stop(), pause(), resume(), reset()
// - onUpdate(callback): 업데이트 콜백 등록
// - onRender(callback): 렌더링 콜백 등록

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

function SlideInElement() {
  const slide = useAutoSlide({
    direction: 'left',   // 'left' | 'right' | 'up' | 'down' | 'left-up' | ...
    distance: 100,       // 슬라이드 거리 (px)
    duration: 1000,      // 애니메이션 시간 (ms)
    delay: 0,            // 시작 지연
    ease: 'ease-in-out', // 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out'
    repeat: false,       // 반복 여부
    repeatCount: -1,     // -1 = 무한 반복
    repeatDelay: 1000,   // 반복 간 지연
    autoStart: true,
    onComplete: () => console.log('Done!'),
    onRepeat: (count) => console.log(`Repeat: ${count}`)
  });

  return (
    <div
      style={{
        transform: `translate(${slide.position.x}px, ${slide.position.y}px)`,
        opacity: slide.isVisible ? 1 : 0
      }}
    >
      <p>Sliding content</p>
      <button onClick={slide.slideIn}>Slide In</button>
      <button onClick={slide.slideOut}>Slide Out</button>
      <button onClick={slide.toggle}>Toggle</button>
      <button onClick={slide.reset}>Reset</button>
    </div>
  );
}

// Returns
// - position: { x: number, y: number }
// - isAnimating: boolean
// - isVisible: boolean
// - mounted: boolean
// - start(), stop(), reset()
// - slideIn(), slideOut(), toggle()

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

function MonitoredComponent() {
  const perf = usePerformanceMonitor({
    threshold: 30,  // 이 FPS 이하면 성능 저하로 판단
    onPerformanceIssue: (fps) => {
      console.warn(`Low FPS: ${fps}`);
      // 애니메이션 품질 낮추기 등 대응
    }
  });

  return (
    <div ref={perf.ref}>
      <p>FPS: {perf.fps}</p>
      <p>Frames: {perf.frameCount}</p>
      {perf.isLowPerformance && (
        <p className="text-yellow-500">Performance warning!</p>
      )}
    </div>
  );
}

// Returns
// - ref: RefCallback (모니터링할 요소에 연결)
// - fps: number
// - isLowPerformance: boolean
// - frameCount: number