企业官网建设流程全解析

Amicro CLI终极使用指南：一条npx命令把150+动效组件直接装进你的项目

【免费下载链接】Amicro--Micro-transitions-项目地址: https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-

Amicro（npm 包名@subhanhq/amicro）是一个专为 React 打造的微交互动效组件库，基于motion/react驱动，内置150+ 个开箱即用的动效组件：加载动画、入场转场、卡片交互、3D 轮播、磁性按钮、文字揭示等。最亮眼的地方在于它的Amicro CLI——一条npx命令就能把组件源码直接"复制"进你的项目代码库，无需引入庞大依赖，真正做到零运行时开销。

为什么选择 Amicro CLI：Copy-to-Code 模式

与传统动效库（安装整个 npm 包、按路径导入）不同，Amicro 采用的是Copy-to-Code（复制到代码）模式，这也是它最核心的设计理念：

• 📦零运行时开销：CLI 直接把 TSX 组件源码写进你的项目，用几个组件，bundle 里就只有几个组件的代码；
• 🛠️完全可定制：源码就在你的工作区里，动画参数、颜色、Tailwind 类名随便改，拥有 100% 所有权；
• 🧩RSC 兼容：需要交互的动效组件会自动加上"use client"指令，Next.js 服务端渲染框架也能直接用；
• 🌓双主题支持：所有组件同时适配深色 / 浅色 UI 风格。

组件清单与安装映射关系定义在 registry/registry.json 中，每个条目都标注了组件名、描述、依赖和目标写入路径。

环境要求与快速安装步骤

环境要求清单

开始之前，确认你的项目满足以下条件：

第一步：用 init 命令初始化配置

在你的 React / Next.js / Vite 项目根目录执行：

npx @subhanhq/amicro@latest init

这条命令会自动检测你的工作区配置，并安装所需的 peer 依赖（motion/react和lucide-react），不需要任何手动配置。

第二步：用 add 命令添加动效组件

初始化完成后，即可按需添加任意组件，源码会被写入默认的配置文件夹（src/components/ui/）：

# 添加按钮类动效组件 npx @subhanhq/amicro@latest add download-button # 添加卡片交互组件 npx @subhanhq/amicro@latest add card-arc-5

整个过程只需两条命令，官方 FAQ 也明确承诺："Amicro 不需要复杂配置，即插即用。"（参考 src/components/CliPage.tsx）

150+ 动效组件全家福：分类速览

仓库中的组件全部集中在registry/目录，按类别整理如下：

卡片组件的完整元数据（含每个组件对应的 CLI 命令）可查阅 src/data/cards.ts。

新手必装推荐：6 个高频动效组件

不知道从哪下手？下面 6 个是新手项目里出效果最快的选择：

💡 小技巧：所有 Loader 组件的注册清单由脚本自动生成，数据文件见 src/data/loaders.ts，可快速检索 134 种加载动画的命名。

shadcn/ui Registry 集成：进阶安装方式

如果你的项目已经在用 shadcn CLI，还可以把 Amicro 作为命名空间 Registry接入——在项目的components.json中添加@amicro映射后，即可按名字直接安装：

# 入场转场 npx shadcn add @amicro/fade-up # 悬停 & 文字组件 npx shadcn add @amicro/tilt-card npx shadcn add @amicro/text-reveal # Hooks 与弹簧预设 npx shadcn add @amicro/use-scroll-progress npx shadcn add @amicro/presets

Registry 条目会按target字段把文件放到@components/amicro/目录下，与 shadcn 的组件体系无缝共存。

常见问题 FAQ

Q1：会影响打包体积吗？不会。Amicro CLI 下载的是原始 TSX 源码，只写你实际添加的组件。只装一个组件，bundle 里就只有它，没有库封装层的额外开销。

Q2：安装之后能二次修改吗？完全可以。源码直接落在你的工作区里，你可以随意调整 framer-motion 配置、颜色和 Tailwind 类名。

Q3：支持 React Server Components 吗？支持。CLI 会为需要交互的动效组件自动添加"use client"指令，兼容服务端渲染框架。

项目目录结构速查

想深入阅读源码，从这几个入口开始最高效：

• 组件注册总表：registry/registry.json
• 全部 UI 组件源码：registry/ui/
• 官方 README 与 CLI 用法：README.md
• 版本更新记录：CHANGELOG.md
• 在线预览应用入口：src/App.tsx

开始动手 🚀

总结 Amicro CLI 的使用流程其实只有三步：

1. npx @subhanhq/amicro@latest init—— 初始化项目配置；
2. npx @subhanhq/amicro@latest add <组件名>—— 添加想要的动效组件；
3. 在页面中导入使用，或直接改源码定制。

一条npx命令、零复杂配置、150+ 现成动效——如果你的 React 项目还缺一点"高级感"的页面过渡和微交互，Amicro CLI 值得现在就试一次。

【免费下载链接】Amicro--Micro-transitions-项目地址: https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-