Amicro CLI终极使用指南一条npx命令把150动效组件直接装进你的项目【免费下载链接】Amicro--Micro-transitions-项目地址: https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-Amicronpm 包名subhanhq/amicro是一个专为 React 打造的微交互动效组件库基于motion/react驱动内置150 个开箱即用的动效组件加载动画、入场转场、卡片交互、3D 轮播、磁性按钮、文字揭示等。最亮眼的地方在于它的Amicro CLI——一条npx命令就能把组件源码直接复制进你的项目代码库无需引入庞大依赖真正做到零运行时开销。为什么选择 Amicro CLICopy-to-Code 模式与传统动效库安装整个 npm 包、按路径导入不同Amicro 采用的是Copy-to-Code复制到代码模式这也是它最核心的设计理念零运行时开销CLI 直接把 TSX 组件源码写进你的项目用几个组件bundle 里就只有几个组件的代码️完全可定制源码就在你的工作区里动画参数、颜色、Tailwind 类名随便改拥有 100% 所有权RSC 兼容需要交互的动效组件会自动加上use client指令Next.js 服务端渲染框架也能直接用双主题支持所有组件同时适配深色 / 浅色 UI 风格。组件清单与安装映射关系定义在 registry/registry.json 中每个条目都标注了组件名、描述、依赖和目标写入路径。环境要求与快速安装步骤环境要求清单开始之前确认你的项目满足以下条件依赖项版本要求Node.jsv18.0.0 及以上React^18.0.0 或 ^19.0.0Tailwind CSSv3 或 v4动效引擎motion或framer-motion第一步用 init 命令初始化配置在你的 React / Next.js / Vite 项目根目录执行npx subhanhq/amicrolatest init这条命令会自动检测你的工作区配置并安装所需的 peer 依赖motion/react和lucide-react不需要任何手动配置。第二步用 add 命令添加动效组件初始化完成后即可按需添加任意组件源码会被写入默认的配置文件夹src/components/ui/# 添加按钮类动效组件 npx subhanhq/amicrolatest add download-button # 添加卡片交互组件 npx subhanhq/amicrolatest add card-arc-5整个过程只需两条命令官方 FAQ 也明确承诺Amicro 不需要复杂配置即插即用。参考 src/components/CliPage.tsx150 动效组件全家福分类速览仓库中的组件全部集中在registry/目录按类别整理如下类别内容源码目录 加载动画134 个 LoaderApple 风格、物理弹簧、骨架屏、Siri 声波、牛顿摆等registry/ui/loading/ 入场转场fade-in、fade-up、slide-left、zoom-in 等registry/ui/entrance/️ 悬停交互tilt-card 3D 倾斜卡、magnetic-button 磁性按钮、glow-buttonregistry/ui/hover/ 卡片布局ARC 弧形卡阵、CoverFlow 轮播、时间机器堆叠、散牌桌面src/components/cards/✍️ 文字动效逐字揭示、词组高亮、模糊过渡、字符交错registry/ui/text/️ 滚动/光标滚动进度指示、滚动揭示、光标拖尾、聚光灯registry/ui/scroll/ 与 registry/ui/cursor/ Hooks鼠标位置、滚动进度、交错延迟、Web 触感反馈registry/hooks/⚙️ 工具库弹簧预设presets、工具函数registry/lib/presets.ts卡片组件的完整元数据含每个组件对应的 CLI 命令可查阅 src/data/cards.ts。新手必装推荐6 个高频动效组件不知道从哪下手下面 6 个是新手项目里出效果最快的选择组件效果描述安装命令fade-in基础淡入入场页面首屏必备npx subhanhq/amicrolatest add fade-intilt-card鼠标跟随 3D 倾斜卡片产品页神器npx subhanhq/amicrolatest add tilt-cardmagnetic-button磁性吸附按钮提升按钮质感npx subhanhq/amicrolatest add magnetic-buttontext-reveal文字逐行揭示适合大标题 Hero 区npx subhanhq/amicrolatest add text-revealclassic-spinner经典加载圈覆盖 90% 的 loading 场景npx subhanhq/amicrolatest add classic-spinnercard-arc-55 张弧形扇形卡片作品集展示效果拉满npx subhanhq/amicrolatest add card-arc-5 小技巧所有 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/presetsRegistry 条目会按target字段把文件放到components/amicro/目录下与 shadcn 的组件体系无缝共存。常见问题 FAQQ1会影响打包体积吗不会。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 的使用流程其实只有三步npx subhanhq/amicrolatest init—— 初始化项目配置npx subhanhq/amicrolatest add 组件名—— 添加想要的动效组件在页面中导入使用或直接改源码定制。一条npx命令、零复杂配置、150 现成动效——如果你的 React 项目还缺一点高级感的页面过渡和微交互Amicro CLI 值得现在就试一次。【免费下载链接】Amicro--Micro-transitions-项目地址: https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考