Blue Archive / 蔚蓝档案 style mouse click effect and cursor trail animation for web. Click, drag, or move your mouse to preview the effect.
ba-click-fx uses Full WebGL2 by default with optional standard WebGPU and WebGPU HDR modes, plus safe Canvas 2D fallbacks. Zero external dependencies.
npm
npm install ba-click-fxCDN
<script type="module">
import { BAClickFX } from 'https://cdn.jsdelivr.net/npm/ba-click-fx@1.3.2/dist/ba-click-fx.js';
const fx = new BAClickFX();
</script>ba-click-fx 和蔚蓝档案有关吗？ 这是一个受蔚蓝档案 UI 点击和拖尾效果启发的粉丝向视觉特效库。
需要图片素材或 WebGL 吗？ 不需要图片素材；默认使用纯 WebGL2，可选标准 WebGPU 或 WebGPU HDR，能力不足时自动回退 WebGL2、Canvas 2D、软件 Bloom 与原生辉光，零外部运行时依赖。
WebGPU 一定会显示真实 HDR 吗？ 不会。只有 resolvedWebGPUOutputMode === 'extended' 才表示 Canvas 会以扩展 sRGB 编码保留超过 SDR 白色的高光；还需要 HDR 显示器、系统 HDR 和浏览器 WebGPU HDR Canvas 同时可用。
移动端浏览器滑动时为什么没有轨迹拖尾？ “触摸行为”为“自动”或“直接操作”时，浏览器会优先接管滚动并发送 pointercancel，拖尾随之中止。将控制面板中的“触摸行为”切换为“禁止默认手势”，即可在任意滑动方向持续触发拖尾；页面仍需单轴滚动时，可选择“仅横向平移”或“仅纵向平移”，库只在浏览器未接管的方向保留拖尾。此设置也会改变页面的原生滚动与缩放手势。
内置主题和自定义图片背景怎样参与游戏式合成？ 页面主题始终由 CSS 单独显示。特效背景参考可选择“匹配当前页面”或“未知透明背景”：前者把内置主题或已解码图片送入渲染器，后者不读取页面背景并保留透明宿主的 Coverage 合同。纯白主题在关闭“隔离合成”时保留接近游戏原始的低可见度；开启后会自动使用 lightBackgroundContrastAlpha: 0.35 补足网页白底可见性。本地图片选择器会创建当前页面有效的 blob: URL，不需要 CORS，但刷新后需重新选择；手输 file:// 会交给允许读取本地协议且允许作为 Canvas/WebGL 纹理使用的受信任桌面宿主；普通 HTTP/HTTPS 页面仍受浏览器本地资源权限限制，请使用本地图片选择器。任意自定义 CSS 渐变或多图层背景无法可靠自动上传，仍作为普通 DOM 背景显示。
纯白背景下特效颜色太浅？ 关闭“隔离合成”时会保留游戏原始的低可见度表现；开启后，展示页自动叠加不参与 Bloom 的淡青对比轮廓，使效果在常见网页白底上保持可见。其他宿主也可按需显式设置 lightBackgroundContrastAlpha。
透明桌面应怎样选择合成模式？ 展示页和严格游戏还原保留默认 scene；WebView2、Electron 等透明宿主显式使用 browser-overlay。未知背景下，标准 source-over 无法同时实现严格 Unity 加色、纯 Coverage Alpha 和白底绝不变暗；隔离合成不会读取桌面，已知背景应通过 setCompositingReference() 提供给渲染器。
能用在博客或个人主页吗？ 可以，支持 npm、CDN 和直接 script 引入三种方式。
const fx = new BAClickFX({ inputSource: 'manual' });
fx.pointerDown({ x, y, pointerId });
fx.pointerMove({ x, y, pointerId });
fx.pointerUp(pointerId);
fx.pointerCancel(pointerId);
fx.setInputSamplingRate(30);
fx.updateConfig({ clickTimeScale: 1.5, trailTimeScale: 0.8 });
fx.setPaused(true, { clear: true });