用 WebGL 还原 risk.film 的 band mask：
一次像素级考古
risk.film 的标题入场有一种奇怪的物质感：文字不是淡入的，是像百叶窗一样「碎着进来」的。第一眼以为是视频，第二眼以为是 canvas，逐帧抓下来才发现——比想象的简单，也比想象的讲究。这篇是完整的考古记录。你现在看到的这个站，就是这次还原的副产品。
01逐帧观察：它到底在动什么
把入场动画逐帧截下来对比，规律立刻浮出来：标题被水平切成了若干条横带，每一条独立地从侧面滑入，相邻的条带方向相反、时机错开。因为条带切口完全贴合，滑到位的瞬间又严丝合缝拼回一个整体——「碎着进来、完整落地」的物质感就是这么来的。
再看卡片 hover：不是横带，是若干条纵向色带依次擦过（scaleX 从 0 到 1），像一排百叶翻转。两个动效同一套语言：把整体切成条，让条带异步。
02还原：clip-path 切带 + 交错位移
标题部分不需要 WebGL，纯 DOM 就够。核心是给同一段文字叠 N 层副本，每层用 clip-path: inset() 只露出自己那一条：
const BANDS = 6;
for (let i = 0; i < BANDS; i++) {
const top = (i / BANDS) * 100;
const bot = 100 - ((i + 1) / BANDS) * 100;
b.style.clipPath = `inset(${top}% -2% ${bot}% -2%)`;
b.style.transform = `translateX(${(i % 2 ? -1 : 1) * (30 + i * 14)}px)`;
b.style.transition =
`transform 0.9s ${0.05 * i}s cubic-bezier(0.16,1,0.3,1),
opacity 0.5s ${0.05 * i}s linear`;
}三个决定手感的细节：横向 inset 给 -2%（防止字形边缘被切出发丝缝）；奇偶条带反向且位移量随序号递增（30 + i×14），碎得才不机械；缓动用 cubic-bezier(0.16, 1, 0.3, 1)——大力出发、轻轻落地，这条曲线几乎就是「高级感」本身。
卡片 wipe 更简单：五个 <i> 撑满卡片，transform: scaleX(0) 起步，hover 时依次拉满，transition-delay 每条错 45ms——阶梯就是节奏。
再问「切出来的各部分，时间上错开了多少」。
绝大多数高级入场，都是这两个问题的答案。
03那 WebGL 用在哪了
还原完 band mask 之后手痒，把「切条错位」这个思路搬进了 shader：如果条带不是六条，是每行字符？如果错位不是入场一次，是信号不稳时随机发生？——这两个问题的答案，就是你现在首页看到的 ASCII 渲染器和它的掉线撕裂（Pass B 里按行 tear、按格 scramble）。
所以说这个站是副产品：先有一次较真的还原，后有一整套自己的视觉语言。抄一个效果的最好方式，是把它拆到能长出你自己的东西。
> 拆解不是为了复刻，是为了长出新的。接口未稳，下次重连_