모션

useMotion 훅으로 부드러운 애니메이션을 추가하세요. 설정이 필요 없습니다.

빠른 시작

import { useMotion } from '@hua-labs/hua-ux/framework';

function MyComponent() {
  const motion = useMotion({
    type: 'slideUp',
    duration: 600,
    delay: 100,
  });

  return (
    <div ref={motion.ref} style={motion.style}>
      Hello, animated world!
    </div>
  );
}

모션 타입

fadeIn

slideUp

slideLeft

slideRight

scaleIn

bounceIn

MicroMotion 시스템

미묘한 스프링 기반 호버 및 프레스 상호작용. 특징적인 "부드럽고 약간 탄성 있는" 느낌.

프리셋

subtle

호버 및 클릭

soft

호버 및 클릭

springy

호버 및 클릭

bouncy

호버 및 클릭

snappy

호버 및 클릭

프리셋 특성

프리셋	지속 시간	이징	미묘한 스프링 기반 호버 및 프레스 상호작용. 특징적인 "부드럽고 약간 탄성 있는" 느낌.
subtle	150ms	거의 선형	매우 미묘하고 거의 눈에 띄지 않음
soft	250ms	부드러운 ease-out	부드럽고 편안한 반응
springy	300ms	약간의 오버슈트	기본값 - "탄성 있는" 느낌
bouncy	400ms	큰 오버슈트	장난스럽고 활기찬
snappy	180ms	빠른 ease-out	빠르고 반응적인

useMicroMotion 훅 사용

import { useMicroMotion } from '@hua-labs/hua-ux';

function InteractiveCard() {
  const { handlers, style, className } = useMicroMotion({
    preset: 'springy',
    scale: 0.02,      // 2% scale on hover
    translateY: -2,   // Move up 2px on hover
  });

  return (
    <div {...handlers} style={style} className={className}>
      Hover me!
    </div>
  );
}

CSS 클래스만 사용

import { getMicroMotionClasses } from '@hua-labs/hua-ux';

// Get Tailwind-compatible class string
const classes = getMicroMotionClasses('springy', {
  enableHover: true,
  enableActive: true,
  enableFocus: false,
});

// Returns: "transform-gpu transition-transform duration-200 hover:scale-[1.02] hover:-translate-y-0.5 active:scale-[0.98] active:translate-y-0"

컴포넌트 기본값

HUA UI 컴포넌트는 미리 구성된 MicroMotion 설정과 함께 제공됩니다:

Button

springy | 0.8%

Card

soft | 0.5%

MenuItem

subtle | 1px

Modal

springy | 1%

Dropdown

soft | -2px

Tooltip

snappy | 2%

API 레퍼런스

useMotion 옵션

옵션	타입	기본값	설명
type	string	'fadeIn'	애니메이션 타입
duration	number	400	밀리초 단위 지속 시간
delay	number	0	애니메이션 시작 전 지연 시간
autoStart	boolean	true	마운트 시 애니메이션 시작
threshold	number	0.1	Intersection Observer 임계값

반환 값

const {
  ref,     // Ref to attach to the element
  style,   // CSS styles to apply
  play,    // Function to play animation
  pause,   // Function to pause animation
  reset,   // Function to reset animation
} = useMotion(options);

예제

순차적 리스트 애니메이션

function AnimatedList({ items }) {
  return (
    <ul>
      {items.map((item, index) => {
        const motion = useMotion({
          type: 'slideUp',
          duration: 400,
          delay: index * 100, // Stagger by 100ms
        });

        return (
          <li key={item.id} ref={motion.ref} style={motion.style}>
            {item.title}
          </li>
        );
      })}
    </ul>
  );
}

스크롤 트리거 애니메이션

function ScrollRevealSection() {
  const motion = useMotion({
    type: 'fadeIn',
    duration: 800,
    threshold: 0.2, // Trigger when 20% visible
  });

  return (
    <section ref={motion.ref} style={motion.style}>
      <h2>This section fades in on scroll</h2>
    </section>
  );
}

수동 제어

function ManualAnimation() {
  const motion = useMotion({
    type: 'scaleIn',
    duration: 300,
    autoStart: false,
  });

  return (
    <div>
      <div ref={motion.ref} style={motion.style}>
        Animated content
      </div>
      <button onClick={motion.play}>Play</button>
      <button onClick={motion.reset}>Reset</button>
    </div>
  );
}

성능 팁

useMotion은 GPU 가속 애니메이션을 위해 CSS transform과 opacity를 사용합니다
애니메이션은 사용자의 prefers-reduced-motion 설정을 존중합니다
리스트의 경우 긴 대기 시간을 피하기 위해 순차 지연 시간을 제한하는 것을 고려하세요
앱에서는 더 빠르고 최소한의 애니메이션을 위해 'product' 프리셋을 사용하세요

컴포넌트 다국어 지원