Vibe Coding 做动效：先说清「触发 × 变化」二元组

一、动效需求二元组：触发 × 变化

绝大部分动效翻车，根因是需求只描述了结果（"高级感""沉浸式"），没描述机制。把机制拆成两维，需求就立得住了：

• 触发方式（Trigger）——谁让动画动起来？主流就两类：
  • 滚动（scroll）：连续、可量化。滚动进度能从 0 平滑走到 1，适合"跟随""推进""显影"这类连续变化。
  • 点击（click）：离散、状态切换。点一下从 A 态跳到 B 态，适合"展开""切换""播放某段"。
• 视觉变化（Visual Change）——动起来的到底是什么？视频里出现了五种典型：光影 / 运镜 / 拆解 / 跟手 / 重排。

需求描述只要同时点名触发和变化，AI 的还原率会成倍往上走。下面逐条看视频里的 5 种动效是怎么落在这张表上的。

二、5 种动效逐条拆解

注意一个细节：视频标题和实际描述有时对不上（比如第 1 条标题写"光标驱动"，描述却是"鼠标滚动时"）。这本身就是需求没说清触发方式的活例子——你给 AI 的场景若自己都矛盾，它只能瞎猜。所以每条我都标了实际触发方式。

1. 光标驱动的材质显影

• 触发：标题写"光标"，描述写"鼠标滚动时"——按描述取滚动更稳（若真要跟手用 cursor 位置映射）。
• 变化：产品局部光影跟随进度显影（高光横移、材质从暗到亮）。
• 给 AI 的一句话："页面滚动时，产品模型表面的高光从左到右扫过、材质由暗变亮，进度 0→1 对应显影 0%→100%。"

2. 滚动驱动的沉浸式品牌叙事

• 触发：描述写"鼠标点击后，物体跟随滚动"——即点击进入 + 滚动推进的两段式。
• 变化：物体运镜推进（camera dolly），伴随镜头向前"钻入"品牌的纵深感。
• 给 AI 的一句话："点击进入后，随滚动镜头沿 Z 轴向前推进，背景品牌元素由远及近放大，形成沉浸式叙事。"

3. 滚动驱动的产品运镜与拆解

• 触发：滚动。
• 变化：人物/产品跟随移动 + 电影转场（镜头切换、遮挡过渡）。
• 给 AI 的一句话："滚动时产品沿路径平移，关键节点插入电影级转场（如遮挡切、径向模糊），不是硬跳。"

4. 滚动驱动的产品细节展示

• 触发：描述写"鼠标点击后"——点击触发局部演示，然后可能转为自动播放。
• 变化：眼睛/视线跟手演示某个细节动作（聚焦 → 放大 → 标注）。
• 给 AI 的一句话："点击产品某部件后，镜头聚焦该处并播放细节演示（如螺丝旋入），配局部高亮与文字标注。"

5. 滚动驱动的人像画廊

• 触发：滚动。
• 变化：人像跟随滚动 + 与重排（reflow）结合（卡片位移、网格重组）。
• 给 AI 的一句话："滚动时人像卡片沿主轴平移，并在阈值处重排为新的网格布局，过渡用 FLIP 动画而非瞬间跳变。"

三、可直接复制给 AI 的需求模板

把下面四格填了，发给任何代码模型都好使：

【触发】滚动 / 点击（二选一，别写"交互"这种词）
【变化】光影 / 运镜 / 拆解 / 跟手 / 重排（点名具体哪个）
【范围】作用在页面的哪个元素、哪段区域（给选择器或位置描述）
【节奏】匀速 / 缓入缓出 / 跟随手指；进度 0→1 映射成什么

反例："做一个高级的滚动动画。" —— 没有触发、没有变化、没有范围、没有节奏，AI 只能编。
正例："页面 hero 区（类 .product）随滚动，背景高光从左侧 20% 横移到右侧 80%，材质由暗到亮，缓动用 ease-out，滚动 0→1 映射显影 0%→100%。"

这和把"运动"说清楚是同一条路——如果你要做的是视频/分镜里的运动描述，可以回看 Motion Prompt：把运动说清楚的那套名词库，思路完全打通。

四、最小可运行示例：滚动驱动的材质显影

不依赖任何框架，原生 JS + CSS 变量即可。滚动进度被算成 0→1，喂给 CSS 变量 --p，高光位置跟着走——这正是第 1 条动效的最小形态。

<style>
.hero{height:300vh;position:relative}
.product{
  position:sticky;top:0;height:100vh;
  --p:0;
  background-image:
    radial-gradient(60% 60% at calc(20% + var(--p)*60%) 50%,
      rgba(108,77,255,.55), transparent 70%),
    linear-gradient(135deg,#0c0820,#1a1240);
}
</style>
<div class="hero"><div class="product"></div></div>
<script>
const hero=document.querySelector('.hero');
const p=document.querySelector('.product');
addEventListener('scroll',()=>{
  const r=hero.getBoundingClientRect();
  const total=hero.offsetHeight-innerHeight;
  const t=Math.min(1,Math.max(0,-r.top/total));
  p.style.setProperty('--p',t.toFixed(3));
},{passive:true});
</script>

想改成真·光标驱动（跟手而非跟滚动），只需把 scroll 监听换成 mousemove，用 e.clientX/innerWidth 算 t 即可——这也印证了第 1 条标题与描述矛盾时，选哪个触发全看你想要跟手还是跟滚。

五、框架选型：原生还是上库

• 原生（上面这种）：适合单点、轻量、一两个元素的显影/光影。零依赖，Vibe Coding 一次出片。
• GSAP + ScrollTrigger：滚动时间轴复杂、要多段串联（② 品牌叙事、③ 运镜拆解）时上它，时间轴语义清晰。
• Lenis：想要丝滑的平滑滚动（惯性感）时叠加，和 GSAP 是黄金搭档。
• FLIP（View Transitions / GSAP Flip）：第 ⑤ 条"重排画廊"的跳变过渡，用 FLIP 把布局变化补成连续动画，别让卡片瞬间闪现。

给 AI 提需求时把"用不用框架"也写上，能省掉它自作主张引一堆依赖的麻烦。

六、收尾：说清机制，AI 才还原

回看那条核心思路——做 Vibe Coding 时，先把交互触发方式（滚动/点击）和视觉变化（光影、运镜、重排）说清楚，AI 才更容易还原你想要的效果。它真正的含金量在于：把模糊的"高级感"翻译成机器能执行的触发 × 变化二元组。下次你张口想说"做个炫的滚动效果"之前，先在心里把这两维填好，再发给模型——省下的返工时间够你多喝两杯咖啡。