frame-glitch-title

Original：🇺🇸 English

Translated

数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero

3installs

Added on2026-05-16

NPX Install

npx skill4agent add nexu-io/open-design frame-glitch-title

【模板: 故障艺术标题帧 (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。