请制作一个可以在浏览器直接打开的单文件 HTML 动态示例，实现「故障错位」（风格特效）。

视觉目标：水平切片错位，叠加彩色通道偏移。
适用场景：科技、电子音乐、悬疑
输入素材：使用两张高清照片，保持比例居中裁切，不拉伸画面。
实现要求：原生 JavaScript + Canvas 2D，画布 960×540，requestAnimationFrame 按秒驱动，循环周期 4.8 秒。支持暂停、重播，文字效果支持编辑文字。画布缩放时保持 16:9，不依赖框架、在线字体或 AI 接口。

效果边界：可直接用图片。短促点缀比全片持续干扰更容易保留主体。

请按下列现有核心逻辑复现，并补齐共享变量与渲染初始化；需要精确复现时配合图鉴中的完整 HTML，不要只复制片段：
// fx-9 · 故障错位
// 摘自 fx(i, t)；依赖该函数的时间、画布及素材初始化。
// 完整可运行版本请切换「完整 HTML」。
if(i===9){imageFit(p<.5?a:b);const m=Math.sin(p*Math.PI);for(let k=0;k<14;k++){const y=(k*73+Math.floor(t*8)*31)%H,h=8+(k*7)%23,dx=Math.sin(k*8+t*21)*55*m;withClip(()=>ctx.rect(0,y,W,h),()=>imageFit(p<.5?a:b,dx,0))}ctx.globalCompositeOperation='screen';ctx.globalAlpha=.16*m;ctx.fillStyle='#04b7e2';ctx.fillRect(0,110,W,7);ctx.fillStyle='#e02074';ctx.fillRect(0,390,W,5);ctx.globalAlpha=1;ctx.globalCompositeOperation='source-over';
 }

// 每帧调用，t 的单位是秒：
clean();
fx(9, t);

交付完整可运行代码，解释可调参数；先确保上述效果，再调整速度、颜色或强度。检查循环首尾、暂停状态、图片载入失败和短标题可读性。