用途:创建或修复柔和的光标拖尾揭示效果,基础图始终可见,揭示图仅通过渐隐遮罩出现。核心公式:final = baseImage + revealImage * softCursorTrailMask。
模式:build 从零创建(可基于 vanilla 模板);repair 诊断图片加载、遮罩合成、指针处理、滑块、渐隐、缩放或缓存问题;tune 调整半径、羽化、渐隐、强度、不透明度与惯性;validate 运行浏览器/画布检查并查看截图。
工作流:若不确定两层图片是否对齐,先用 $image-layer-alignment-validator;识别项目技术栈,优先沿用现有框架与资源管线;vanilla 实现可复制 assets/vanilla-template/ 并替换图片路径;页面聚焦揭示表面,不添加营销文案或无关内容;按 references/canvas-compositing.md 实现画布架构;提供半径、羽化、渐隐、强度、不透明度、惯性的直接控件;开发构建中可暴露 window.revealSettings 与清除遮罩函数;有浏览器目标时对本地 URL 运行 scripts/smoke-check-reveal.mjs;报告改动文件、当前调优值与验证结果。
实现规则:一个可见画布加遮罩与揭示层的离屏画布;按设备像素比渲染并保持 CSS 尺寸稳定;使用指针事件处理鼠标、触摸与笔输入;用柔和径向渐变而非硬悬停圆;用 destination-out 渐隐旧遮罩;用 destination-in 将遮罩应用到揭示层;每帧先绘制基础层再绘制被遮罩的揭示层;控件值变化时清除累积遮罩;静态文件被缓存时更新缓存破坏参数或强制刷新。
常见修复:滑块动但设置不变需绑定 input 与 change、更新 textContent 并在设置后清遮罩;揭示像硬放大镜需增大羽化、半径与渐隐平滑度,必要时降低不透明度;拖尾不消失需增大渐隐或确认遮罩画布应用了 destination-out;揭示图始终可见需检查 globalCompositeOperation、遮罩重置与揭示画布清除顺序;画布模糊需修正 DPR 缩放与缩放处理;缩放后效果损坏需重建所有画布后备存储并重绘。
安全与隐私:除非用户明确要求外部生成、托管或分析,图片资源保持本地;调优时不要覆盖原始基础/揭示资源;除非项目已使用且用户需要,不添加分析、远程跟踪或第三方运行时依赖;浏览器验证优先本地 URL 与文件 URL,未经明确授权不要自动化需认证或私有的生产页面。
验证:有 URL 时用 scripts/smoke-check-reveal.mjs;自动检查后仍需查看截图或实时页面,冒烟通过不代表视觉质量;改动控件后手动验证滑块;调整视口与缓存破坏参数后重新测试。
资源:实现或修复核心渲染循环前读 references/canvas-compositing.md;调整手感或诊断控件时读 references/tuning-and-failure-modes.md;最终视觉检查前读 references/browser-validation.md;独立 HTML/CSS/JS 起步可复制 assets/vanilla-template/;有本地 URL 时运行 scripts/smoke-check-reveal.mjs 获取浏览器证据。