用途:overdrive 面向需要突破常规视觉表现的前端场景,当设计需求要求做出让用户追问“这是怎么实现的”效果时使用。
主要能力:资料列出的可能效果包括 WebGL 背景着色器(噪声场、流体模拟)、UI 元素上的弹簧物理(对话框入场、卡片交互)、滚动驱动的 3D CSS 变换(视差层、卡片倾斜)、Canvas 粒子系统(环境漂浮元素)、SVG 形变动画、滚动驱动动画 API(现代浏览器)、用于页面切换的 View Transitions API,以及 GPU 加速的模糊/发光效果。
使用规则与限制:每页最多使用一个 overdrive 效果,两个竞争性效果会相互抵消;必须优雅降级,例如检测 WebGL 支持、处理 reduce-motion 等偏好;性能预算为最低 60fps,且不得造成布局抖动;不得干扰内容可读性或导航;效果应强化设计方向而非分散注意力。
适用场景:适合营销落地页、作品集、产品发布页等需要强视觉记忆点的界面。
其他信息:资料未提供具体安装命令、代码示例、收费方式与平台支持细节,暂未提供。