网页动效拆解

为什么截图不够用

当你想参考一个网页的动效、交互或视觉效果——WebGL 着色器背景、Canvas 粒子、滚动驱动动画、动态排版、光标轨迹——截图只能拿到一个静止的帧。动画由哪个框架驱动、着色器做了什么、滚动触发器和缓动曲线是什么，这些运行时细节在图片里都看不见，靠人肉翻压缩后的 bundle 成本很高。

它如何工作

给定一个参考网页 URL，技能先确定要复刻的目标效果，然后在能执行页面脚本的浏览器上下文中抓取运行时证据：

• DOM 与样式证据：DOM 树、计算样式、CSS 变量、字体、动画名称
• 渲染管线证据：Canvas/WebGL 上下文属性、gl.shaderSource()、gl.uniform*()、gl.bindFramebuffer()、gl.drawArrays() 调用顺序，以及纹理和缓冲的初始化
• 框架线索：THREE、GSAP、Lenis、Framer Motion 等全局标记，网络请求里的 JS bundle 与静态资源清单

随后把这些证据压缩成一份紧凑的视觉模型：场景图、资产清单、材质清单、运动映射和交互映射。再按效果复杂度选择最简单的实现重建独立、可编辑的 Open Design 制品——静态 DOM/CSS、WAAPI、GSAP、Canvas 2D、原生 WebGL2 或 Three.js。最后在相同视口下做视觉一致性对比，按需生成 EXTRACTION-REPORT.md。

适用边界与注意点

• 只拆解视觉与交互逻辑；私有文案、业务逻辑、跟踪代码、认证流程和用户数据不在范围内，重建时会被替换
• 联网检索或调用接口前需说明目标与用途并取得明确同意，不绕过登录、付费墙或访问控制
• 浏览器工具不足时，应明确说明 shader 与运行时抓取可能不完整
• 重建会保留参考页的时间基准与色彩管理，为 prefers-reduced-motion 加降级，并区分观察到的事实与推测出的实现选择