用途:制作单帧 hero、视频转场或赛博朋克风格标题画面,灵感来自 hyperframes glitch。
主要能力:画布 1920×1080,背景为近黑 #070708 或 CRT 暗灰 #0d0e10,叠加 56px 网格与 scanlines 横线。主标题居中,字号 6-9vw,字重 800/900,字体可用 Space Grotesk Bold、Inter Tight Black 或 JetBrains Mono Bold;主层颜色 #f5f5f7,后叠 cyan #00f0ff 与 magenta #ff2bd6 两层伪影并做位移。整层用 clip-path 切 5-8 段,每段以 @keyframes 随机 translateX -10px 到 10px,持续 80-160ms 错峰播放,形成数据损坏像散;每 1.5s 触发一次重故障,用 filter: url(#displacementFilter) 或 CSS 平移做水平拖影。附加层包括顶部 caption(uppercase mono,11px,opacity 0.6)、标题下副标(24-28px,mono,opacity 0.7,偶发假乱码替换)、角落 ASCII 噪点与底部 timecode。整画面叠 noise grain 层,opacity 6%,mix-blend-mode overlay。可选 SVG 滤镜 rgbShift 用 feColorMatrix、feOffset、feMerge 偏移 RGB 三通道。
使用方式:单文件 HTML 实现,替换为用户自己的标题与副标。
限制:颜色仅限黑、白、cyan、magenta 与少量 amber 警告色,禁止全彩虹;严禁 lorem ipsum;动效需可被 prefers-reduced-motion 关闭并退回静态 chromatic split。中文可用 Noto Sans Mono CJK SC 或 Noto Sans SC Bold。