Skip to content
cccskills
FreePublished on GitHubEnglish overview

frame-glitch-title

Create a glitch styled title screen for video transitions or cyberpunk visuals. The single HTML file combines large headlines, cyan and magenta color offsets, scanlines, noise, and animated distortions using your title and subtitle.

OriginalShow the original description

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

nexu-io/open-design
AI rating100/ 100See how to install

Good for

  • Creating a title screen for a video transition
  • Designing a cyberpunk main visual
  • Adding animated distortion to a title
  • Making a static title with color offsets

Overview

What it does

frame-glitch-title creates title screens with noise and distorted lettering for video transitions or cyberpunk-style main visuals. It places a large headline on a nearly black background, then adds cyan and magenta color offsets, CRT-style scanlines, and fine noise. Sideways text distortion, time displays, and fragments of symbols complete the composition, which is delivered as a single HTML file.

When it helps

Use it for a video opening or scene transition that should suggest a lost signal or corrupted data. With your title and subtitle, it can also create a consistent screen using a dark background and a limited color palette. The intended canvas is a landscape frame measuring 1920×1080.

Example requests

  • “Use this title and subtitle to make a video title screen with color offsets and scanlines.”
  • “Add sideways text distortion to a cyberpunk-style headline.”

Notes

The skill expects your actual title and subtitle. Motion is implemented with CSS @keyframes. The design responds to prefers-reduced-motion by stopping the animation and switching to a static color-offset effect.

This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.

Objective evaluation

AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.

Clear instructionsIs it clear when to use it and what it does?
AGoodIt explicitly identifies video-transition title screens as a use and specifies color offsets, scanlines, and text distortion.
Concrete stepsAre steps, inputs, outputs, and examples spelled out?
AGoodIt specifies canvas dimensions, colors, text sizes, animation timing, and a single HTML file as the output format.
SafetyAre sending data, deleting files, and running commands disclosed?
AGoodIt includes no external transmission or deletion operations and specifies stopping motion through prefers-reduced-motion.
Easy setupDoes it need few tools or API keys, and are they documented?
AGoodOutput uses a single HTML file and CSS, with no API key, paid service, or specific OS prerequisite.

The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 20, 2026. Treat it as a guide and read the original before installing.

Disagree? Request a re-evaluation

Tell us which point is wrong and why. No login needed. We will check it against the SKILL.md, redo the evaluation, and show the result here.

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

Files included (3)

  • SKILL.md3.6 KB
  • example.html4.8 KB
  • example.md221 B

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

8-bit-orbit-video-template

FreeSummaryAI rating 90

Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.

  • Create a retro pixel presentation video
  • Customize a three-scene video template
  • Preview scene transitions and motion in HTML
nexu-io/open-design103.2KUpdated Oct 22, 2026

ad-creative

FreeSummaryAI rating 80

Create and revise headlines, descriptions, and main text for paid social and search ads. Use it to develop ad copy options and refine wording through repeated rounds of revision.

  • Drafting headlines for paid social ads
  • Creating descriptions for search ads
  • Revising the main text of an ad
nexu-io/open-design103.2KUpdated Oct 22, 2026

after-hours-editorial-template

FreeSummaryAI rating 80

Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.

  • Creating a fashion-inspired motion presentation
  • Presenting a short story across three pages
  • Applying existing brand rules to a dark editorial sequence
nexu-io/open-design103.2KUpdated Oct 22, 2026

agent-browser

FreeSummaryAI rating 100

Inspect and test web pages through a browser automation command-line tool. Navigate, click, enter text, capture screenshots, and extract page details, with a focus on checking local OpenDesign previews and reviewing web app quality.

  • Checking local OpenDesign previews
  • Testing clicks and text entry in web apps
  • Capturing page or element screenshots
nexu-io/open-design103.2KUpdated Oct 22, 2026

ai-music-album

FreeSummaryAI rating 80

Plan an AI music album from its concept through lyric drafts, track order, and export. Intended for independent album experiments and brand soundtracks, with the full production workflow provided through a separately installed upstream bundle.

  • Planning an experimental independent album
  • Drafting lyrics around an album concept
  • Deciding the running order of tracks
nexu-io/open-design103.2KUpdated Oct 22, 2026

algorithmic-art

FreeSummaryAI rating 80

Create generative art, or images made with programmed rules, using p5.js. Fixed random seeds make each rendering reproducible, supporting procedural posters, still images that suggest motion, and studies of artistic frame composition.

  • Posters generated with programmed rules
  • Still images that suggest motion
  • Studies of artistic frame composition
nexu-io/open-design103.2KUpdated Oct 22, 2026

See all skills by nexu-io

Report a problem with this skill