@hua-labs/motion-core 2.1.0-alpha.8 → 2.1.0-alpha.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +45 -223
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,270 +1,92 @@
1
1
  # @hua-labs/motion-core
2
2
 
3
- Production-ready React animation hooks. Zero dependencies, SSR-ready.
4
- 프로덕션 레디 React 애니메이션 훅. 의존성 없음, SSR 지원
3
+ Production-ready React animation hooks — zero dependencies, SSR-ready.
4
+ 프로덕션 레디 React 애니메이션 훅 — 의존성 없음, SSR 지원.
5
5
 
6
6
  [![npm version](https://img.shields.io/npm/v/@hua-labs/motion-core.svg)](https://www.npmjs.com/package/@hua-labs/motion-core)
7
7
  [![npm downloads](https://img.shields.io/npm/dw/@hua-labs/motion-core.svg)](https://www.npmjs.com/package/@hua-labs/motion-core)
8
8
  [![license](https://img.shields.io/npm/l/@hua-labs/motion-core.svg)](https://github.com/HUA-Labs/HUA-Labs-public/blob/main/LICENSE)
9
- [![React](https://img.shields.io/badge/React-19-blue)](https://reactjs.org/)
10
9
  [![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue)](https://www.typescriptlang.org/)
10
+ [![React](https://img.shields.io/badge/React-19-blue)](https://reactjs.org/)
11
11
 
12
- > **⚠️ Alpha Release**: This package is currently in alpha. APIs may change before the stable release.
13
-
14
- ---
15
-
16
- [English](#english) | [한국어](#korean)
12
+ > **Alpha**: APIs may change before stable release. | **알파**: 안정 릴리스 전 API가 변경될 수 있습니다.
17
13
 
18
- ## English
14
+ ## Overview | 개요
19
15
 
20
- ### Overview
16
+ A collection of 25+ React animation hooks built on a ref-based engine. Direct DOM manipulation for consistent performance with zero external dependencies. All hooks are TypeScript-native and SSR-compatible.
21
17
 
22
- A collection of React animation hooks built on a ref-based engine. Provides smooth animations with zero external dependencies. All hooks are TypeScript-native and SSR-compatible.
18
+ ref 기반 엔진으로 구축된 25개 이상의 React 애니메이션 훅 컬렉션입니다. 외부 의존성 없이 직접 DOM 조작으로 일관된 성능을 제공합니다. 모든 훅은 TypeScript 네이티브이며 SSR 호환됩니다.
23
19
 
24
- ### Features
20
+ ## Features
25
21
 
26
- - **28+ Animation Hooks** - Fade, slide, scale, scroll, interaction, and sensor hooks
27
- - **Performance Optimized** - Direct ref manipulation for consistent performance
28
- - **Zero Dependencies** - Pure JavaScript motion engine
29
- - **TypeScript Native** - Full type safety with inferred types
30
- - **SSR Compatible** - Works with Next.js, Remix, and SSR frameworks
31
- - **Tested** - Test coverage with 517 test cases
22
+ - **25+ animation hooks** — Fade, slide, scale, scroll, interactions, gestures
23
+ - **Zero dependencies** — Pure JavaScript motion engine
24
+ - **Ref-based** — Direct DOM manipulation for consistent performance
25
+ - **SSR compatible** — Works with Next.js, Remix, and SSR frameworks
26
+ - **Tested** — 517 test cases
32
27
 
33
- ### Installation
28
+ ## Installation | 설치
34
29
 
35
30
  ```bash
36
- npm install @hua-labs/motion-core
37
- # or
38
- yarn add @hua-labs/motion-core
39
- # or
40
31
  pnpm add @hua-labs/motion-core
41
32
  ```
42
33
 
43
- ### Quick Start
44
-
45
- ```tsx
46
- import React from 'react';
47
- import { useFadeIn, useSlideUp } from '@hua-labs/motion-core';
48
-
49
- function MyComponent() {
50
- const fadeIn = useFadeIn({ duration: 800 });
51
- const slideUp = useSlideUp({ delay: 200 });
52
-
53
- return (
54
- <div>
55
- <h1 ref={fadeIn.ref} style={fadeIn.style}>
56
- Welcome to HUA Motion Core
57
- </h1>
58
- <p ref={slideUp.ref} style={slideUp.style}>
59
- Simple animations
60
- </p>
61
- </div>
62
- );
63
- }
64
- ```
65
-
66
- ### Available Hooks
67
-
68
- #### Basic Motion Hooks
69
- - `useFadeIn` - Fade in animation
70
- - `useSlideUp` - Slide up animation
71
- - `useSlideLeft` - Slide left animation
72
- - `useSlideRight` - Slide right animation
73
- - `useScaleIn` - Scale in animation
74
- - `useBounceIn` - Bounce in animation
75
- - `usePulse` - Pulse animation
76
- - `useSpringMotion` - Spring physics animations
77
- - `useGradient` - Gradient animations
78
-
79
- #### Interaction Hooks
80
- - `useHoverMotion` - Hover-triggered animations
81
- - `useClickToggle` - Click-triggered animations
82
- - `useFocusToggle` - Focus-triggered animations
83
- - `useToggleMotion` - Toggle animations
84
-
85
- #### Scroll Hooks
86
- - `useScrollReveal` - Scroll-triggered reveal animations
87
- - `useScrollProgress` - Scroll progress tracking
34
+ Peer dependencies: `react >= 19.0.0`, `react-dom >= 19.0.0`
88
35
 
89
- #### Sensor / Observer Hooks
90
- - `useInView` - Intersection Observer wrapper
91
- - `useMouse` - Mouse position tracking
92
- - `useReducedMotion` - Reduced motion preference detection
93
- - `useWindowSize` - Window size tracking
94
-
95
- #### Utility Hooks
96
- - `useMotionState` - Motion state management
97
- - `useRepeat` - Repeating animations
98
- - `useSmartMotion` - Smart motion with auto-detection
99
- - `useUnifiedMotion` - Unified motion interface
100
- - `useSimplePageMotion` - Simple page transitions
101
- - `usePageMotions` - Multiple page motions
102
- - `useGesture` - Gesture detection
103
- - `useGestureMotion` - Gesture-based animations
104
-
105
- ### API Overview
106
-
107
- All hooks return a consistent interface:
36
+ ## Quick Start | 빠른 시작
108
37
 
109
38
  ```tsx
110
- interface BaseMotionReturn<T = HTMLElement> {
111
- ref: RefObject<T>;
112
- style: CSSProperties;
113
- isVisible: boolean;
114
- isAnimating: boolean;
115
- progress: number;
116
- start: () => void;
117
- stop: () => void;
118
- reset: () => void;
119
- pause: () => void;
120
- resume: () => void;
121
- }
122
- ```
123
-
124
- ### Documentation
125
-
126
- - [Detailed Guide](./DETAILED_GUIDE.md) - Complete API reference, examples, and advanced usage
127
- - [TypeScript Definitions](./dist/index.d.ts) - Type definitions
128
-
129
- ### Related Packages
130
-
131
- - [`@hua-labs/hua-ux`](../hua-ux/README.md) - Integrated framework (UI + Motion + i18n)
132
-
133
- ### Requirements
134
-
135
- - React >= 19.0.0
136
- - React DOM >= 19.0.0
137
-
138
- ## Korean
139
-
140
- ### 개요
141
-
142
- ref 기반 엔진으로 구축된 React 애니메이션 훅 컬렉션입니다. 외부 의존성 없이 부드러운 애니메이션을 제공합니다. 모든 훅은 TypeScript 네이티브이며 SSR과 호환됩니다.
143
-
144
- ### 주요 기능
145
-
146
- - **28개 이상의 애니메이션 훅** - 페이드, 슬라이드, 스케일, 스크롤, 상호작용 및 센서 훅
147
- - **성능 최적화** - 일관된 성능을 위한 직접 ref 조작
148
- - **의존성 없음** - 순수 JavaScript 모션 엔진
149
- - **TypeScript 네이티브** - 타입 추론을 통한 완전한 타입 안전성
150
- - **SSR 호환** - Next.js, Remix 및 SSR 프레임워크와 작동
151
- - **테스트 완료** - 517개 테스트 케이스로 테스트 커버리지
152
-
153
- ### 설치
154
-
155
- ```bash
156
- npm install @hua-labs/motion-core
157
- # 또는
158
- yarn add @hua-labs/motion-core
159
- # 또는
160
- pnpm add @hua-labs/motion-core
161
- ```
162
-
163
- ### 빠른 시작
164
-
165
- ```tsx
166
- import React from 'react';
167
39
  import { useFadeIn, useSlideUp } from '@hua-labs/motion-core';
168
40
 
169
- function MyComponent() {
41
+ function Hero() {
170
42
  const fadeIn = useFadeIn({ duration: 800 });
171
43
  const slideUp = useSlideUp({ delay: 200 });
172
44
 
173
45
  return (
174
46
  <div>
175
- <h1 ref={fadeIn.ref} style={fadeIn.style}>
176
- HUA Motion Core에 오신 것을 환영합니다
177
- </h1>
178
- <p ref={slideUp.ref} style={slideUp.style}>
179
- 간단한 애니메이션
180
- </p>
47
+ <h1 ref={fadeIn.ref} style={fadeIn.style}>Welcome</h1>
48
+ <p ref={slideUp.ref} style={slideUp.style}>Animated content</p>
181
49
  </div>
182
50
  );
183
51
  }
184
52
  ```
185
53
 
186
- ### 사용 가능한 훅
187
-
188
- #### 기본 모션 훅
189
- - `useFadeIn` - 페이드 인 애니메이션
190
- - `useSlideUp` - 슬라이드 업 애니메이션
191
- - `useSlideDown` - 슬라이드 다운 애니메이션
192
- - `useSlideLeft` - 슬라이드 왼쪽 애니메이션
193
- - `useSlideRight` - 슬라이드 오른쪽 애니메이션
194
- - `useScaleIn` - 스케일 인 애니메이션
195
- - `useBounceIn` - 바운스 인 애니메이션
196
- - `usePulse` - 펄스 애니메이션
197
- - `useSpringMotion` - 스프링 물리 애니메이션
198
- - `useGradient` - 그라디언트 애니메이션
54
+ ## API Overview | API 개요
199
55
 
200
- #### 스태거 및 리스트 훅
201
- - `useStaggerMotion` - 여러 항목에 대한 스태거 애니메이션
202
- - `useCardList` - 카드 리스트 애니메이션
203
- - `useSkeleton` - 스켈레톤 로딩 애니메이션
56
+ All hooks return a consistent `BaseMotionReturn` interface:
204
57
 
205
- #### 상호작용 훅
206
- - `useHoverMotion` - 호버 트리거 애니메이션
207
- - `useClickToggle` - 클릭 트리거 애니메이션
208
- - `useFocusToggle` - 포커스 트리거 애니메이션
209
- - `useToggleMotion` - 토글 애니메이션
58
+ | Property | Type | Description |
59
+ |----------|------|-------------|
60
+ | `ref` | `RefObject<T>` | Attach to target element |
61
+ | `style` | `CSSProperties` | Apply to element |
62
+ | `isVisible` | `boolean` | Visibility state |
63
+ | `isAnimating` | `boolean` | Animation in progress |
64
+ | `start/stop/reset/pause/resume` | `() => void` | Playback controls |
210
65
 
211
- #### 스크롤 훅
212
- - `useScrollReveal` - 스크롤 트리거 리빌 애니메이션
213
- - `useScrollProgress` - 스크롤 진행률 추적
66
+ **Available hooks by category:**
214
67
 
215
- #### 센서 / 옵저버 훅
216
- - `useInView` - Intersection Observer 래퍼
217
- - `useMouse` - 마우스 위치 추적
218
- - `useReducedMotion` - 모션 감소 설정 감지
219
- - `useWindowSize` - 윈도우 크기 추적
68
+ | Category | Hooks |
69
+ |----------|-------|
70
+ | Basic | `useFadeIn`, `useSlideUp`, `useSlideLeft`, `useSlideRight`, `useScaleIn`, `useBounceIn`, `usePulse`, `useSpringMotion`, `useGradient` |
71
+ | Interaction | `useHoverMotion`, `useClickToggle`, `useFocusToggle`, `useToggleMotion` |
72
+ | Scroll | `useScrollReveal`, `useScrollProgress` |
73
+ | List | `useStaggerMotion`, `useCardList`, `useSkeleton` |
74
+ | Utility | `useMotionState`, `useRepeat`, `useSmartMotion`, `useUnifiedMotion`, `useSimplePageMotion`, `usePageMotions`, `useGesture`, `useGestureMotion` |
220
75
 
221
- #### 유틸리티 훅
222
- - `useMotionState` - 모션 상태 관리
223
- - `useRepeat` - 반복 애니메이션
224
- - `useSmartMotion` - 자동 감지 스마트 모션
225
- - `useUnifiedMotion` - 통합 모션 인터페이스
226
- - `useSimplePageMotion` - 간단한 페이지 전환
227
- - `usePageMotions` - 여러 페이지 모션
228
- - `useGesture` - 제스처 감지
229
- - `useGestureMotion` - 제스처 기반 애니메이션
76
+ ## Documentation | 문서
230
77
 
231
- ### API 개요
78
+ - [Detailed Guide](./DETAILED_GUIDE.md)
79
+ - [📚 Documentation Site | 문서 사이트](https://docs.hua-labs.com)
232
80
 
233
- 모든 훅은 일관된 인터페이스를 반환합니다:
81
+ ## Related Packages | 관련 패키지
234
82
 
235
- ```tsx
236
- interface BaseMotionReturn<T = HTMLElement> {
237
- ref: RefObject<T>;
238
- style: CSSProperties;
239
- isVisible: boolean;
240
- isAnimating: boolean;
241
- progress: number;
242
- start: () => void;
243
- stop: () => void;
244
- reset: () => void;
245
- pause: () => void;
246
- resume: () => void;
247
- }
248
- ```
83
+ - [`@hua-labs/pro`](https://www.npmjs.com/package/@hua-labs/pro) — Advanced motion hooks (orchestration, auto-animations)
84
+ - [`@hua-labs/hua-ux`](https://www.npmjs.com/package/@hua-labs/hua-ux) — UX framework (includes motion)
249
85
 
250
- ### 문서
86
+ ## Requirements | 요구사항
251
87
 
252
- - [상세 가이드](./DETAILED_GUIDE.md) - 완전한 API 참조, 예시 및 고급 사용법
253
- - [TypeScript 정의](./dist/index.d.ts) - 타입 정의
254
-
255
- ### 관련 패키지
256
-
257
- - [`@hua-labs/hua-ux`](../hua-ux/README.md) - 통합 프레임워크 (UI + Motion + i18n)
258
-
259
- ### 요구사항
260
-
261
- - React >= 19.0.0
262
- - React DOM >= 19.0.0
88
+ React >= 19.0.0 · React DOM >= 19.0.0 · TypeScript >= 5.9
263
89
 
264
90
  ## License
265
91
 
266
- MIT © HUA Labs
267
-
268
- ## Repository
269
-
270
- https://github.com/HUA-Labs/HUA-Labs-public
92
+ MIT — [HUA Labs](https://github.com/HUA-Labs/HUA-Labs-public)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hua-labs/motion-core",
3
- "version": "2.1.0-alpha.8",
3
+ "version": "2.1.0-alpha.9",
4
4
  "description": "HUA Motion Core - Essential animation hooks for React developers",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",