打开参考库

COLLECTION 02 — MOTION & INTERACTION

网页动效资源与 UI 动画参考

想给页面加一点动效，先明确它要帮助用户理解什么。这里把真实产品中的交互参考、可以复用的组件和动画实现工具放在一起比较。

6 个资源来源3 个代表案例更新于
先看具体案例

从你的任务开始

先找到交互思路观察状态反馈、转场和微交互直接找动效组件文字、背景、卡片与页面区块自己控制动画处理布局、滚动和手势逻辑

START WITH A CASE

先看这几个具体例子

已有展示样本 · 完整效果在原站查看
可播放录像

Design Spells

Spotify SongDNA · 贡献者轮播

播放已有录像，观察内容切换时卡片之间的位置关系。

打开原站案例 资源说明
React Bits · Split Text已有展示截图静态截图

React Bits

React Bits · Split Text

标题需要分段出现时，比较文字拆分方式与入场节奏；动效和代码在原站查看。

打开原站案例 资源说明
Aceternity UI · 3D Card已有展示截图静态截图

Aceternity UI

Aceternity UI · 3D Card

需要悬停反馈时，观察卡片内元素的层次；到原站操作后再决定是否采用。

打开原站案例 资源说明

MAKE A CHOICE

参考效果、复用组件，还是自己实现？

左右滑动查看完整比较

找思路先看真实交互；需要代码看动效组件；需要控制完整交互逻辑再看动画工具。

网页动效资源选型比较
来源资源形式适用技术你能继续做什么具体入口
Design Spells产品交互参考视觉参考，不限定框架观察效果与出处，自行设计实现SongDNA 轮播
Ripplix交互图库与部分提示词视觉参考，不限定框架按控件找思路；源码需另找实现浏览原站
React Bits可复用动效组件React；JS / TS，CSS / Tailwind选组件版本，复制源码或安装Split Text
Magic UI动效组件与页面效果React、TypeScript、Tailwind、Motion按文档引入，再统一页面样式Marquee
Aceternity UI动效组件与页面区块React、Tailwind、Motion查看预览、依赖和代码3D Card
Motion动画实现工具React / Vue / JavaScript自行控制布局、滚动与手势逻辑手风琴动画

KNOW YOUR SOURCES

再了解各个资源来源

用途、使用方式与取舍，一起看。
  1. 01交互参考

    Design Spells

    designspells.com

    从真实产品中收集动画、微交互和有趣的设计细节，适合观察反馈与状态之间的关系。

    • 真实产品
    • 设计细节
    适合
    理解一个小交互为什么自然、为什么让人愿意继续操作。
    怎么用
    按 Interaction、Animation、Motion 等标签浏览，再看具体条目的出处。
    取舍
    参考展示通常不等于提供实现源码；需要结合自己的产品重新设计。
    查看具体示例 官方资料
  2. 02交互参考

    Ripplix

    ripplix.com

    按应用、网站和界面元素整理动画参考，可以从按钮、轮播和滚动等场景切入。

    • UI 动画
    • 微交互
    适合
    围绕某个控件或产品场景比较不同的动态处理。
    怎么用
    先按元素类型找案例，再确认该条目的展示范围和获取方式。
    取舍
    完整内容与部分功能需要账户或 Pro；提示词不等于可直接使用的源码。
    访问原站
  3. 03动效组件

    React Bits

    reactbits.dev

    提供文字动画、动态背景和交互组件，可以复制源码或使用安装工具。

    • React
    • 文字与背景
    适合
    在 React 项目中尝试文字、背景和创意交互效果。
    怎么用
    选择 JavaScript 或 TypeScript、CSS 或 Tailwind 版本，再在项目里调整参数。
    取舍
    先检查依赖、移动端表现与减少动态效果的需求；Pro 内容另有范围。
    查看具体示例 官方资料
  4. 04动效组件

    Magic UI

    magicui.design

    围绕 React、TypeScript、Tailwind CSS 和 Motion 提供动效组件与效果。

    • React
    • Tailwind CSS
    适合
    为产品介绍页补充滚动展示、文字和功能可视化。
    怎么用
    从公开组件文档查看预览、代码和依赖，再与自己的界面样式组合。
    取舍
    组件库与 Pro 区块、模板的范围不同，先核对所选内容。
    查看具体示例 官方资料
  5. 05动效组件

    Aceternity UI

    ui.aceternity.com

    把 React、Tailwind CSS 与 Motion 组合成卡片、背景和产品页面区块。

    • React
    • 页面区块
    适合
    在落地页中寻找具有动态表现的现成组件和区块。
    怎么用
    先在组件页阅读依赖与示例，再将效果放回完整页面中检查。
    取舍
    免费组件与付费区块、模板并存；具体获取条件以条目为准。
    查看具体示例 官方资料
  6. 06动画实现

    Motion

    motion.dev

    用于实现布局、滚动和手势动画的工具，适合需要自行控制动画逻辑的项目。

    • React / Vue / JS
    • 布局与手势
    适合
    让状态变化、展开收起和拖动反馈跟随真实交互。
    怎么用
    按当前技术栈阅读官方文档，从一个交互状态开始实现。
    取舍
    需要编写和维护动画逻辑；Motion+ 的扩展内容另有获取条件。
    查看具体示例 官方资料

把参考用到你的项目里

  1. 01

    先明确动效的作用

    是解释状态变化、引导注意力，还是增加品牌表现？先决定作用，再挑效果。

  2. 02

    按实现方式选来源

    看思路从交互图库开始；有明确技术栈时看组件；需要细调状态与节奏时看动画工具。

  3. 03

    放回实际页面检查

    检查移动端、操作反馈和加载表现，并为偏好减少动态效果的用户保留合适的体验。

开始之前，你可能还想知道

看到了动效参考，就能直接拿到代码吗？

不一定。交互图库、提示词和源码是不同的资源形式。本页已把来源分为交互参考、动效组件和动画实现工具，进入原站后还要核对具体条目。

React 动效组件可以直接用在 Vue 项目里吗？

React 组件通常需要 React 运行环境。Vue 项目应查找对应实现，或参考效果重新制作；Motion 的不同技术栈入口也需要分别查看文档。

应该先给哪些地方添加动效？

可以先从加载反馈、按钮状态、内容展开或页面切换中选一个实际问题。把一个状态衔接做好，再考虑更明显的文字和背景效果。