{"id":"frame-glitch-title","name":"frame-glitch-title","summary":"デジタルグリッチ/散乱オフセット/データ破損タイトル、ビデオトランジション/サイバーパンクヒーローに適している","body":"【模板: 故障艺术标题帧 (Glitch Title)】\n【意图】单帧 hero / 视频转场 / cyberpunk 风格标题。Inspired by hyperframes glitch。\n\n【画布】1920×1080, 背景 `#070708` 近黑或 CRT 暗灰 `#0d0e10`; 加 56px 网格 (透明 5%) + scanlines 横线 (透明 8%, 2px 间隔)。\n\n【主标题】\n- 居中, 6-9vw, weight 800/900, 字体 `Space Grotesk Bold` / `Inter Tight Black` / `JetBrains Mono Bold`。\n- 颜色: 主层 `#f5f5f7`; 后面套 2 层伪影:\n  - cyan `#00f0ff` translate(`-3px`, `1px`)。\n  - magenta `#ff2bd6` translate(`3px`, `-1px`)。\n- 整层加 clip-path 切片 5-8 段, 每段 `@keyframes` 随机 translateX -10px → 10px, 持续 80-160ms, 错峰播放, 营造 \"data corruption\" 像散。\n- 每隔 1.5s 触发一次\"重故障\" — 整个标题被 horizontal smear 1 frame, 用 `filter: url(#displacementFilter)` 或简单 CSS 平移。\n\n【附加层】\n- 顶部一行 caption (uppercase mono, 11px, opacity 0.6): `>> SIGNAL_LOST · CH-04 · 14:32:08`。\n- 标题下面 1 行副标 (24-28px, mono, opacity 0.7), 偶发被 ` ̶▒̶` 字符替换 (假乱码)。\n- 角落随机点缀 `█▓▒░` ASCII 噪点 chunks。\n- 底部 timecode (mono, opacity 0.4)。\n- 整画面叠 noise grain 层 `background-image: url(\"data:image/svg+xml,...turbulence...\")`, opacity 6%, mix-blend-mode overlay。\n\n【SVG 滤镜 (可选)】\n- 定义 `<filter id=\"rgbShift\">` 用 `feColorMatrix` + `feOffset` + `feMerge` 把 R/G/B 三通道偏移; 整层 `filter: url(#rgbShift)` 在故障瞬间应用。\n\n【设计细节】\n- 颜色仅用: 黑 / 白 / cyan / magenta / 一点 amber 警告色; 严禁全彩虹。\n- 字体: 西文 `Space Grotesk` 或 `JetBrains Mono` Bold; 中文 `Noto Sans Mono CJK SC` 或 `Noto Sans SC` Bold。\n- 严禁 lorem ipsum; 必须用用户的标题 + 副标。\n- 动效用 `@keyframes`, 可被 `prefers-reduced-motion` 关闭 (退回静态 chromatic split)。\n- 单文件 HTML。","author":"@nexu-io","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/frame-glitch-title","license":"Apache-2.0","category":"video","lang":"en","tokens":682,"stars":0,"calls30d":2,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[{"path":"example.html","size":4939,"sha256":"0580a4fd775ec38f2af0282fac3b3b73aa5eb8c0d574c0419c09e19211d21e2b"},{"path":"example.md","size":221,"sha256":"a23a9d1e16ec0a7b08a3275796d89d109f554b9e011958597591a7cf879ef198"}],"requires":{"mcp":[],"tools":[]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":["cdn.tailwindcss.com"]}}