SuperAPI AI 工具集

add-shader-cursor-trail

前端与建站

查看项目

更新于 10-15 21:09

技能介绍

用途:在宿主区块上以渐进增强方式实现 Shaders WebGPU 鼠标光标拖尾效果(白色闪烁半调拖尾,由 ChromaFlow 驱动,经 DotGrid 遮罩),同时保留区块的语义内容、图像、控件与静态首帧。

主要能力与用法:先检查框架、渲染模式、现有动效栈、图层顺序、减少动效规则与包管理器;不要新增平滑滚动引擎或替换区块内容。用现有包管理器安装 shaders,并按框架从对应子路径导入:shaders/react、shaders/vue、shaders/svelte 或 shaders/solid。实现前阅读 references/implementation.md,保持六个 shader 节点及其顺序、两个不可见驱动与两处 ID 关联不变。React/Next.js 可复制并改写 assets/react/ 中的文件,将轻量能力检测与重型 shader 模块分离,避免不合格访客请求 shader 包。在区块内容后方放置一个全出血、aria-hidden="true" 的 shader 图层,链接与控件置于其上;除非确认光标追踪使用全局事件,否则不要给 canvas 设置 pointer-events: none。加载需同时满足 WebGPU、精细悬停指针、正常动效/透明度偏好、文档可见、窗口聚焦与区块进入视口;区块离开视口时卸载以停止 GPU 工作。保留原图或深色背景作为完整回退,并在减少动效、减少透明度、粗指针/无悬停、强制颜色下隐藏该层。仅可调整不透明度、混合模式等呈现变量,不得把图改为装饰噪声、引入 WebGL/Three.js 或热链 Shaders 预览资源。

验证:运行项目的 lint、类型检查/测试与生产构建;React 实现还需运行 node /path/to/add-shader-cursor-trail/scripts/verify-cursor-trail.mjs 并传入 CursorTrailShader.tsx、CursorTrailGate.tsx、cursor-trail.css 路径。验证无 JavaScript 时的静态区块、图层上方内容的键盘可达性、触摸行为、减少动效、不支持 WebGPU、焦点/可见性清理,以及不向 previews.shaders.com 或 data.shaders.com 发起运行时请求。报告所选混合模式、回退、能力门控、生产构建结果与浏览器限制;未在兼容浏览器中实际验证时不得声称已完成 WebGPU 视觉验证。

限制:具体安装命令、版本与浏览器兼容范围资料未提供。