PluginBench
Skill
Pass
Audit score 90

frame-glitch-title

nexu-io/open-design

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

SourceView on skills.sh

What is frame-glitch-title?

A video title frame template featuring cyan/magenta chromatic offset, animated data-corruption effects, and CRT-style visual artifacts. Use it for video transitions, hero frames, or cyberpunk-themed content that needs a distinctive glitched aesthetic.

  • Renders 1920×1080 title frames with cyan/magenta chromatic offset layers
  • Animates clip-path segments with random horizontal displacement to simulate data corruption
  • Applies periodic "hard glitch" effects with horizontal smear and RGB channel shifting
  • Includes CRT grid overlay, scanlines, and noise grain for authentic digital decay
  • Adds caption headers, timecode, and ASCII noise chunks in corners
  • Respects prefers-reduced-motion by falling back to static chromatic split

How to install frame-glitch-title

npx skills add https://github.com/nexu-io/open-design --skill frame-glitch-title
Prerequisites
  • Node.js and npm installed
  • HTML5-capable browser for preview and rendering
  • User-provided title and subtitle text (no placeholder content)
Claude Code
Cursor
Windsurf
Cline

How to use frame-glitch-title

  1. 1.Install the skill via npx skills add https://github.com/nexu-io/open-design --skill frame-glitch-title
  2. 2.Open the generated HTML template in a browser or video editing software
  3. 3.Replace the default title and subtitle text with your own content
  4. 4.Customize the color scheme if needed (primary colors: black, white, cyan #00f0ff, magenta #ff2bd6)
  5. 5.Adjust animation timing by modifying @keyframes duration values (default 80-160ms per segment)
  6. 6.Export the rendered frame as video or image for use in your project

Use cases

Good for
  • Creating cyberpunk-themed video intros or transitions with glitch effects
  • Generating hero title frames for sci-fi or tech-focused video content
  • Building video transition sequences that emphasize digital corruption or system failure themes
  • Designing title cards for streaming content, trailers, or promotional videos with distinctive visual branding
  • Producing animated title frames for music videos or motion graphics projects
Who it's for
  • Video editors and motion graphics designers
  • Content creators working in cyberpunk or sci-fi genres
  • Streaming and YouTube creators seeking distinctive title treatments
  • VFX artists building transition libraries
  • Developers building video generation or templating systems

frame-glitch-title FAQ

Can I customize the glitch animation speed?

Yes. The template uses @keyframes with 80-160ms durations and 1.5s intervals for hard glitches. Modify these values in the CSS to speed up or slow down the effect.

Does this work with non-English text?

Yes. The template supports Chinese and other languages via Noto Sans Mono CJK SC or Noto Sans SC Bold fonts. Provide your text and the template will render it with the same glitch effects.

Can I disable animations for accessibility?

Yes. The template respects prefers-reduced-motion and falls back to a static chromatic split effect when motion is disabled.

What video formats does this export to?

The template generates a single HTML file. Export it as video via screen recording, browser-to-video tools, or integrate it into a video editing pipeline that supports HTML rendering.

Can I change the color scheme from cyan/magenta?

The design is optimized for cyan/magenta chromatic offset. You can modify the hex values (#00f0ff, #ff2bd6) in the CSS, but the glitch aesthetic is built around this limited palette.

Full instructions (SKILL.md)

Source of truth, from nexu-io/open-design.

name: frame-glitch-title zh_name: "故障艺术标题帧" en_name: "Glitch Title Frame" emoji: "⚡" description: "Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes." zh_description: "数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero" en_description: "Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes." category: video scenario: video aspect_hint: "1920×1080 (16:9)" featured: 37 recommended: 6 tags: ["glitch", "cyberpunk", "title", "transition", "vfx", "frame"] example_id: sample-frame-glitch-title example_name: "故障标题 · SIGNAL_LOST" example_format: markdown example_tagline: "cyan / magenta 像散 + CRT 扫描线" example_desc: "巨大标题 + 数据腐败伪影 + 角落 ASCII 噪点 chunks" example_source_url: "https://hyperframes.heygen.com/catalog" example_source_label: "hyperframes · glitch" od: mode: video surface: video scenario: video featured: 0.14 upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 design_system: requires: false example_prompt: "Use the Glitch Title Frame template to turn my content into a digital-glitch, chromatic-offset, data-corruption title frame for a video transition or cyberpunk hero. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." example_prompt_i18n: zh-CN: "用「故障艺术标题帧」模板把我的内容做成一段「数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"

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

Related skills

More from nexu-io/open-design and the wider catalog.

FRframe-light-leak-cinema logo

frame-light-leak-cinema

nexu-io/open-design

Film light leaks, grain, and letterbox framing for cinematic video openings and chapter cards.

2.4k installs
FRframe-liquid-bg-hero logo

frame-liquid-bg-hero

nexu-io/open-design

WebGL-style fluid displacement background with quote overlay for video intros and landing heroes.

2.4k installsAudited
FRframe-logo-outro logo

frame-logo-outro

nexu-io/open-design

Segmented logo assembly with glow bloom and tagline reveal for video outros.

2.4k installsAudited
FRframe-macos-notification logo

frame-macos-notification

nexu-io/open-design

Realistic macOS Big Sur notification banner for video overlays and product teasers.

2.4k installs
FRfrontend-design logo

frontend-design

nexu-io/open-design

Build production-grade frontend interfaces with strong visual direction, polished typography, and working HTML/CSS/JS code.

4.5k installsAudited
FRfrontend-skill logo

frontend-skill

nexu-io/open-design

Create visually strong landing pages and UIs with restrained composition—OpenAI's production frontend playbook.

2.9k installsAudited