Amicro：基于 Motion 的 React 微交互组件库，支持 shadcn CLI 引入

Amicro 是一个面向 React 项目的微交互与转场动画组件库，由开发者 Syed Subhan 开源。它收集了一批精巧的交互细节、卡片布局以及过渡动效，专门用来提升网页界面的细腻质感。

它的设计思路不是打包成一个笨重的第三方 npm 依赖包，而是采用当下流行的 copy-to-code 模式。你可以直接把 TSX 源码拉到自己的项目代码仓库里，改起来毫无阻碍，也不会带来多余的运行时开销。

它能做什么

Amicro 目前包含的组件数量不算特别庞大，但每一个小动画都调得相当克制且精致。

在基础入场过渡方面，它提供了 fade-in、fade-up 和 zoom-in 等常用动效。在细节交互上，它包含支持悬停倾斜的 tilt-card、自带吸附手感的 magnetic-button、文字渐显效果 text-reveal，以及像 card-arc-5 这样带弧形动效的卡片组件和带状态切换的 download-button。

除了视觉组件，它还封装了自定义 Hook 和动画预设，比如用来监听滚动进度的 use-scroll-progress，以及现成的弹簧动效预设 presets。

所有的动效都基于 motion/react 构建，支持硬件加速，保证滑动和交互时的帧率表现。同时组件在色彩上也照顾到了深色与浅色模式，切换主题时无需额外调整样式。

怎么用起来

项目对技术栈的要求很清晰：需要 Node.js 18 及以上版本，支持 React 18 或 19，样式基于 Tailwind CSS v3 或 v4，动画底层依赖 motion 或 framer-motion。

如果你习惯使用 Amicro 自带的命令行，在 React、Next.js 或 Vite 项目中运行 npx @subhanhq/amicro@latest init 即可完成配置初始化，之后通过 add 命令按需添加组件。

更方便的是它完全兼容 shadcn 社区生态。你可以在 components.json 文件的 registries 里加上 @amicro 的源地址，直接运行 npx shadcn add @amicro/tilt-card 或 npx shadcn add @amicro/magnetic-button，组件源码就会自动放入 components/amicro 目录下。

如果你不想改配置，也可以直接通过公开的 GitHub raw 链接用 shadcn 命令行抓取单个组件。

项目遵循 MIT 协议开源，源码和注册表均托管在 GitHub 上，可以免费用于个人或商业项目。

为什么重要

对于正在用 Tailwind CSS 和 shadcn/ui 搭建界面的独立开发者和前端工程师来说，Amicro 非常值得塞进工具箱。很多开发者想给页面加一点吸睛的微动效，但自己手写弹簧物理参数不仅耗时，还容易把界面做得花哨油腻。Amicro 提供的恰好是一套开箱即用、克制且有设计感的高品质预设。

从架构上看，它紧跟 shadcn 引领的源码分发趋势，既避开了传统组件库版本锁死、样式难覆盖的痛点，又不需要承担额外的运行时体积负担。虽然目前的组件库规模有限，但由于源码完全在自己手里，按需拿走一两个按钮或卡片组件就能立刻给产品加分。