Overdrive 是一个前端界面增强技能，目标是把界面推到常规极限之外。它强调的不只是视觉效果，而是利用浏览器的完整能力，让界面的任何部分都显得非凡：能处理百万行的表格、从触发按钮变形而来的对话框、带流式反馈的实时校验表单、具有电影感的页面过渡。
用途与定位
该技能用于增强界面“感觉”，而不是改变产品“功能”。增加实时协作、离线支持或新的后端能力属于产品决策，不属于 UI 增强。它聚焦于让已有功能显得非凡。
强制准备
必须调用 /impeccable，其中包含设计原则、反模式与上下文收集协议。需先遵循该协议；如果尚不存在设计上下文，必须先运行 /impeccable teach。上下文决定“非凡”在此处的含义：创意作品集上的粒子系统令人印象深刻，同样的粒子系统出现在设置页则很尴尬；但一个带即时乐观保存与动画状态过渡的设置页同样可以非凡。
先提议再构建
该技能最容易误用，因此不得直接进入实现。必须：思考 2-3 个不同方向，考虑不同技术、野心程度与美学取向，并简要描述每个方向的结果观感；直接向用户询问无法推断的信息，展示这些方向并让用户选择，再写任何代码；解释权衡（浏览器支持、性能成本、复杂度）。只有用户确认的方向才可继续。跳过此步骤可能导致做出需要丢弃的尴尬结果。
用浏览器自动化迭代
技术上大胆的效果几乎不会一次成功。必须主动使用浏览器自动化工具预览、视觉验证并迭代。不要假设效果看起来正确，要实际检查。预期多轮打磨。“技术上可用”与“看起来非凡”之间的差距，靠视觉迭代而非仅靠代码来弥合。
评估“非凡”在此处的含义
正确的技术野心取决于所处理的界面。选择技术前先问：什么会让这个特定界面的用户说“哇，不错”？
视觉/营销界面：页面、主视觉区、落地页、作品集——“哇”通常是感官性的：滚动驱动揭示、着色器背景、电影感页面过渡、响应光标的生成艺术。
功能性 UI：表格、表单、对话框、导航——“哇”在于感觉：通过 View Transitions 从触发按钮变形而来的对话框、通过虚拟滚动以 60fps 渲染 10 万行的数据表、带流式校验且感觉即时的表单、带弹簧物理的拖放。
性能关键 UI：“哇”不可见但可感知：搜索在无闪烁的情况下过滤 5 万个条目、复杂表单从不阻塞主线程、图像编辑器近乎实时处理。界面从不迟疑。
数据密集型界面：图表与仪表盘——“哇”在于流畅性：用 Canvas/WebGL 为大规模数据集做 GPU 加速渲染、数据状态之间的动画过渡、自然收敛的力导向图布局。
共同点：实现方式在某个方面超出用户对网页界面的预期。技术服务于体验，而非相反。
工具箱（按目标而非技术名组织）
让过渡具有电影感：View Transitions API（同文档：所有浏览器；跨文档：Firefox 不支持）用于状态间的共享元素变形，如列表项展开为详情页、按钮变形为对话框，这是最接近原生 FLIP 动画的方案；@starting-style（所有浏览器）仅用 CSS 让元素从 display: none 动画到可见，包括入场关键帧；弹簧物理用质量、张力与阻尼实现自然运动，替代 cubic-bezier，可用 motion（原 Framer Motion）、GSAP 或自写弹簧求解器。
把动画绑定到滚动位置：滚动驱动动画（animation-timeline: scroll()）纯 CSS、无需 JS，视差、进度条、揭示序列都由滚动位置驱动（Chrome/Edge/Safari；Firefox 仅标志，必须提供静态回退）。
超越 CSS 的渲染：WebGL（所有浏览器）用于着色器效果、后处理、粒子系统，可用 Three.js、OGL（轻量）、regl，用于 CSS 无法表达的效果；WebGPU（Chrome/Edge；Safari 部分；Firefox 仅标志）是下一代 GPU 计算，比 WebGL 更强但浏览器支持有限，必须回退到 WebGL2；Canvas 2D / OffscreenCanvas 用于自定义渲染、像素操作，或通过 Web Workers + OffscreenCanvas 把重渲染完全移出主线程；SVG 滤镜链用于位移贴图、湍流、形态学等有机扭曲效果，可用 CSS 动画。
让数据活起来：虚拟滚动只渲染可见行，用于数万条目的表格/列表，简单场景无需库，复杂场景可用 TanStack Virtual；GPU 加速图表用 Canvas 或 WebGL 渲染对 SVG/DOM 而言过大的数据集，可用 deck.gl、基于 regl 的自定义渲染器；动画数据过渡在图表状态间变形而非替换，DOM 图表可用 D3 的 transition() 或 View Transitions。
动画复杂属性：@property（所有浏览器）注册带类型的自定义 CSS 属性，使渐变、颜色等 CSS 通常无法插值的复杂值可动画；Web Animations API（所有浏览器）用 JavaScript 驱动动画并具备 CSS 的性能，可组合、可取消、可反转，是复杂编排的基础。
突破性能边界：Web Workers 把计算移出主线程，用于重数据处理、图像操作、搜索索引等任何会造成卡顿的任务；OffscreenCanvas 在 Worker 线程渲染，主线程保持空闲；WASM 为计算密集功能提供接近原生的性能，如图像处理、物理模拟、编解码器。
与设备交互：Web Audio API 用于空间音频、音频响应可视化、声音反馈，需要用户手势才能启动；设备 API 包括方向、环境光、地理位置，需谨慎使用并始终获得用户许可。
有纪律地实现
渐进增强不可妥协：每种技术都必须优雅降级，没有增强时的体验仍须良好。示例包括用 @supports (animation-timeline: scroll()) 包裹滚动驱动动画，检测 WebGPU 后回退 WebGL2，并保证纯 CSS 回退仍然好看。
性能规则：目标 60fps，若低于 50 则简化；始终尊重 prefers-reduced-motion，并提供漂亮的静态替代；仅在接近视口时惰性初始化重资源（WebGL 上下文、WASM 模块）；暂停屏幕外渲染，杀掉看不见的内容；在真实中端设备上测试，而不只是开发机。
打磨决定差异：“酷”与“非凡”之间的差距在最后 20% 的细化：弹簧动画的缓动曲线、交错揭示的时间偏移、让过渡感觉有物理感的细微次级运动。不要发布第一个能用的版本，要发布感觉必然如此的版本。
绝不要：忽略 prefers-reduced-motion（这是无障碍要求而非建议）；发布在中端设备上造成卡顿的效果；使用前沿 API 而没有可用回退；未经用户明确同意添加声音；用技术野心掩盖薄弱的设计基础（应先用其他技能修复）；叠加多个相互竞争的非凡时刻（聚焦产生冲击，过量产生噪音）。
验证结果
哇测试：给没见过的人看，他们有反应吗？移除测试：拿掉它，体验是否变弱，还是没人注意到？设备测试：在手机、平板、Chromebook 上运行，仍然流畅吗？无障碍测试：启用减少动态效果，仍然漂亮吗？上下文测试：这对这个品牌和受众有意义吗？
记住：“技术上非凡”不在于使用最新 API，而在于让界面做到用户没想到网站能做到的事。