动效选型

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

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

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

先记住三句话

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

第一步：看清项目

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

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

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

用户这么说时

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

第二步：按网站类型挑

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

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

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

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

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

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

电商

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

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

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

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

• 主角（选一个）： 首屏背景用 流体背景 Fluid Background（AI、创意工具，柔和）或 点阵波纹 Dot Grid（开发者工具，理性）；讲全球覆盖用 点阵地球 Dot Globe；要一个记得住的发布感用 粒子聚合 Particle Morph。功能介绍：每个功能配一张截图用 滚动叙事 Scroll Storytelling，几个步骤用 卡片堆叠 Stacking Cards。
• 点缀： 深色功能卡 聚光 Spotlight；价格表推荐那一档 边缘流光 Border Beam；数据 数字滚动 Count Up；客户 Logo 跑马灯 Marquee；标题二选一：打字机 Typewriter 轮换说法，乱码解码 Scramble Text 解码感；注册按钮 磁吸 Magnetic。
• 基础： 滚动出现 Scroll Reveal、错峰 Stagger、缓动 Easing、流光 Shimmer。
• 别用： 光标跟随 Custom Cursor、图片拖尾 Image Trail、物理掉落 Physics Drop，用户是来判断产品靠不靠谱的。

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

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

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

• 主角： 不要。专题长文可以用一个 滚动叙事 Scroll Storytelling 讲图解。
• 点缀： 文章目录或作者列表用 悬停预览 Hover Reveal；报道里的关键数字用 数字滚动 Count Up。
• 基础： 滚动出现 Scroll Reveal 只给卡片和配图，不给正文每一段；文章卡 悬停上浮 Hover Lift；封面图点进文章 共享元素转场 Shared Element Transition。
• 别用： 逐字点亮 Scroll Text Highlight 用在正文（逐字亮读着累）；光标跟随 Custom Cursor；任何让正文文字动起来的效果。

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

• 主角（选一个最贴主题的）： 聚出活动名或数字用 粒子聚合 Particle Morph；从一个词潜进主视觉用 遮罩揭开 Mask Reveal；有分层插画用 视差滚动 Parallax；要氛围用 流体背景 Fluid Background；嘉宾或系列展示用 3D 轮播 3D Carousel。
• 点缀： 口号 速度跑马灯 Velocity Marquee；领取按钮 流光 Shimmer 扫光；报名按钮 磁吸 Magnetic；页尾彩蛋 物理掉落 Physics Drop；关键数字 数字滚动 Count Up。
• 基础： 滚动出现 Scroll Reveal、错峰 Stagger、弹性 Spring。
• 别用： 活动页最容易一页堆三四个大动效。主角还是只有一个。

第三步：按页面位置挑

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

克制规则

1. 一页一个主角。 同一页挑出了两个主角，留下和网站主题最贴的那个，另一个换成点缀或删掉。Canvas 和 WebGL 类的（流体背景 Fluid Background、液态扭曲 Liquid Distortion、粒子聚合 Particle Morph、点阵波纹 Dot Grid、点阵地球 Dot Globe）同一页最多一个，哪怕一个在首屏、一个在页尾。
2. 点缀最多三个，同一个元素只加一种效果。 按钮加了 磁吸 Magnetic 就别再加 流光 Shimmer 扫光；卡片加了 3D 倾斜 Tilt 就别再加 边缘流光 Border Beam。一屏里的点缀不超过两个。
3. 同类不叠。 光标跟随 Custom Cursor 和 图片拖尾 Image Trail 都跟着鼠标，二选一；打字机 Typewriter 和 乱码解码 Scramble Text 都是文字出场，一屏二选一；跑马灯 Marquee 和 速度跑马灯 Velocity Marquee 都是会跑的一行，一页只放一条。
4. 后台和表单不用重动效。 只用「基础」那一档，照上面「后台」的配法。用户每天要操作几百次，超过 0.2 秒的动画都会变成负担。表单提交按钮不磁吸、不弹跳；报错提示直接出现；数据直接显示，不滚数字。
5. 手机上不用光标类。 光标跟随 Custom Cursor、磁吸 Magnetic、聚光 Spotlight、3D 倾斜 Tilt、Dock 放大 Dock Magnification、悬停上浮 Hover Lift 在手机上没有效果；悬停预览 Hover Reveal、图片拖尾 Image Trail、液态扭曲 Liquid Distortion 在手机上看不到内容。手机访问为主的项目不要拿它们当主角；电脑上用了，要保证手机上没有鼠标时页面照样完整（比如 悬停预览 Hover Reveal 在手机上每行直接放小图）。判断有没有鼠标用 matchMedia('(hover: hover) and (pointer: fine)')，Tailwind 里可以写 [@media(hover:none)]:block。横向滚动 Horizontal Scroll 和 无限画廊 Infinite Gallery 在手机上会和上下滑动抢手势，换成竖排或单独占一整屏。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、粒子聚合 Particle Morph）。
   • 图片类动效（无限画廊 Infinite Gallery、图片拖尾 Image Trail、悬停预览 Hover Reveal、3D 轮播 3D Carousel、液态扭曲 Liquid Distortion）每张图压到 200KB 以内，优先用 webp。
   • 一直在动的东西滚出屏幕要暂停（这里的 Canvas、WebGL 组件已经做了）。
   • 装完把 CPU 降速 4 倍滚一遍（做法见下面「交付」），明显掉帧就按上面的办法降级。

容易混的几对

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

交付

按这个顺序告诉用户：

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 的动画。
• 用户点名要的动效照做；觉得不合适，做完再提一句建议。

全部组件和流程