电影级网页镜头语言：5 种 scroll/cursor 驱动动效，逐个拆机制 + 可跑骨架

一、视频那 5 个名字，先说清它们是什么

视频里给了 5 个动效名：Cursor-driven Hotspot Exploded Reveal（光标驱动的热点拆解）、Swipe Gallery Carousel（横滑图集轮播）、Scroll-driven Camera Push（滚动驱动的镜头推移）、Scroll-driven Glitch Cut（滚动驱动的故障切景）、Cursor-driven Camera Orbit（光标驱动的镜头环绕）。它们不是某个库的 5 个预设，而是用光标 / 滚动当「摇杆」，驱动一组镜头语言」的 5 种网页动效技法词。GitHub API 搜 hotspot exploded reveal、glitch cut scroll 都是 0 结果，第三方 studio 站（如 scaleus.in）把它们当「pick the motion you want and we build your site on it」的技法菜单在卖——说明这是商用创意 studio 的通用技法，不是能直接 npm i 装某个包的成品。

跟站内 《8 个高级交互动效》（article-113，磁吸光标 / conic 边框 / 弹簧交错这类「UI 高级感微交互」）不同档：那篇拆的是组件级微交互，这篇拆的是镜头级运镜——主角不是某个按钮 / 卡片，而是「整个画面像电影镜头一样被光标或滚动推着走」。

二、5 种技法逐条拆解（机制 + 可跑骨架）

① 光标驱动的热点拆解 Hotspot Exploded Reveal

机制：把一个 3D 产品 / 场景「爆炸」成散开的零件，散落位置由光标坐标驱动——光标到哪半边，哪半边零件就聚拢 / 散开，让「拆解」这件事本身有了指向性。本质是 Three.js 里给每个 sub-mesh 算一个 explode 向量，再用 lerp 把目标 offset 插值到当前光标映射值。

// 每个零件：基准位 home + 爆炸方向 dir（从中心指向自身）
parts.forEach(p => {
  const t = cursorMix;            // 光标横坐标 → 0~1，控制「散开程度」
  p.position.copy(p.home).addScaledVector(p.dir, t * maxExplode);
});
// 每帧：cursorMix = lerp(cursorMix, targetMix, 0.08) 做阻尼

② 横滑图集轮播 Swipe Gallery Carousel

机制：图片沿 X 轴排成一排，竖滑 / 滚轮把它横移（把 scroll 映射成 carousel 的 translateX），到每张图时「对齐」到视口中心，用 sticky + scroll-driven offset 实现「滚动一条纵轴、看一条横轴画廊」。GSAP ScrollTrigger 一行就能把 scroll 接到 x。

// Lenis 平滑滚 + GSAP 把 3 屏的滚动区映射成画廊横移
gsap.to(track, {
  x: () => -(track.scrollWidth - innerWidth),
  ease: "none",
  scrollTrigger: { trigger: wrap, start: "top top",
    end: () => "+=" + (track.scrollWidth - innerWidth),
    scrub: 0.6, pin: true, invalidateOnRefresh: true }
});

③ 滚动驱动的镜头推移 Camera Push

机制：不推画面、推相机——把整段 3D 场景的推进节奏交给滚动进度（progress 0→1 驱动相机沿一条路径 moveAlongPath），读者滚一下，镜头就往前推一格，画面有「被牵着走」的电影临场感。这是 scroll-driven 3D 的招牌用法。

// 相机沿 CatmullRom 路径推进，progress 由 ScrollTrigger scrub 提供
gsap.to(cameraState, {
  progress: 1, ease: "none",
  scrollTrigger: { trigger: scene, start: "top top",
    end: "bottom bottom", scrub: true }
});
// 每帧：camera.position.copy(path.getPointAt(cameraState.progress));
//       camera.lookAt(path.getPointAt(Math.min(cameraState.progress+0.04,1)) );

④ 滚动驱动的故障切景 Scroll-driven Glitch Cut

机制：镜头在两个场景间「跳切」的瞬间，叠加一层故障（RGB 错位 + 扫描线 + 随机位移抖动），让「切」变得有能量。用 shader 在切点 200ms 内拉满 glitch 强度、随后衰减最干净，纯 CSS 抖动容易糊。

