Frame Glitch Title

Name: Frame Glitch Title
Author: nexu-io

nexu-io/html-video

1 installs
4.3k repo stars
Updated June 21, 2026
nexu-io/html-video

This is a copy of frame-glitch-title by nexu-io - installs and ranking accrue to the original listing.

Helps with ai & agent building tasks.

About

frame-glitch-title is a Claude Code skill for ai & agent building. It helps developers move faster with AI-assisted coding.

frame-glitch-title
AI & Agent Building
AI-coding skill

Frame Glitch Title by the numbers

1 all-time installs (skills.sh)
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/nexu-io/html-video --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/html-video/frame-glitch-title.svg)](https://skillselion.com/skills/nexu-io/html-video/frame-glitch-title)

Installs	1
repo stars	★ 4.3k
Last updated	June 21, 2026
Repository	nexu-io/html-video ↗

What it does

Helps with ai & agent building tasks.

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。

{
  "name": "@html-video/template-frame-glitch-title",
  "version": "0.1.0",
  "description": "html-video template: frame-glitch-title (cherry-picked from nexu-io/open-design)",
  "license": "Apache-2.0",
  "private": true,
  "files": ["template.html-video.yaml", "source", "SKILL.md", "example.md", "preview.png"]
}

<!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>

spec_version: 1
id: frame-glitch-title
name: Glitch Title
description: >
  Cyberpunk-style glitch title with RGB shift, scanline, and chromatic aberration effects.

engine: hyperframes
engine_version: ^0.4.0
source_entry: source/index.html

category: presentation
subcategory: text-card
tags: [title, glitch, cyberpunk, rgb-shift, tech, scanline]

best_for:
  - "Tech product reveal"
  - "Cyberpunk aesthetic"
  - "Hacker vibe"

output:
  formats: [mp4, webm]
  default_format: mp4
  resolution:
    default: { width: 1920, height: 1080 }
    supported_aspects: ["16:9", "9:16", "1:1"]
  fps:
    default: 60
    supported: [30, 60]
  duration:
    type: variable
    min_sec: 3
    max_sec: 8
  alpha: false
  audio:
    supported: true
    expected_inputs: [bgm]

inputs:
  schema:
    type: object
    required: [title]
    properties:
      title:
        type: "string"
        maxLength: 80
        description: "Main glitch title"
      subtitle:
        type: "string"
        maxLength: 120
        description: "Optional supporting line"
      duration_sec:
        type: "number"
        minimum: 3
        maximum: 8
        default: 4
  examples:
    - {"title": "SYSTEM ONLINE", "subtitle": "v2.6.0 — initialized", "duration_sec": 4}

license:
  spdx: Apache-2.0
  attribution_required: false
  redistribution_allowed: true
  commercial_use: true

author:
  name: nexu-io
  url: https://github.com/nexu-io
  contact: open-design@nexu.io

version: 0.1.0
changelog:
  - version: 0.1.0
    date: 2026-05-27
    notes: Cherry-picked from open-design/repo/skills/frame-glitch-title/example.html

preview:
  poster: preview.png

performance:
  reference_render:
    duration_sec: 4
    render_wall_clock_sec: 8
    machine: "M2 MacBook Air"