add-shader-cursor-trail

添加着色器光标轨迹

以渐进增强的方式实现完全一致的轨迹。保留宿主区块的语义内容、图像、控件和静态首帧。

工作流程

1. 检查框架、渲染模式、现有动效方案、图层顺序、减少动态效果的规则以及包管理器。不要添加另一款平滑滚动引擎，也不要替换区块的内容。
2. 使用现有包管理器安装 shaders。从对应的框架子路径导入：shaders/react、shaders/vue、shaders/svelte 或 shaders/solid。
3. 实现前阅读 references/implementation.md。保持六个着色器节点及其顺序、两个不可见驱动器和两条 ID 关联完全一致。
4. 对于 React 或 Next.js，复制并调整 assets/react/ 中的文件。将轻量级能力检查与庞大的着色器模块分开，以免不符合条件的访客请求着色器包。
5. 在区块内容后方放置一个铺满区域、aria-hidden="true" 的着色器图层。链接和控件必须位于其上方。除非确认光标跟踪使用全局事件，否则不要在画布上设置 pointer-events: none。
6. 仅在支持 WebGPU、使用精细悬停指针、动效和透明度偏好为正常、文档可见、窗口获得焦点且区块进入视口时加载。区块离开视口时卸载，以停止 GPU 运算。
7. 保留原图像或深色背景作为完整回退方案。对于减少动态效果、减少透明度、粗略指针或无悬停指针以及强制颜色模式，隐藏该图层。
8. 仅调整不透明度和混合模式等表现变量。不要将图形改为装饰性噪声，不要添加 WebGL/Three.js，也不要热链接 Shaders 预览资源。

验证

运行项目的 lint、类型检查/测试和生产构建。对于 React 实现，还要运行：

node /path/to/add-shader-cursor-trail/scripts/verify-cursor-trail.mjs \
  path/to/CursorTrailShader.tsx \
  path/to/CursorTrailGate.tsx \
  path/to/cursor-trail.css

验证在 JavaScript 不可用时区块仍为静态、可通过键盘访问图层上方的内容、触控行为、减少动态效果设置、WebGPU 不受支持的情况、焦点/可见性清理，以及运行时不会向 previews.shaders.com 或 data.shaders.com 发出请求。

报告所选的混合模式、回退方案、能力检查条件、生产构建结果以及任何浏览器限制。若未在兼容浏览器中实际验证 WebGPU 视觉效果，请勿声称已完成验证。