모션 프로필

import {
  MotionProfileProvider,
  useMotionProfile,
  resolveProfile,
  mergeProfileOverrides,
  neutral,
  hua,
} from '@hua-labs/motion-core'

interface MotionProfile {
  name: string
  base: MotionProfileBase
  entrance: MotionProfileEntrance
  stagger: MotionProfileStagger
  interaction: MotionProfileInteraction
  spring: MotionProfileSpring
  reducedMotion: ReducedMotionStrategy
}

interface MotionProfileBase {
  duration: number       // 기본 지속 시간 (ms)
  easing: string         // 기본 CSS 이징
  threshold: number      // IntersectionObserver 임계값
  triggerOnce: boolean   // 한 번만 트리거
}

interface MotionProfileEntrance {
  slide: { distance: number; easing: string }
  fade: { initialOpacity: number }
  scale: { from: number }
  bounce: { intensity: number; easing: string }
}

interface MotionProfileStagger {
  perItem: number    // 아이템 간 딜레이 (ms)
  baseDelay: number  // 첫 아이템 전 딜레이 (ms)
}

interface MotionProfileInteraction {
  hover: {
    scale: number
    y: number
    duration: number
    easing: string
  }
}

interface MotionProfileSpring {
  mass: number
  stiffness: number
  damping: number
  restDelta: number
  restSpeed: number
}

type ReducedMotionStrategy = 'skip' | 'fade-only' | 'minimal'

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

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

function MotionProfileProvider(props: MotionProfileProviderProps): JSX.Element

interface MotionProfileProviderProps {
  profile?: BuiltInProfileName | MotionProfile  // 기본값: 'neutral'
  overrides?: DeepPartial<MotionProfile>         // 프로필 부분 오버라이드
  children: React.ReactNode
}

type BuiltInProfileName = 'neutral' | 'hua'

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

function App() {
  return (
    <MotionProfileProvider profile="hua">
      <MyPage />
    </MotionProfileProvider>
  )
}

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

function App() {
  return (
    <MotionProfileProvider
      profile="neutral"
      overrides={{
        base: { duration: 400, triggerOnce: false },
        entrance: { slide: { distance: 30 } }
      }}
    >
      <MyPage />
    </MotionProfileProvider>
  )
}

import { MotionProfileProvider, neutral } from '@hua-labs/motion-core'

const myProfile = {
  ...neutral,
  name: 'my-brand',
  base: { ...neutral.base, duration: 500 },
  interaction: {
    hover: { scale: 1.08, y: -6, duration: 150, easing: 'ease-out' }
  }
}

function App() {
  return (
    <MotionProfileProvider profile={myProfile}>
      <MyPage />
    </MotionProfileProvider>
  )
}

function useMotionProfile(): MotionProfile

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

function CustomMotion() {
  const profile = useMotionProfile()

  const style = {
    transition: `all ${profile.base.duration}ms ${profile.base.easing}`
  }

  return <div style={style}>커스텀 모션</div>
}

function resolveProfile(
  profile: BuiltInProfileName | MotionProfile
): MotionProfile

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

const profile = resolveProfile('hua')
const sameProfile = resolveProfile(customProfileObject)

function mergeProfileOverrides(
  base: MotionProfile,
  overrides: DeepPartial<MotionProfile>
): MotionProfile

type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P]
}

import { mergeProfileOverrides, neutral } from '@hua-labs/motion-core'

const customProfile = mergeProfileOverrides(neutral, {
  base: { duration: 300 },
  spring: { stiffness: 200 }
})