// 切点触发：glitchAmt 冲到 1，随后指数衰减
glitchAmt = 1;
// 每帧：glitchAmt *= 0.85;  shader 里用 glitchAmt 调制 uv 横向错位 + 通道分离
vec2 off = vec2(sin(uv.y*40.0)*0.01, 0.0) * glitchAmt;   // 横向撕裂
col.r = texture(tex, uv + off).r;                          // RGB 通道错位
col.b = texture(tex, uv - off).b;

⑤ 光标驱动的镜头环绕 Cursor Camera Orbit

机制：把光标 X/Y 映射成相机的方位角 / 俯仰角，让镜头绕着主体「转」——光标在画面左，相机就在主体右侧往左看，反之亦然，主体始终居中，靠视差造出深度。就是电影里最经典的 Orbit / Circular Dolly，搬到网页上由鼠标驱动。

// 光标 → 球面坐标（theta 方位角 / phi 俯仰角）→ 相机位置
theta = (cursorX / innerWidth) * Math.PI - Math.PI/2;
phi   = (cursorY / innerHeight) * Math.PI/2;
r = orbitRadius;
camera.position.setFromSpherical(r, phi, theta);
camera.lookAt(0, subjectY, 0);   // 每帧 lerp 平滑，别硬跟

三、落地工具：这 5 种该配什么库（均 GitHub API 实查）

骨架里的 scrub、pin、invalidateOnRefresh 是 GSAP 侧；3D 那 3 种的 getPointAt / setFromSpherical 是 Three.js 侧；横滑在 React 项目里可整段换成 Framer Motion 的 useScroll + useTransform。

四、怎么把 5 种串成一条「电影感」叙事

单独用一个是「炫技」，串起来才是「叙事」。一套可复用的节奏：开篇 Camera Orbit（光标环绕，先让主体转起来立空间）→ 推进用 Camera Push（滚动牵着镜头进入）→ 关键处 Glitch Cut（切场景带能量）→ 用 Hotspot Exploded（光标拆解看内部）→ 收尾 Swipe Gallery（横滑把一组成果并排铺开）。顺序本身就是「进入—深入—揭示—总结」的电影结构，5 种技法各占一个叙事节拍，互相不打架。

五、边界与坑

• 性能先于炫：Three.js + 全屏 WebGL 在低端机 / 手机上会卡，热点拆解的零件数、环绕的采样半径都要按设备降级；Glitch 的 shader 只在切点那 200ms 开，别常驻。
• 滚动别抢用户的：scroll-driven 一旦用 pin 就把滚动「劫持」了，务必配 Lenis 平滑滚 + 提供 prefers-reduced-motion 降级（直接给静态图）。
• 光标只在桌面：4 种 cursor-driven 里，触屏没有「光标」，要退化成「手指按住拖动」或用陀螺仪，移动端得重做一套输入映射，别指望一套代码通吃。
• 数据红线：这 5 个名字是技法词、不是可查名的产品（GitHub 搜均 0），正文只给实现骨架，不挂任何「某某库的某预设」的假仓库链接；上面 4 个实现库的星数是 2026-10-10 API 实查，非口播。

六、我的判断

视频把这 5 个当「必会动效」推，值得学的不是某个具体效果，而是「把光标 / 滚动当摇杆、用镜头语言组织一个网页」这套思路——它把网页从「往下滑刷内容」升级成「被镜头带着走一段」，这正是现在创意 studio（scaleus.in 那类）卖单贵的原因。真正要下功夫的是①拆解和⑤环绕这种 3D 运镜（靠 Three.js 相机 + lerp 阻尼），它们最出「高级感」也最容易被抄；②横滑和④故障是「加分项」，③推移是「骨架项」（没有它整条线就散了）。落地顺序建议：先 Lenis 把平滑滚接好 → 用 ScrollTrigger 做③推进当主干 → 再叠 Three.js 的①⑤上量 → 最后②④点缀。跟站内 《GSAP 技能包》、《ThreeUI 3D 网页模板》是互补关系：那两篇是「库 / 模板」，这篇是「镜头语言」，合起来就是一套能直接开做的网页动效方法论。