frame-glitch-title

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Chinese

【模板: 故障艺术标题帧 (Glitch Title)】【意图】单帧 hero / 视频转场 / cyberpunk 风格标题。Inspired by hyperframes glitch。

【画布】1920×1080, 背景

#070708

近黑或 CRT 暗灰

#0d0e10

; 加 56px 网格 (透明 5%) + scanlines 横线 (透明 8%, 2px 间隔)。

【主标题】

居中, 6-9vw, weight 800/900, 字体

Space Grotesk Bold

Inter Tight Black

JetBrains Mono Bold

。

颜色: 主层
```
#f5f5f7
```
; 后面套 2 层伪影:
- cyan
```
#00f0ff
```
  translate(
```
-3px
```
  ,
```
1px
```
  )。
- magenta
```
#ff2bd6
```
  translate(
```
3px
```
  ,
```
-1px
```
  )。
整层加 clip-path 切片 5-8 段, 每段
```
@keyframes
```
随机 translateX -10px → 10px, 持续 80-160ms, 错峰播放, 营造 "data corruption" 像散。
每隔 1.5s 触发一次"重故障" — 整个标题被 horizontal smear 1 frame, 用
```
filter: url(#displacementFilter)
```
或简单 CSS 平移。

【附加层】

顶部一行 caption (uppercase mono, 11px, opacity 0.6):
```
>> SIGNAL_LOST · CH-04 · 14:32:08
```
。
标题下面 1 行副标 (24-28px, mono, opacity 0.7), 偶发被
```
 ̶▒̶
```
字符替换 (假乱码)。
角落随机点缀
```
█▓▒░
```
ASCII 噪点 chunks。
底部 timecode (mono, opacity 0.4)。
整画面叠 noise grain 层
```
background-image: url("data:image/svg+xml,...turbulence...")
```
, opacity 6%, mix-blend-mode overlay。

【SVG 滤镜 (可选)】

定义

<filter id="rgbShift">

用

feColorMatrix

feOffset

feMerge

把 R/G/B 三通道偏移; 整层

filter: url(#rgbShift)

在故障瞬间应用。

【设计细节】

字体: 西文

Space Grotesk

或

JetBrains Mono

Bold; 中文

Noto Sans Mono CJK SC

或

Noto Sans SC

Bold。

【模板: 故障艺术标题帧 (Glitch Title)】【意图】单帧主视觉 / 视频转场 / 赛博朋克风格标题。Inspired by hyperframes glitch。

【画布】1920×1080, 背景色为

#070708

（近黑色）或 CRT 暗灰色

#0d0e10

; 添加 56px 网格（透明度 5%）+ 扫描线横线（透明度 8%, 2px 间距）。

【主标题】

居中对齐, 字号 6-9vw, 字重 800/900, 字体采用
```
Space Grotesk Bold
```
/
```
Inter Tight Black
```
/
```
JetBrains Mono Bold
```
。
颜色: 主图层
```
#f5f5f7
```
; 后方叠加 2 层伪影:
- 青色
```
#00f0ff
```
  ，偏移量
```
translate(-3px, 1px)
```
  。
- 品红色
```
#ff2bd6
```
  ，偏移量
```
translate(3px, -1px)
```
  。
整层添加 clip-path 切片 5-8 段, 每段通过
```
@keyframes
```
实现随机 X 轴平移 -10px → 10px, 持续 80-160ms, 错峰播放, 营造 "数据损坏" 的像散效果。
每隔 1.5s 触发一次"重度故障" — 整个标题产生 1 帧水平拖影, 可使用
```
filter: url(#displacementFilter)
```
或简单 CSS 平移实现。

【附加层】

顶部一行说明文字（大写等宽字体, 11px, 透明度 0.6）:
```
>> SIGNAL_LOST · CH-04 · 14:32:08
```
。
标题下方一行副标题（24-28px, 等宽字体, 透明度 0.7）, 偶尔被
```
 ̶▒̶
```
字符替换（模拟乱码）。
角落随机点缀
```
█▓▒░
```
ASCII 噪点块。
底部时间码（等宽字体, 透明度 0.4）。
整画面叠加噪点纹理层
```
background-image: url("data:image/svg+xml,...turbulence...")
```
, 透明度 6%, 混合模式为 overlay。

【SVG 滤镜 (可选)】

【设计细节】

字体: 西文采用

Space Grotesk

或

JetBrains Mono

Bold; 中文采用

Noto Sans Mono CJK SC

或

Noto Sans SC

Bold。