Frame Glitch Title

Name: Frame Glitch Title
Author: nexu-io

nexu-io/open-design

1.6k installs
82k repo stars
Updated July 28, 2026
nexu-io/open-design

frame-glitch-title is an agent skill that digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.

About

frame-glitch-title is an agent skill from nexu-io/open-design that digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes. 【模板: 故障艺术标题帧 (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 `#00f Developers invoke frame-glitch-title during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.

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

Frame Glitch Title by the numbers

1,629 all-time installs (skills.sh)
+125 installs in the week ending Jul 28, 2026 (Skillselion tracking)
Ranked #218 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
Security screen: LOW risk (skills.sh audit)
Data as of Jul 28, 2026 (Skillselion catalog sync)

At a glance

frame-glitch-title capabilities & compatibility

Capabilities: 【模板: 故障艺术标题帧 (glitch title)】 · 【意图】单帧 hero / 视频转场 / cyberpunk 风格标题。inspired by · 【画布】1920×1080, 背景 `#070708` 近黑或 crt 暗灰 `#0d0e10` · 居中, 6 9vw, weight 800/900, 字体 `space grotesk bol · 颜色: 主层 `#f5f5f7`; 后面套 2 层伪影:
Use cases: orchestration

From the docs

What frame-glitch-title says it does

【意图】单帧 hero / 视频转场 / cyberpunk 风格标题。Inspired by hyperframes glitch。

SKILL.md

【画布】1920×1080, 背景 `#070708` 近黑或 CRT 暗灰 `#0d0e10`; 加 56px 网格 (透明 5%) + scanlines 横线 (透明 8%, 2px 间隔)。

SKILL.md

- 居中, 6-9vw, weight 800/900, 字体 `Space Grotesk Bold` / `Inter Tight Black` / `JetBrains Mono Bold`。

SKILL.md

npx skills add https://github.com/nexu-io/open-design --skill frame-glitch-title

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/open-design/frame-glitch-title.svg)](https://skillselion.com/skills/nexu-io/open-design/frame-glitch-title)

Installs	1.6k
repo stars	★ 82k
Security audit	3 / 3 scanners passed
Last updated	July 28, 2026
Repository	nexu-io/open-design ↗

What it does

Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.

Who is it for?

Developers working on design & ui/ux during build tasks.

Skip if: Tasks outside Design & UI/UX scope described in SKILL.md.

When should I use this skill?

Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.

What you get

Completed design & ui/ux workflow aligned with SKILL.md steps.

glitch title frame markup
transition hero spec

By the numbers

1920×1080 (16:9) aspect ratio
Featured rank 37 and 6 recommended uses in open-design catalog

Files

SKILL.mdMarkdownGitHub ↗

【模板: 故障艺术标题帧 (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) 在故障瞬间应用。

【设计细节】

颜色仅用: 黑 / 白 / cyan / magenta / 一点 amber 警告色; 严禁全彩虹。
字体: 西文 Space Grotesk 或 JetBrains Mono Bold; 中文 Noto Sans Mono CJK SC 或 Noto Sans SC Bold。
严禁 lorem ipsum; 必须用用户的标题 + 副标。
动效用 @keyframes, 可被 prefers-reduced-motion 关闭 (退回静态 chromatic split)。
单文件 HTML。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Glitch Title · SIGNAL_LOST</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />
<style>
  body { font-family:'Space Grotesk',sans-serif; background:#0d0e10; color:#f5f5f7; margin:0; min-height:100vh; overflow:hidden; position:relative; }
  .mono { font-family:'JetBrains Mono',monospace; }
  /* scanlines */
  body::before {
    content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
    background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 1px, transparent 3px);
    mix-blend-mode: multiply; opacity:0.6;
  }
  /* grid */
  body::after {
    content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
    background-image: linear-gradient(rgba(0,255,180,0.04) 1px, transparent 1px), linear-gradient(90deg,rgba(0,255,180,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
  }
  /* grain */
  .grain { position:absolute; inset:0; opacity:0.1; mix-blend-mode:overlay; z-index:4; pointer-events:none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }
  @keyframes glitch {
    0%, 92%, 100% { transform: translate(0,0); filter: none }
    93% { transform: translate(-6px, 1px); filter: url(#rgb) }
    94% { transform: translate(8px, -2px); filter: url(#rgb) }
    95% { transform: translate(-4px, 2px); }
    96% { transform: translate(4px, -1px); filter: url(#rgb) }
    97% { transform: translate(0,0) }
  }
  .glitch-host { position:relative; animation: glitch 4s infinite; }
  .layer { position:absolute; inset:0; mix-blend-mode:screen; }
  .layer-c { color:#00f0ff; transform: translate(-3px, 1px); }
  .layer-m { color:#ff2bd6; transform: translate(3px, -1px); }
  .vignette { position:absolute; inset:0; background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.7) 100%); z-index:5; pointer-events:none; }
  .ascii { font-family:'JetBrains Mono',monospace; letter-spacing:2px; line-height:1; }
  @media (prefers-reduced-motion: reduce) { .glitch-host { animation: none } }
</style>
</head>
<body class="flex flex-col items-center justify-center relative">

  <svg width="0" height="0" style="position:absolute">
    <defs>
      <filter id="rgb">
        <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
        <feOffset in="SourceGraphic" dx="3" dy="0" result="r"/>
        <feOffset in="SourceGraphic" dx="-3" dy="0" result="b"/>
        <feMerge><feMergeNode in="r"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
      </filter>
    </defs>
  </svg>

  <header class="absolute top-10 left-12 right-12 flex items-baseline justify-between mono text-[11px] opacity-70 z-10 tracking-[0.16em]">
    <span>&gt;&gt; SIGNAL_LOST · CH-04 · 14:32:08</span>
    <span>FRAME · GLITCH-TITLE</span>
    <span>REC ●</span>
  </header>

  <!-- ASCII chunks corners -->
  <pre class="ascii absolute top-24 left-12 text-[12px] opacity-30 z-10">█▓▒░ █▓▒░
▒▓█▓ ░▒▓
░▒▓█ ▓▒░░
▓▒░░ ▒▓█▓</pre>
  <pre class="ascii absolute bottom-24 right-12 text-[12px] opacity-30 z-10 text-right">█▓▒░ ▓▒░█
▒░░▓ ░▒▓█
▓▒░░ █▓▒░
░▒▓█ ▒░░▓</pre>

  <main class="relative z-10 text-center px-12">
    <div class="mono text-[14px] opacity-60 tracking-[0.22em] mb-6 uppercase">— Transmission Halted —</div>
    <div class="glitch-host relative inline-block">
      <h1 class="font-black tracking-[-0.02em] leading-[0.9]" style="font-size:clamp(80px,12vw,200px)">
        SIGNAL<br/>_LOST
      </h1>
      <h1 class="layer layer-c font-black tracking-[-0.02em] leading-[0.9]" style="font-size:clamp(80px,12vw,200px)">
        SIGNAL<br/>_LOST
      </h1>
      <h1 class="layer layer-m font-black tracking-[-0.02em] leading-[0.9]" style="font-size:clamp(80px,12vw,200px)">
        SIGNAL<br/>_LOST
      </h1>
    </div>
    <p class="mt-10 mono text-[16px] opacity-70 tracking-[0.16em]">
      04 · DATA_CORRUPTION · <span style="color:#ffb547">w̶̶a̷i̶t̶i̶n̶g̶ ̷f̷o̶r̶ ̶r̷e̶c̶o̶v̷e̶r̶y̶</span>
    </p>
  </main>

  <div class="grain"></div>
  <div class="vignette"></div>

  <footer class="absolute bottom-10 left-12 right-12 flex items-baseline justify-between mono text-[11px] opacity-50 z-10 tracking-[0.16em]">
    <span>HTML-ANYTHING / VFX</span>
    <span style="color:#ff2bd6">CHROMATIC · CYAN × MAGENTA</span>
    <span class="mono">⏵ 00:14:32:08</span>
  </footer>
</body>
</html>