motion-core 개요

stable

제로 디펜던시 모션 엔진 — Web + React Native

@hua-labs/motion-corev2.0.0

Import

import { useFadeIn, useSlideUp, useScrollReveal } from '@hua-labs/motion-core'

개요

@hua-labs/motion-core는 외부 의존성 없이 동작하는 고성능 모션 엔진이다. 순수 JavaScript CSS transition 기반으로 Web과 React Native 양쪽에서 사용할 수 있다.

3단계 추상화

훅 API는 세 단계로 구성되어 사용 목적에 따라 선택한다.

단계	훅	설명
1단계	`useSimplePageMotion`	페이지 타입 프리셋으로 빠른 설정
2단계	`usePageMotions`	페이지 레벨 복수 요소 제어
3단계	`useSmartMotion` / 개별 훅	요소 단위 세밀한 제어

주요 개념

Engine

MotionEngine과 TransitionEffects는 패키지 내부 저수준 엔진이다. 일반적으로 직접 사용하지 않고 훅을 통해 간접적으로 활용된다.

Hooks

입장 애니메이션(entrance), 인터랙션(interaction), 스크롤(scroll), 통합(unified), 유틸리티(utility) 카테고리로 분류된다.

Presets

MOTION_PRESETS와 PAGE_MOTIONS는 자주 쓰는 애니메이션 설정을 미리 정의한 프리셋이다. hero, title, button, card, text, image 6가지 요소 타입을 지원한다.

Profiles

MotionProfile은 모든 훅의 기본값(duration, easing, threshold 등)을 한 곳에서 관리하는 테마 개념이다. 내장 프로필: neutral, hua.

Easing

EasingFunction 타입 기반의 이징 함수 컬렉션. CSS easing 문자열과 JavaScript 함수 모두 지원한다.

플랫폼 지원

플랫폼	Import 경로	비고
Web (React)	`@hua-labs/motion-core`	CSS transition 기반
React Native	`@hua-labs/motion-core/native`	Animated API 기반

기본 사용 예시

import { useFadeIn } from '@hua-labs/motion-core'

function Hero() {
  const { ref, style } = useFadeIn({ delay: 200 })

  return (
    <div ref={ref} style={style}>
      환영합니다
    </div>
  )
}

Notes

Provider 없이도 neutral 프로필 기본값으로 동작한다.
MotionProfileProvider로 감싸면 하위 모든 훅에 프로필이 자동 적용된다.
prefers-reduced-motion 접근성 설정은 useReducedMotion 훅으로 감지한다.