@design-llm/motion 1.0.0 → 1.0.2
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.
- package/README.md +85 -12
- package/dist/index.cjs +4510 -4
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +18 -0
- package/dist/index.js +19032 -901
- package/dist/index.js.map +1 -1
- package/dist/motion.css +1 -0
- package/package.json +23 -6
package/README.md
CHANGED
|
@@ -12,9 +12,17 @@
|
|
|
12
12
|
|
|
13
13
|
## 🏗️ 顶层架构
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
- `/src/components`:
|
|
17
|
-
- `/src`:
|
|
15
|
+
### 源码目录（用于 npm 包发布）
|
|
16
|
+
- `/src/components`: **纯动效组件库**（只包含可复用的动效组件，如 BlurText、CircularText、ShinyText 等）
|
|
17
|
+
- `/src/lib`: 工具库（通用工具函数和组件导出入口）
|
|
18
|
+
- `/src/assets`: 静态资源（数据文件、图片等）
|
|
19
|
+
|
|
20
|
+
### 展示目录（仅用于本地开发和演示，不发布到 npm）
|
|
21
|
+
- `/examples/showcase`: 展示框架（dev 开发模式 + public 对外展示模式）
|
|
22
|
+
- `/examples/pages`: 页面级组件（如首页）
|
|
23
|
+
- `/examples/components`: **网站展示组件**（如 homepage 组件、Navigation、SectionProvider 等，仅用于构建展示网站）
|
|
24
|
+
- `/examples/main-*.jsx`: 各种模式的入口文件
|
|
25
|
+
- `/examples/*.html`: HTML 入口文件
|
|
18
26
|
|
|
19
27
|
## 🛠️ 技术栈
|
|
20
28
|
|
|
@@ -26,6 +34,13 @@
|
|
|
26
34
|
|
|
27
35
|
## 📦 核心特性
|
|
28
36
|
|
|
37
|
+
### npm 包特性（`/src/components`）
|
|
38
|
+
- **纯动效组件**: 所有组件都是独立的、可复用的动效组件
|
|
39
|
+
- **无依赖展示代码**: npm 包中不包含任何网站展示相关的组件
|
|
40
|
+
- **TypeScript 支持**: 提供完整的类型定义
|
|
41
|
+
- **Tree-shaking 友好**: 支持按需导入
|
|
42
|
+
|
|
43
|
+
### 展示平台特性（`/examples`）
|
|
29
44
|
1. **Component Preview Card**: 卡片容器展示动效组件实时预览
|
|
30
45
|
2. **Code View**: 深色主题代码展示，支持复制
|
|
31
46
|
3. **Responsive Grid**: 响应式网格布局展示所有组件
|
|
@@ -33,20 +48,78 @@
|
|
|
33
48
|
|
|
34
49
|
## 🚀 开发命令
|
|
35
50
|
|
|
36
|
-
|
|
37
|
-
- `npm run
|
|
38
|
-
- `npm run
|
|
51
|
+
### 展示模式（用于本地开发和演示）
|
|
52
|
+
- `npm run dev` - 启动开发模式展示（端口 3000）
|
|
53
|
+
- `npm run dev:public` - 启动对外展示模式（端口 5174）
|
|
54
|
+
- `npm run dev:homepage` - 启动首页展示模式（端口 3001）
|
|
55
|
+
- `npm run build` - 构建开发模式
|
|
56
|
+
- `npm run build:public` - 构建对外展示模式
|
|
57
|
+
- `npm run build:homepage` - 构建首页展示模式
|
|
58
|
+
|
|
59
|
+
### 库构建（用于 npm 包发布）
|
|
60
|
+
- `npm run build:lib` - 构建 npm 包（输出到 `dist/` 目录）
|
|
39
61
|
- `npm run lint` - 代码检查
|
|
40
62
|
|
|
63
|
+
### 发布流程
|
|
64
|
+
1. 开发组件在 `/src/components/` 目录
|
|
65
|
+
2. 在 `/src/lib/index.ts` 中导出新组件
|
|
66
|
+
3. 运行 `npm run build:lib` 构建库
|
|
67
|
+
4. 运行 `npm publish` 发布到 npm（会自动执行 `prepublishOnly` 钩子）
|
|
68
|
+
|
|
41
69
|
## 📂 目录结构
|
|
42
70
|
|
|
43
71
|
```
|
|
44
|
-
|
|
45
|
-
├──
|
|
46
|
-
├── components/
|
|
47
|
-
├──
|
|
48
|
-
├──
|
|
49
|
-
|
|
72
|
+
项目根目录
|
|
73
|
+
├── src/ # 📦 源码目录（用于 npm 包发布）
|
|
74
|
+
│ ├── components/ # 纯动效组件库（只包含可复用的动效组件）
|
|
75
|
+
│ │ ├── BlurText.jsx # 模糊文字动画
|
|
76
|
+
│ │ ├── CircularText.jsx # 圆形旋转文字
|
|
77
|
+
│ │ ├── ScrambledText.jsx # 文字打乱效果
|
|
78
|
+
│ │ ├── FlowingDashedBox.jsx # 流动虚线边框
|
|
79
|
+
│ │ ├── FallingPattern.jsx # 下落粒子背景
|
|
80
|
+
│ │ ├── ShinyText.jsx # 闪光文字
|
|
81
|
+
│ │ ├── BlackHole.jsx # 黑洞可视化
|
|
82
|
+
│ │ ├── MetalButton.jsx # 金属按钮
|
|
83
|
+
│ │ ├── LiquidMetalButton.jsx # 液态金属按钮
|
|
84
|
+
│ │ ├── PixelCard.jsx # 像素动画卡片
|
|
85
|
+
│ │ ├── ElectricBorder.jsx # 电光边框
|
|
86
|
+
│ │ ├── Gallery3D.jsx # 3D画廊
|
|
87
|
+
│ │ ├── Tunnel3D.jsx # 3D隧道
|
|
88
|
+
│ │ └── ScrollCards3D.jsx # 3D滚动卡片
|
|
89
|
+
│ ├── lib/ # 工具库（导出入口）
|
|
90
|
+
│ │ ├── index.ts # 组件导出文件
|
|
91
|
+
│ │ └── remToPx.js # 工具函数
|
|
92
|
+
│ ├── assets/ # 静态资源
|
|
93
|
+
│ └── index.css # 全局样式（Tailwind）
|
|
94
|
+
│
|
|
95
|
+
├── examples/ # 🎨 展示目录（仅用于本地开发，不发布到 npm）
|
|
96
|
+
│ ├── showcase/ # 展示框架
|
|
97
|
+
│ │ ├── dev/ # 开发模式（完整展示）
|
|
98
|
+
│ │ │ └── components/ # 展示框架专用组件（Navigation, SectionProvider 等）
|
|
99
|
+
│ │ └── public/ # 对外模式（只显示使用代码）
|
|
100
|
+
│ ├── components/ # 网站展示组件（不发布到 npm）
|
|
101
|
+
│ │ ├── homepage/ # 首页专用组件
|
|
102
|
+
│ │ │ ├── AnimatedBackground.jsx
|
|
103
|
+
│ │ │ ├── HeroSection.jsx
|
|
104
|
+
│ │ │ ├── Timeline.jsx
|
|
105
|
+
│ │ │ └── ThemeToggle.jsx
|
|
106
|
+
│ │ ├── Navigation.jsx # 导航组件（展示网站用）
|
|
107
|
+
│ │ ├── SectionProvider.jsx # 滚动锚点管理（展示网站用）
|
|
108
|
+
│ │ └── Section.jsx # 锚点标记（展示网站用）
|
|
109
|
+
│ ├── pages/ # 页面级组件
|
|
110
|
+
│ │ └── HomePage.jsx # 首页组合组件
|
|
111
|
+
│ ├── main-dev.jsx # 开发模式入口
|
|
112
|
+
│ ├── main-homepage.jsx # 首页模式入口
|
|
113
|
+
│ ├── main-public.jsx # 对外模式入口
|
|
114
|
+
│ ├── index-dev.html # 开发模式 HTML
|
|
115
|
+
│ ├── index.html # 对外模式 HTML
|
|
116
|
+
│ ├── index-homepage.html # 首页模式 HTML
|
|
117
|
+
│ └── index.css # 展示用样式
|
|
118
|
+
│
|
|
119
|
+
├── dist/ # 📦 npm 包构建输出（通过 build:lib 生成）
|
|
120
|
+
├── dist-dev/ # 开发模式构建输出
|
|
121
|
+
├── dist-public/ # 对外模式构建输出
|
|
122
|
+
└── dist-homepage/ # 首页模式构建输出
|
|
50
123
|
```
|
|
51
124
|
|
|
52
125
|
## ⚠️ 触发器
|