在设置页里编写自己的 Canvas 动态壁纸，和内置的 16 种动效共用同一套密度/速度/配色控件，写完就能在任意站点直接选用。
PageDye 扩展内置了 16 种 Canvas 动效壁纸（Matrix 雨、粒子、极光、雪花、打字机等）。这些内置效果背后其实都是同一种形状的引擎对象——自定义动效 API 就是把这套形状开放出来：你在设置页的「自定义动效」里写一段代码，PageDye 在本地编译它，运行方式和内置效果完全一样，也能被同一套「密度 / 速度 / 配色预设」控件调节。
仅浏览器扩展版支持。PageDye Lite（用户脚本）和本站右下角的体验版 widget 目前还没有这个功能。
代码需要返回一个对象，包含以下方法：
init(cfg)创建这个动效实例第一次运行时的状态，返回值会在后续每次调用里被传回来。cfg 是当前的密度/速度/配色设置（见下）。
resize(state, width, height)画布尺寸变化时调用（含首次绘制前），用来重新计算依赖尺寸的东西，比如粒子数量、网格列数。
draw(ctx, canvas, state, dt)每一帧调用一次，dt 是距上一帧的毫秒数。在这里往 ctx（Canvas 2D 上下文）上画东西。
onMouseMove(state, e, canvas) （可选）不写就没有鼠标交互。写了的话，鼠标在页面上移动时会被调用，可以用来做跟随光标的效果（内置的 Particles 效果就是这样用的）。
这些都是设置页里对应控件的当前值，用户随时可以改，你的动效应该实时响应，不用自己另外做设置界面。
color前景色（十六进制）
bgColor背景色（十六进制）
density密度，0-100，例如粒子/线条的数量
speed速度，0-100，动画播放快慢
text文本内容（打字机等效果会用到）
代码是独立编译的，拿不到 PageDye 内部的私有函数，需要通过 window.PageDyeEffects.helpers 调用：
helpers.hexToRgba(hex, alpha)十六进制颜色转 rgba(...) 字符串，方便画半透明的线条/填充。
helpers.effectSpeedMultiplier(speed)把 0-100 的速度值映射成 0.4x-2x 的倍率，内置效果都用它来统一"慢/正常/快"的手感。
helpers.clampPercent(n, fallback)把一个数字夹到 0-100 范围，非法值时退回 fallback。
一个跟随密度/速度呼吸的圆点——设置页新建动效时选「空白骨架」模板就是这段代码：
return {
init(cfg) {
return { width: 0, height: 0, t: 0, cfg };
},
resize(state, width, height) {
state.width = width;
state.height = height;
},
draw(ctx, canvas, state, dt) {
const { width, height, cfg } = state;
if (!width || !height) return;
state.t += dt;
ctx.fillStyle = cfg.bgColor;
ctx.fillRect(0, 0, width, height);
const helpers = window.PageDyeEffects.helpers;
const speedMul = helpers.effectSpeedMultiplier(cfg.speed);
const r = 20 + (cfg.density / 100) * 40 + 10 * Math.sin(state.t * 0.003 * speedMul);
ctx.fillStyle = cfg.color;
ctx.beginPath();
ctx.arc(width / 2, height / 2, Math.max(4, r), 0, Math.PI * 2);
ctx.fill();
}
};代码在本地编译执行（new Function），从不上传、不联网获取——和已有的「自定义 CSS」注入是同一个信任边界：只在你自己选中该动效的网站上运行，不会被远程代码替换。但它没有沙箱隔离，写一个死循环的 draw() 会卡住那个标签页，这点和在浏览器控制台里直接跑代码是一样的风险，请只运行你自己写的或信任来源的代码。
动效运行时出错会被自动接住：画面定格在最后一帧并停止，不会刷屏报错或把整个页面弄崩，方便你在编辑器里一眼看出问题在哪。