# 动效选型

用户想给网站"加点动效""让页面活一点""首页太平了"时，按这份挑。目标不是动效越多越好，而是每个动效都有理由。

AI 加动效最常见的毛病，是什么都往上堆：首屏粒子、标题打字、卡片倾斜、按钮扫光、光标拖尾，全挤在一页。每个单看都不错，放在一起就廉价、卡顿，眼睛不知道看哪。好的动效靠两件事，顺序不能反：

1. 先看懂这个网站给谁用、这一块要干什么，再挑动效。
2. 挑对了，再控制数量和力度。

## 先记住三句话

1. **动效是为了让人看懂、想点，不是为了炫。** 说不出"这个动效帮用户看懂了什么、点了什么"，就不加。
2. **一页只有一个主角。** 每个组件的说明里写了角色：「主角」占一整块、抢全部注意力，一页最多一个；「点缀」贴在某个元素上，一页最多三个；「基础」是手感，哪里都能用。"挑 1 到 3 个"说的是主角加点缀，基础不算在里面，合适就加。
3. **先做基础，再挑主角。** [缓动 Easing](https://www.dachuiai.com/c/easing.md)、[滚动出现 Scroll Reveal](https://www.dachuiai.com/c/scroll-reveal.md)、[悬停上浮 Hover Lift](https://www.dachuiai.com/c/hover-lift.md) 这类基础手感做好了，页面已经比大多数 AI 做的网站顺；主角是锦上添花，没有合适的就不放。

## 第一步：看清项目

先不挑。弄清下面五件事：

- **什么网站？** 对上这几种之一：官网、本地小店、电商、作品集、SaaS、后台、内容站、活动页。一个项目可以有两种，比如 SaaS 的介绍页是官网，登录后是后台，分开挑。
- **改哪一块？** 首屏、内容区、列表、卡片、按钮、转场。用户只说"加点动效"时，前台网站先从首屏和卡片下手，后台先从加载、列表和弹窗下手。
- **现在什么风格？** 深色底更适合光效（[聚光 Spotlight](https://www.dachuiai.com/c/spotlight.md)、[边缘流光 Border Beam](https://www.dachuiai.com/c/border-beam.md)、[点阵波纹 Dot Grid](https://www.dachuiai.com/c/dot-grid.md)），浅色底更适合位移类（[滚动出现 Scroll Reveal](https://www.dachuiai.com/c/scroll-reveal.md)、[弹性 Spring](https://www.dachuiai.com/c/spring.md)，电脑上再加 [悬停上浮 Hover Lift](https://www.dachuiai.com/c/hover-lift.md)）。温暖、手作、亲子风格少用科技感的效果（[乱码解码 Scramble Text](https://www.dachuiai.com/c/scramble-text.md)、[粒子聚合 Particle Morph](https://www.dachuiai.com/c/particle-morph.md)、[点阵波纹 Dot Grid](https://www.dachuiai.com/c/dot-grid.md)）。
- **手机还是电脑？** 手机访问为主时，避开说明里「手机上」写着「没效果」或「要改」的组件当主角。
- **手上有什么素材？** 很多动效没有素材做不好：[视差滚动 Parallax](https://www.dachuiai.com/c/parallax.md) 要能分层的图，[遮罩揭开 Mask Reveal](https://www.dachuiai.com/c/mask-reveal.md) 要一张好图和一个短英文词，[图片拖尾 Image Trail](https://www.dachuiai.com/c/image-trail.md) 和 [无限画廊 Infinite Gallery](https://www.dachuiai.com/c/infinite-gallery.md) 要十几张好图，[数字滚动 Count Up](https://www.dachuiai.com/c/count-up.md) 要真实的关键数字。没有就别硬上。

能看项目文件就自己看，看不出来的才问。要问的合成最多三个问题，按这个顺序挑：用什么做的（看不到项目时）；网站类型和要改哪一块；手机还是电脑为主、深色还是浅色、手上有什么图。在同一条回复里先问，再按最常见的情况把假设写出来、接着做完，不用停下来等（常见情况：React + Vite + Tailwind v4；前台网站手机和电脑都要顾到，后台按电脑；风格照项目现在的样子）。

## 用户这么说时

用户的说法很模糊时，先按这张表配，再按网站类型微调。

| 用户说 | 多半缺的是 | 先这样配 |
| --- | --- | --- |
| 加点动效（没说别的） | 基础手感 | [滚动出现 Scroll Reveal](https://www.dachuiai.com/c/scroll-reveal.md)、[悬停上浮 Hover Lift](https://www.dachuiai.com/c/hover-lift.md)、[缓动 Easing](https://www.dachuiai.com/c/easing.md)，再按网站类型给首屏一个主角（本地小店、电商、后台不加主角） |
| 首页太平了、没亮点 | 首屏没有主角 | 按网站类型挑一个首屏主角，内容区用 [滚动出现 Scroll Reveal](https://www.dachuiai.com/c/scroll-reveal.md) |
| 高级一点 | 少而慢、有留白 | 作品集用 [图片拖尾 Image Trail](https://www.dachuiai.com/c/image-trail.md)（图多）或 [液态扭曲 Liquid Distortion](https://www.dachuiai.com/c/liquid-distortion.md)（有一张招牌大图）；官网和 SaaS 用 [流体背景 Fluid Background](https://www.dachuiai.com/c/fluid-background.md) 配 [磁吸 Magnetic](https://www.dachuiai.com/c/magnetic.md) 主按钮；电商用 [悬停上浮 Hover Lift](https://www.dachuiai.com/c/hover-lift.md) 和 [共享元素转场 Shared Element Transition](https://www.dachuiai.com/c/shared-element.md)。高级感一半在配色、字体和留白，风格还没定就先走「风格顾问」 |
| 活泼一点、有趣点 | 有反馈、有节奏 | [弹性 Spring](https://www.dachuiai.com/c/spring.md) 给按钮和收藏，[错峰 Stagger](https://www.dachuiai.com/c/stagger.md) 给首屏卡片；年轻品牌页尾加 [物理掉落 Physics Drop](https://www.dachuiai.com/c/physics-drop.md) |
| 科技感 | 深色加理性的动 | 深色底，首屏 [点阵波纹 Dot Grid](https://www.dachuiai.com/c/dot-grid.md) 或 [粒子聚合 Particle Morph](https://www.dachuiai.com/c/particle-morph.md)，标题 [乱码解码 Scramble Text](https://www.dachuiai.com/c/scramble-text.md) |
| 像苹果官网那样 | 跟着滚动讲产品 | [滚动绑定 Scroll-linked Animation](https://www.dachuiai.com/c/scroll-linked.md) 或 [滚动叙事 Scroll Storytelling](https://www.dachuiai.com/c/scroll-story.md)，理念那段用 [逐字点亮 Scroll Text Highlight](https://www.dachuiai.com/c/scroll-highlight.md) |
| 现代一点、别那么死板（后台、工具） | 东西"啪"地出现 | [缓动 Easing](https://www.dachuiai.com/c/easing.md) 统一曲线、[流光 Shimmer](https://www.dachuiai.com/c/shimmer.md) 骨架屏、[布局动画 Layout Animation](https://www.dachuiai.com/c/layout-animation.md) 列表，不加主角 |

## 第二步：按网站类型挑

每种网站先选主角（可以不选），再配点缀和基础。这里列的是首选；组件说明里写着适合这类网站、这里没列的，素材合适时也能用。

### 官网（公司、品牌、产品介绍）

- **主角（选一个）：** 首屏有能分层的风景或产品图，用 [视差滚动 Parallax](https://www.dachuiai.com/c/parallax.md)；没有图、要高级氛围，用 [流体背景 Fluid Background](https://www.dachuiai.com/c/fluid-background.md)；品牌感强、信息不急，手上有一张好图和一个短英文词，用 [遮罩揭开 Mask Reveal](https://www.dachuiai.com/c/mask-reveal.md)（标题和按钮要滚过一段才出来，要马上转化的官网别用）。要讲清产品怎么工作，主角放在内容区：每步配图用 [滚动叙事 Scroll Storytelling](https://www.dachuiai.com/c/scroll-story.md)，拆解产品结构用 [滚动绑定 Scroll-linked Animation](https://www.dachuiai.com/c/scroll-linked.md)。
- **点缀：** 首屏主按钮加 [磁吸 Magnetic](https://www.dachuiai.com/c/magnetic.md)；关键数字用 [数字滚动 Count Up](https://www.dachuiai.com/c/count-up.md)；合作伙伴 Logo 用 [跑马灯 Marquee](https://www.dachuiai.com/c/marquee.md)；品牌理念那一段话用 [逐字点亮 Scroll Text Highlight](https://www.dachuiai.com/c/scroll-highlight.md)。
- **基础：** [滚动出现 Scroll Reveal](https://www.dachuiai.com/c/scroll-reveal.md)、[错峰 Stagger](https://www.dachuiai.com/c/stagger.md)、[悬停上浮 Hover Lift](https://www.dachuiai.com/c/hover-lift.md)、[缓动 Easing](https://www.dachuiai.com/c/easing.md)。
- **别用：** [光标跟随 Custom Cursor](https://www.dachuiai.com/c/custom-cursor.md)、[图片拖尾 Image Trail](https://www.dachuiai.com/c/image-trail.md)、[物理掉落 Physics Drop](https://www.dachuiai.com/c/physics-drop.md) 只适合年轻、创意类品牌，传统行业的官网别用。

### 本地小店（咖啡店、餐厅、门店、工作室，包括它们的官网）

客人多半从地图、点评、小红书点进来，用手机看，要一眼看到店名、营业时间、地址和按钮。

- **主角：** 不要让人等的首屏。一张好照片加店名和按钮就是首屏，照片好比什么动效都管用。
- **点缀：** 品牌故事那段话用 [逐字点亮 Scroll Text Highlight](https://www.dachuiai.com/c/scroll-highlight.md)（强调色换成店的颜色）；有真实数字（开店几年、卖出多少杯）用 [数字滚动 Count Up](https://www.dachuiai.com/c/count-up.md)。
- **基础：** 菜单、作品、环境照片用 [滚动出现 Scroll Reveal](https://www.dachuiai.com/c/scroll-reveal.md)，同一排依次出现；全站过渡统一用 [缓动 Easing](https://www.dachuiai.com/c/easing.md)；电脑上能点进详情的卡片加 [悬停上浮 Hover Lift](https://www.dachuiai.com/c/hover-lift.md)。
- **别用：** [遮罩揭开 Mask Reveal](https://www.dachuiai.com/c/mask-reveal.md)、[粒子聚合 Particle Morph](https://www.dachuiai.com/c/particle-morph.md) 这类要等的首屏；光标类（手机上没效果）；地址、营业时间、电话不加任何动效。

### 电商

- **主角：** 一般不要。顾客是来买东西的，动效越少越快。新品专题页可以用 [3D 轮播 3D Carousel](https://www.dachuiai.com/c/carousel-3d.md) 展示系列，或 [视差滚动 Parallax](https://www.dachuiai.com/c/parallax.md) 做品牌首屏；商品详情讲卖点可以用 [滚动叙事 Scroll Storytelling](https://www.dachuiai.com/c/scroll-story.md)。
- **点缀：** 会员卡、礼品卡用 [3D 倾斜 Tilt](https://www.dachuiai.com/c/tilt.md)；推荐套餐用 [边缘流光 Border Beam](https://www.dachuiai.com/c/border-beam.md)；限时领取按钮用 [流光 Shimmer](https://www.dachuiai.com/c/shimmer.md) 的扫光按钮。
- **基础（电商最该做的）：** 商品卡 [悬停上浮 Hover Lift](https://www.dachuiai.com/c/hover-lift.md)；筛选和排序 [布局动画 Layout Animation](https://www.dachuiai.com/c/layout-animation.md)；列表点进详情 [共享元素转场 Shared Element Transition](https://www.dachuiai.com/c/shared-element.md)；加购、收藏 [弹性 Spring](https://www.dachuiai.com/c/spring.md)；加载时 [流光 Shimmer](https://www.dachuiai.com/c/shimmer.md) 的骨架屏；列表出现 [错峰 Stagger](https://www.dachuiai.com/c/stagger.md) 或 [滚动出现 Scroll Reveal](https://www.dachuiai.com/c/scroll-reveal.md)。
- **别用：** [液态扭曲 Liquid Distortion](https://www.dachuiai.com/c/liquid-distortion.md) 会把商品扭变形；[悬停预览 Hover Reveal](https://www.dachuiai.com/c/hover-reveal.md) 让顾客看不到商品图；[无限画廊 Infinite Gallery](https://www.dachuiai.com/c/infinite-gallery.md) 不能筛选；[光标跟随 Custom Cursor](https://www.dachuiai.com/c/custom-cursor.md) 干扰购物。

### 作品集（设计师、摄影、工作室、个人主页）

- **主角（一页一个）：** 首屏有一堆好图用 [图片拖尾 Image Trail](https://www.dachuiai.com/c/image-trail.md)，有一张招牌大图用 [液态扭曲 Liquid Distortion](https://www.dachuiai.com/c/liquid-distortion.md)，想让人记住名字或标志用 [粒子聚合 Particle Morph](https://www.dachuiai.com/c/particle-morph.md)。作品区和首屏在同一页时，作品区只用基础件；作品单独一页时，那一页可以有自己的主角：图多、随便逛用 [无限画廊 Infinite Gallery](https://www.dachuiai.com/c/infinite-gallery.md)，按时间顺序用 [横向滚动 Horizontal Scroll](https://www.dachuiai.com/c/horizontal-scroll.md)，6 到 12 件代表作用 [3D 轮播 3D Carousel](https://www.dachuiai.com/c/carousel-3d.md)。
- **点缀：** 全站 [光标跟随 Custom Cursor](https://www.dachuiai.com/c/custom-cursor.md)；纯文字的作品列表 [悬停预览 Hover Reveal](https://www.dachuiai.com/c/hover-reveal.md)；标题 [乱码解码 Scramble Text](https://www.dachuiai.com/c/scramble-text.md)；段落之间一行 [速度跑马灯 Velocity Marquee](https://www.dachuiai.com/c/velocity-marquee.md)；"联系我"按钮 [磁吸 Magnetic](https://www.dachuiai.com/c/magnetic.md)；个人主页底部入口 [Dock 放大 Dock Magnification](https://www.dachuiai.com/c/dock.md)；页尾彩蛋 [物理掉落 Physics Drop](https://www.dachuiai.com/c/physics-drop.md)。
- **基础：** 作品进详情 [共享元素转场 Shared Element Transition](https://www.dachuiai.com/c/shared-element.md)；换页 [页面转场 Page Transition](https://www.dachuiai.com/c/page-transition.md)；[滚动出现 Scroll Reveal](https://www.dachuiai.com/c/scroll-reveal.md)、[悬停上浮 Hover Lift](https://www.dachuiai.com/c/hover-lift.md)。
- **别用：** 作品集是最容易堆过头的。点缀全加就成了游乐场，挑和作品气质最贴的两三个。

### SaaS（软件产品的介绍页、落地页）

- **主角（选一个）：** 首屏背景用 [流体背景 Fluid Background](https://www.dachuiai.com/c/fluid-background.md)（AI、创意工具，柔和）或 [点阵波纹 Dot Grid](https://www.dachuiai.com/c/dot-grid.md)（开发者工具，理性）；讲全球覆盖用 [点阵地球 Dot Globe](https://www.dachuiai.com/c/dot-globe.md)；要一个记得住的发布感用 [粒子聚合 Particle Morph](https://www.dachuiai.com/c/particle-morph.md)。功能介绍：每个功能配一张截图用 [滚动叙事 Scroll Storytelling](https://www.dachuiai.com/c/scroll-story.md)，几个步骤用 [卡片堆叠 Stacking Cards](https://www.dachuiai.com/c/stacking-cards.md)。
- **点缀：** 深色功能卡 [聚光 Spotlight](https://www.dachuiai.com/c/spotlight.md)；价格表推荐那一档 [边缘流光 Border Beam](https://www.dachuiai.com/c/border-beam.md)；数据 [数字滚动 Count Up](https://www.dachuiai.com/c/count-up.md)；客户 Logo [跑马灯 Marquee](https://www.dachuiai.com/c/marquee.md)；标题二选一：[打字机 Typewriter](https://www.dachuiai.com/c/typewriter.md) 轮换说法，[乱码解码 Scramble Text](https://www.dachuiai.com/c/scramble-text.md) 解码感；注册按钮 [磁吸 Magnetic](https://www.dachuiai.com/c/magnetic.md)。
- **基础：** [滚动出现 Scroll Reveal](https://www.dachuiai.com/c/scroll-reveal.md)、[错峰 Stagger](https://www.dachuiai.com/c/stagger.md)、[缓动 Easing](https://www.dachuiai.com/c/easing.md)、[流光 Shimmer](https://www.dachuiai.com/c/shimmer.md)。
- **别用：** [光标跟随 Custom Cursor](https://www.dachuiai.com/c/custom-cursor.md)、[图片拖尾 Image Trail](https://www.dachuiai.com/c/image-trail.md)、[物理掉落 Physics Drop](https://www.dachuiai.com/c/physics-drop.md)，用户是来判断产品靠不靠谱的。

### 后台（管理系统、数据看板、登录后的工具界面）

- **主角、点缀：** 都不要。
- **只用基础，照这个配：**
  - 全站：[缓动 Easing](https://www.dachuiai.com/c/easing.md) 改成默认曲线，所有过渡 0.15 到 0.2 秒。
  - 弹窗、下拉菜单、抽屉：用缓动曲线淡入，弹窗从 95% 放大，0.15 到 0.25 秒；关掉时直接消失。删除确认这类严肃弹窗不弹跳。
  - 加载：[流光 Shimmer](https://www.dachuiai.com/c/shimmer.md) 的骨架屏，只在第一次没数据、加载超过 0.3 秒时出现；之后刷新保留旧数据。
  - 列表增删、筛选、排序：[布局动画 Layout Animation](https://www.dachuiai.com/c/layout-animation.md)，时长改成 0.2 秒、不过冲；翻页直接换，不动。
  - 开关、收藏这类小按钮：[弹性 Spring](https://www.dachuiai.com/c/spring.md)。
  - 侧边栏折叠用 [侧边栏 Sidebar](https://www.dachuiai.com/c/sidebar.md)，标签切换用 [标签页 Tabs](https://www.dachuiai.com/c/tabs.md) 的滑动指示条。
  - 能点进明细的卡片：[悬停上浮 Hover Lift](https://www.dachuiai.com/c/hover-lift.md)，改成浅色和 0.2 秒。
- **别用：** 所有主角和点缀；[页面转场 Page Transition](https://www.dachuiai.com/c/page-transition.md)（切换太频繁，动画拖慢操作）；[数字滚动 Count Up](https://www.dachuiai.com/c/count-up.md)（每次刷新都从 0 滚一遍很烦）；[滚动出现 Scroll Reveal](https://www.dachuiai.com/c/scroll-reveal.md)（内容要立刻在）。

### 内容站（博客、新闻、文档、教程）

- **主角：** 不要。专题长文可以用一个 [滚动叙事 Scroll Storytelling](https://www.dachuiai.com/c/scroll-story.md) 讲图解。
- **点缀：** 文章目录或作者列表用 [悬停预览 Hover Reveal](https://www.dachuiai.com/c/hover-reveal.md)；报道里的关键数字用 [数字滚动 Count Up](https://www.dachuiai.com/c/count-up.md)。
- **基础：** [滚动出现 Scroll Reveal](https://www.dachuiai.com/c/scroll-reveal.md) 只给卡片和配图，不给正文每一段；文章卡 [悬停上浮 Hover Lift](https://www.dachuiai.com/c/hover-lift.md)；封面图点进文章 [共享元素转场 Shared Element Transition](https://www.dachuiai.com/c/shared-element.md)。
- **别用：** [逐字点亮 Scroll Text Highlight](https://www.dachuiai.com/c/scroll-highlight.md) 用在正文（逐字亮读着累）；[光标跟随 Custom Cursor](https://www.dachuiai.com/c/custom-cursor.md)；任何让正文文字动起来的效果。

### 活动页（发布会、促销、节日、报名）

- **主角（选一个最贴主题的）：** 聚出活动名或数字用 [粒子聚合 Particle Morph](https://www.dachuiai.com/c/particle-morph.md)；从一个词潜进主视觉用 [遮罩揭开 Mask Reveal](https://www.dachuiai.com/c/mask-reveal.md)；有分层插画用 [视差滚动 Parallax](https://www.dachuiai.com/c/parallax.md)；要氛围用 [流体背景 Fluid Background](https://www.dachuiai.com/c/fluid-background.md)；嘉宾或系列展示用 [3D 轮播 3D Carousel](https://www.dachuiai.com/c/carousel-3d.md)。
- **点缀：** 口号 [速度跑马灯 Velocity Marquee](https://www.dachuiai.com/c/velocity-marquee.md)；领取按钮 [流光 Shimmer](https://www.dachuiai.com/c/shimmer.md) 扫光；报名按钮 [磁吸 Magnetic](https://www.dachuiai.com/c/magnetic.md)；页尾彩蛋 [物理掉落 Physics Drop](https://www.dachuiai.com/c/physics-drop.md)；关键数字 [数字滚动 Count Up](https://www.dachuiai.com/c/count-up.md)。
- **基础：** [滚动出现 Scroll Reveal](https://www.dachuiai.com/c/scroll-reveal.md)、[错峰 Stagger](https://www.dachuiai.com/c/stagger.md)、[弹性 Spring](https://www.dachuiai.com/c/spring.md)。
- **别用：** 活动页最容易一页堆三四个大动效。主角还是只有一个。

## 第三步：按页面位置挑

已经知道要改哪一块时，直接查这张表。"认准条件"不满足就往下找，或者不加。

| 位置 | 想要 | 用这个 | 认准条件 |
| --- | --- | --- | --- |
| 首屏 | 马上给信息（门店、电商、注册页） | 不放主角，好照片加标题加按钮 | 标题和按钮第一眼就在 |
| 首屏 | 纵深感 | [视差滚动 Parallax](https://www.dachuiai.com/c/parallax.md) | 有能分层的图 |
| 首屏 | 从一个词揭开画面 | [遮罩揭开 Mask Reveal](https://www.dachuiai.com/c/mask-reveal.md) | 一张好图加一个短英文词，信息不急 |
| 首屏 | 高级渐变氛围 | [流体背景 Fluid Background](https://www.dachuiai.com/c/fluid-background.md) | 背景上文字不多 |
| 首屏 | 科技、开发者感 | [点阵波纹 Dot Grid](https://www.dachuiai.com/c/dot-grid.md) | 深色底 |
| 首屏 | 全球、网络覆盖 | [点阵地球 Dot Globe](https://www.dachuiai.com/c/dot-globe.md) | 业务真的跨地区 |
| 首屏 | 让人记住一个词或标志 | [粒子聚合 Particle Morph](https://www.dachuiai.com/c/particle-morph.md) | 电脑访问为主，信息不急 |
| 首屏 | 创意、有趣 | [图片拖尾 Image Trail](https://www.dachuiai.com/c/image-trail.md) | 有 6 张以上好图，电脑访问为主 |
| 标题 | 后半句轮换几个说法 | [打字机 Typewriter](https://www.dachuiai.com/c/typewriter.md) | 每句都短 |
| 标题 | 解码、科技感 | [乱码解码 Scramble Text](https://www.dachuiai.com/c/scramble-text.md) | 短标题或数字 |
| 内容区 | 每个功能配一张图 | [滚动叙事 Scroll Storytelling](https://www.dachuiai.com/c/scroll-story.md) | 3 到 5 段 |
| 内容区 | 几个步骤 | [卡片堆叠 Stacking Cards](https://www.dachuiai.com/c/stacking-cards.md) | 3 到 6 张卡 |
| 内容区 | 拆解产品结构 | [滚动绑定 Scroll-linked Animation](https://www.dachuiai.com/c/scroll-linked.md) | 有能拆开的画面 |
| 内容区 | 时间线、历程 | [横向滚动 Horizontal Scroll](https://www.dachuiai.com/c/horizontal-scroll.md) | 电脑访问为主 |
| 内容区 | 一段理念 | [逐字点亮 Scroll Text Highlight](https://www.dachuiai.com/c/scroll-highlight.md) | 50 到 150 字 |
| 内容区 | 几个关键数字 | [数字滚动 Count Up](https://www.dachuiai.com/c/count-up.md) | 3 到 4 个真实数字 |
| 内容区 | 合作 Logo、评价 | [跑马灯 Marquee](https://www.dachuiai.com/c/marquee.md) | 5 个以上 |
| 内容区 | 段落之间的口号 | [速度跑马灯 Velocity Marquee](https://www.dachuiai.com/c/velocity-marquee.md) | 一页一条 |
| 内容区 | 普通段落和图片 | [滚动出现 Scroll Reveal](https://www.dachuiai.com/c/scroll-reveal.md) | 不在首屏 |
| 列表 | 纯文字列表要高级感 | [悬停预览 Hover Reveal](https://www.dachuiai.com/c/hover-reveal.md) | 电脑访问为主 |
| 列表 | 筛选、排序、增删 | [布局动画 Layout Animation](https://www.dachuiai.com/c/layout-animation.md) | 100 项以内 |
| 列表 | 首屏的一组依次出现 | [错峰 Stagger](https://www.dachuiai.com/c/stagger.md) | 20 项以内，在首屏 |
| 列表 | 首屏以下的一组依次出现 | [滚动出现 Scroll Reveal](https://www.dachuiai.com/c/scroll-reveal.md) 加 delay | 不在首屏 |
| 列表 | 加载中 | [流光 Shimmer](https://www.dachuiai.com/c/shimmer.md) | 加载超过 0.3 秒 |
| 卡片 | 能点的卡片 | [悬停上浮 Hover Lift](https://www.dachuiai.com/c/hover-lift.md) | 卡片真的能点 |
| 卡片 | 深色底一排功能卡 | [聚光 Spotlight](https://www.dachuiai.com/c/spotlight.md) | 深色底 |
| 卡片 | 只突出一张 | [边缘流光 Border Beam](https://www.dachuiai.com/c/border-beam.md) | 只给一张 |
| 卡片 | 一张主角卡 | [3D 倾斜 Tilt](https://www.dachuiai.com/c/tilt.md) | 卡上没有长文字 |
| 按钮 | 最重要的那一个 | [磁吸 Magnetic](https://www.dachuiai.com/c/magnetic.md) | 电脑访问为主；手机上用 [流光 Shimmer](https://www.dachuiai.com/c/shimmer.md) 的扫光按钮 |
| 按钮 | 点赞、收藏、加购 | [弹性 Spring](https://www.dachuiai.com/c/spring.md) | 小元素 |
| 弹窗 | 展示型网站的弹窗 | [弹性 Spring](https://www.dachuiai.com/c/spring.md) 加 [缓动 Easing](https://www.dachuiai.com/c/easing.md) | 从 95% 放大，不从 0 |
| 弹窗 | 后台、删除确认、付款确认 | 只用 [缓动 Easing](https://www.dachuiai.com/c/easing.md) | 不弹跳 |
| 转场 | 列表进详情 | [共享元素转场 Shared Element Transition](https://www.dachuiai.com/c/shared-element.md) | 两边是同一张图 |
| 转场 | 换页 | [页面转场 Page Transition](https://www.dachuiai.com/c/page-transition.md) | 单页应用，页面不多 |
| 导航 | 一排图标入口 | [Dock 放大 Dock Magnification](https://www.dachuiai.com/c/dock.md) | 个人主页，电脑访问为主 |
| 页脚 | 趣味收尾 | [物理掉落 Physics Drop](https://www.dachuiai.com/c/physics-drop.md) | 年轻、创意品牌 |
| 全站 | 统一速度曲线 | [缓动 Easing](https://www.dachuiai.com/c/easing.md) | 任何项目 |
| 全站 | 光标跟着变 | [光标跟随 Custom Cursor](https://www.dachuiai.com/c/custom-cursor.md) | 作品集、创意品牌 |

## 克制规则

1. **一页一个主角。** 同一页挑出了两个主角，留下和网站主题最贴的那个，另一个换成点缀或删掉。Canvas 和 WebGL 类的（[流体背景 Fluid Background](https://www.dachuiai.com/c/fluid-background.md)、[液态扭曲 Liquid Distortion](https://www.dachuiai.com/c/liquid-distortion.md)、[粒子聚合 Particle Morph](https://www.dachuiai.com/c/particle-morph.md)、[点阵波纹 Dot Grid](https://www.dachuiai.com/c/dot-grid.md)、[点阵地球 Dot Globe](https://www.dachuiai.com/c/dot-globe.md)）同一页最多一个，哪怕一个在首屏、一个在页尾。
2. **点缀最多三个，同一个元素只加一种效果。** 按钮加了 [磁吸 Magnetic](https://www.dachuiai.com/c/magnetic.md) 就别再加 [流光 Shimmer](https://www.dachuiai.com/c/shimmer.md) 扫光；卡片加了 [3D 倾斜 Tilt](https://www.dachuiai.com/c/tilt.md) 就别再加 [边缘流光 Border Beam](https://www.dachuiai.com/c/border-beam.md)。一屏里的点缀不超过两个。
3. **同类不叠。** [光标跟随 Custom Cursor](https://www.dachuiai.com/c/custom-cursor.md) 和 [图片拖尾 Image Trail](https://www.dachuiai.com/c/image-trail.md) 都跟着鼠标，二选一；[打字机 Typewriter](https://www.dachuiai.com/c/typewriter.md) 和 [乱码解码 Scramble Text](https://www.dachuiai.com/c/scramble-text.md) 都是文字出场，一屏二选一；[跑马灯 Marquee](https://www.dachuiai.com/c/marquee.md) 和 [速度跑马灯 Velocity Marquee](https://www.dachuiai.com/c/velocity-marquee.md) 都是会跑的一行，一页只放一条。
4. **后台和表单不用重动效。** 只用「基础」那一档，照上面「后台」的配法。用户每天要操作几百次，超过 0.2 秒的动画都会变成负担。表单提交按钮不磁吸、不弹跳；报错提示直接出现；数据直接显示，不滚数字。
5. **手机上不用光标类。** [光标跟随 Custom Cursor](https://www.dachuiai.com/c/custom-cursor.md)、[磁吸 Magnetic](https://www.dachuiai.com/c/magnetic.md)、[聚光 Spotlight](https://www.dachuiai.com/c/spotlight.md)、[3D 倾斜 Tilt](https://www.dachuiai.com/c/tilt.md)、[Dock 放大 Dock Magnification](https://www.dachuiai.com/c/dock.md)、[悬停上浮 Hover Lift](https://www.dachuiai.com/c/hover-lift.md) 在手机上没有效果；[悬停预览 Hover Reveal](https://www.dachuiai.com/c/hover-reveal.md)、[图片拖尾 Image Trail](https://www.dachuiai.com/c/image-trail.md)、[液态扭曲 Liquid Distortion](https://www.dachuiai.com/c/liquid-distortion.md) 在手机上看不到内容。手机访问为主的项目不要拿它们当主角；电脑上用了，要保证手机上没有鼠标时页面照样完整（比如 [悬停预览 Hover Reveal](https://www.dachuiai.com/c/hover-reveal.md) 在手机上每行直接放小图）。判断有没有鼠标用 `matchMedia('(hover: hover) and (pointer: fine)')`，Tailwind 里可以写 `[@media(hover:none)]:block`。[横向滚动 Horizontal Scroll](https://www.dachuiai.com/c/horizontal-scroll.md) 和 [无限画廊 Infinite Gallery](https://www.dachuiai.com/c/infinite-gallery.md) 在手机上会和上下滑动抢手势，换成竖排或单独占一整屏。Canvas、WebGL 主角在手机上降级：点数减半，老手机换成静态图。
6. **减弱动态效果。** 用户在系统里开了「减弱动态效果」时，内容必须完整显示，只是不动。大部分组件已经处理好了（停在最终画面或直接显示），装的时候不要删掉 `prefers-reduced-motion` 那几行。自己写的动画也照做：CSS 用 `@media (prefers-reduced-motion: reduce)` 去掉动画，JS 用 `matchMedia('(prefers-reduced-motion: reduce)').matches` 判断后直接跳到终点。
7. **性能底线。**
   - 动画只改 transform 和 opacity，不改 width、height、top、left（侧边栏折叠这种本来就要改宽度的除外）。
   - 小交互 0.1 到 0.2 秒，弹窗和抽屉 0.2 到 0.3 秒，单个元素进场不超过 0.7 秒，错峰的间隔加起来不超过 0.5 秒。动画没放完，用户也要能点、能滚。
   - 要转化的页面（门店、电商、SaaS 注册页），首屏的标题和按钮第一眼就要在。只有活动页、作品集、品牌官网这类先给感觉的页面，才可以让标题等首屏动效放完（[遮罩揭开 Mask Reveal](https://www.dachuiai.com/c/mask-reveal.md)、[粒子聚合 Particle Morph](https://www.dachuiai.com/c/particle-morph.md)）。
   - 图片类动效（[无限画廊 Infinite Gallery](https://www.dachuiai.com/c/infinite-gallery.md)、[图片拖尾 Image Trail](https://www.dachuiai.com/c/image-trail.md)、[悬停预览 Hover Reveal](https://www.dachuiai.com/c/hover-reveal.md)、[3D 轮播 3D Carousel](https://www.dachuiai.com/c/carousel-3d.md)、[液态扭曲 Liquid Distortion](https://www.dachuiai.com/c/liquid-distortion.md)）每张图压到 200KB 以内，优先用 webp。
   - 一直在动的东西滚出屏幕要暂停（这里的 Canvas、WebGL 组件已经做了）。
   - 装完把 CPU 降速 4 倍滚一遍（做法见下面「交付」），明显掉帧就按上面的办法降级。

## 容易混的几对

- 只要纵深感用 [视差滚动 Parallax](https://www.dachuiai.com/c/parallax.md)；要讲清结构和过程用 [滚动绑定 Scroll-linked Animation](https://www.dachuiai.com/c/scroll-linked.md)。
- 每一步都要配图、图一直在旁边，用 [滚动叙事 Scroll Storytelling](https://www.dachuiai.com/c/scroll-story.md)；每一步是一张独立的卡，用 [卡片堆叠 Stacking Cards](https://www.dachuiai.com/c/stacking-cards.md)；内容像一条时间线，用 [横向滚动 Horizontal Scroll](https://www.dachuiai.com/c/horizontal-scroll.md)（手机为主时别用）。
- [错峰 Stagger](https://www.dachuiai.com/c/stagger.md) 一挂载就播，只给首屏或点了才出现的一组；首屏以下的一组要依次出现，用 [滚动出现 Scroll Reveal](https://www.dachuiai.com/c/scroll-reveal.md)，同一排传 `delay={(i % 列数) * 60}`。
- 两页之间有同一张图，用 [共享元素转场 Shared Element Transition](https://www.dachuiai.com/c/shared-element.md)；没有，用 [页面转场 Page Transition](https://www.dachuiai.com/c/page-transition.md)。
- 温和、对话感用 [打字机 Typewriter](https://www.dachuiai.com/c/typewriter.md)；科技、解码感用 [乱码解码 Scramble Text](https://www.dachuiai.com/c/scramble-text.md)。
- Logo 和评价匀速走用 [跑马灯 Marquee](https://www.dachuiai.com/c/marquee.md)；一行口号大字要跟着手走用 [速度跑马灯 Velocity Marquee](https://www.dachuiai.com/c/velocity-marquee.md)。
- 一排卡片都能被照亮用 [聚光 Spotlight](https://www.dachuiai.com/c/spotlight.md)；只突出一张用 [边缘流光 Border Beam](https://www.dachuiai.com/c/border-beam.md)。
- 柔和、情绪、品牌感用 [流体背景 Fluid Background](https://www.dachuiai.com/c/fluid-background.md)；理性、技术、开发者用 [点阵波纹 Dot Grid](https://www.dachuiai.com/c/dot-grid.md)。
- 默认都用 [缓动 Easing](https://www.dachuiai.com/c/easing.md)；只有要"有趣、有反馈"的小东西才用 [弹性 Spring](https://www.dachuiai.com/c/spring.md)。

## 交付

按这个顺序告诉用户：

1. **选型表**，一处一行：

   | 位置 | 用的组件 | 为什么 | 手机上怎么处理 |
   | --- | --- | --- | --- |

2. **装好的代码**，告诉用户放在哪个文件、想改快慢颜色大小改哪个参数。
3. **一句话**：哪些地方故意没加动效，为什么。
4. **让用户自己验收**，把下面这段照着说给用户：
   - 往下滚、往回滚、快速滚，再刷新一次，画面都要对。
   - 打开「减弱动态效果」再看一遍，内容要全在：Mac 在 系统设置 → 辅助功能 → 显示 → 减弱动态效果；Windows 在 设置 → 辅助功能 → 视觉效果，关掉「动画效果」；iPhone 在 设置 → 辅助功能 → 动态效果。
   - 手机上看：手机和电脑连同一个 Wi‑Fi，运行 `npm run dev -- --host`（Next.js 是 `npm run dev -- -H 0.0.0.0`），在手机上打开终端里 Network 那一行的地址。
   - 卡不卡：Chrome 按 F12 → Performance → CPU 选 4x slowdown，滚一遍。看加载效果：F12 → Network → 选 Slow 4G 再刷新。

交之前逐条核对：

- 一页只有一个主角；同一个元素只有一种效果。
- 开了减弱动态效果，内容全都在。
- 手机上没有看不到的内容，没有和上下滑动抢手势的区域。
- 没有改 width、height、top、left 的动画。
- 用户点名要的动效照做；觉得不合适，做完再提一句建议。

[全部组件和流程](https://www.dachuiai.com/llms.txt)