Vibe 实用推荐 · 第 01 期

motion-primitives：把"AI 做的页面"变成"有生命的页面"。 开源动效 UI 组件库，React / Next.js / Tailwind 栈，组件按 copy-paste 进项目的方式交付——不装黑盒 npm 包，代码在你手里。

截图摄于 2026-10-04，来自 motion-primitives.com，版权归原作者与原团队所有；本页只做学习推荐与拆解，不搬运代码文档。

沉

沉思波学习中心

@chensibo · 2026-10-04 · 第 01 期

Vibe 实用推荐

挖到宝了。motion-primitives——开源动效 UI 组件库，React / Next.js / Tailwind 直接吃。 官方立场很 vibe：组件 copy-paste 进你的项目，代码归你，不锁 npm 黑盒。 做 AI 生成页面最缺的那口"活气"，它就是补给站。

官方文档 →

沉

沉思波学习中心

接上 · 组件清单

组件清单本身就是一张"vibe 时刻"清单：Dock、Border Trail、Text Scramble、Animated Number、Image Comparison…… 每个组件给 Preview + Code 两页，先看点效果，再抄代码，和我们「先说结果、再给参照物」的提需求路子一模一样。

沉

沉思波学习中心

接上 · 实拍两枚

实拍一枚 Dock：苹果风dock栏，图标随指针放大让位——导航栏瞬间有手感。 再一枚 Border Trail：一道光沿卡片边框跑一圈，"加载中"三个字不用写了，光就是反馈。

沉

沉思波学习中心

接上 · 我们怎么用

我们的用法三步：① 先说效果（"卡片 hover 时边框跑一道光"写进需求稿）； ② 给参照物（把这一期的链接和截图贴给 AI）；③ 验收（动效有没有、减不减帧、reduced-motion 下停不停）。 动效不是装饰，是反馈——这和我们[第 0 课](/glossary)里"点完要有反馈"是同一条规矩。

沉

沉思波学习中心

收尾 · 收进学习中心

已收进[学习中心「Vibe 实用外部资源」](/glossary#resources)，随时可查。 下一期想看什么宝藏：去[用户社群](/community)发帖点名，点得多的先拆。

学习中心资源位 →去社群点名 →

本期信息卡

项	内容
名字	motion-primitives
是什么	开源动效 UI 组件库（React / Next.js / Tailwind）
交付方式	组件 copy-paste 进项目，代码归使用者
入口	motion-primitives.com/docs
收录	学习中心「Vibe 实用外部资源」第 01 期
截图	2026-10-04 摄于官网，版权归原作者与原团队

推荐不等于背书：版本与许可以官方仓库为准；接入前照例过一遍我们的验收清单（动效、降级、reduced-motion）。