Glitch UI Glitch UI Glitch UI

问题

市面上的故障风效果基本都是「写死的一串 keyframes」，复制进项目就失控： 时长不统一、无法降级、在 prefers-reduced-motion 下照样抖。

方案

把故障拆成三层可组合的原语：

1. channel-split — RGB 通道分离，纯 CSS text-shadow 实现，零 JS
2. displacement — SVG feTurbulence + feDisplacementMap 液态扭曲，只在 hover 时挂载
3. scanline — 扫描线与噪点，用一张 2KB 的平铺纹理

每个原语都通过 CSS 变量暴露强度、时长、通道偏移：

.glitch { --glitch-shift: 2px; --glitch-duration: 240ms; }
@media (prefers-reduced-motion: reduce) { .glitch { --glitch-shift: 0px; } }

关键决策

为什么用 Web Components 而不是 React：这样它能被任何框架（甚至纯 HTML 页面）引用， 而我不需要维护三份框架适配。

为什么坚持零 JS 降级：故障效果如果不能在不运行 JS 时安全退化， 它就不该出现在生产环境里。所有动效的「最终态」都是静态可读的。

复盘

最初我给每个组件都加了 intensity 属性（low/medium/high）， 实际用下来发现大家只会用默认值，于是收敛成一个全局 CSS 变量，API 少了一半。