frame-glitch-title
Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.
Install / Use
npx skills add nexu-io/open-design --skill frame-glitch-titleInstalls into whichever agent you are using.
SKILL.md
Installable skill definition
Quality Score
Category
Development & EngineeringSupported Platforms
Our assessment of frame-glitch-title
frame-glitch-title scores 73/100 on our quality scale, 1065th of 1,947 Development & Engineering skills we index.
Its SKILL.md is 2.9 KB long, written without headings and no code examples: a solid amount of guidance for an agent.
With 97,896 GitHub stars, it is one of the more widely adopted skills in the catalogue.
Maintenance, license and trust
- The repository was last updated yesterday, so frame-glitch-title is actively maintained.
- It is released under the Apache-2.0 license, a permissive license that allows use, modification and commercial use with attribution.
- Its trust signals score 100/100, with no cautions. These come from repository metadata, not a code audit — read the skill file before letting an agent act on it.
Safety scan
No issues foundOur scan of the whole file found no instruction hijacking, hidden characters, credential access, data exfiltration or destructive commands.
Automated pattern scan on 2026-09-26. It catches known dangerous patterns, not every risk — read a skill before letting an agent act on it.
frame-glitch-title compared with similar skills
All 4 of these similar skills score higher than frame-glitch-title; compare them before choosing.
| Skill | Score | Stars | Updated | Format |
|---|---|---|---|---|
| frame-glitch-title (this skill)by nexu-io | 73 | 97.9k | 1d ago | SKILL.md |
| Agent-Reachby Panniantong | 100 | 85.5k | 10d ago | CLAUDE.md |
| ai-job-searchby MadsLorentzen | 100 | 44.0k | 4d ago | CLAUDE.md |
| claude-howtoby luongnv89 | 100 | 41.7k | today | CLAUDE.md |
| algorithmic-artby anthropics | 100 | 177.9k | 3d ago | SKILL.md |
Frequently asked questions
- How do I install frame-glitch-title?
- Run
npx skills add nexu-io/open-design --skill frame-glitch-title. The install tabs above show the steps for each supported agent. - Which AI agents does frame-glitch-title work with?
- It is written for Universal, as a SKILL.md file. Other agents that read the same format can often use it too.
- Is frame-glitch-title safe to use?
- Our scan of the whole file found no instruction hijacking, hidden characters, credential access, data exfiltration or destructive commands. It is Apache-2.0-licensed and scores 100/100 on trust signals. Skills are instructions an agent will follow, so read the file before installing it and do not approve commands you do not understand.
- Is frame-glitch-title still maintained?
- The repository was last updated yesterday, so frame-glitch-title is actively maintained.
Skill content
View source on GitHubname: 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
#00f0fftranslate(-3px,1px)。 - magenta
#ff2bd6translate(3px,-1px)。
- cyan
- 整层加 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 MonoBold; 中文Noto Sans Mono CJK SC或Noto Sans SCBold。 - 严禁 lorem ipsum; 必须用用户的标题 + 副标。
- 动效用
@keyframes, 可被prefers-reduced-motion关闭 (退回静态 chromatic split)。 - 单文件 HTML。
Related Skills
Agent-Reach
85.5kGive your AI agent eyes to see the entire internet. Read & search Twitter, Reddit, YouTube, GitHub, Bilibili, XiaoHongShu — one CLI, zero API fees.
ai-job-search
44.0kThe job search that runs on your machine. AI job application framework built on Claude Code: evaluate postings, tailor CVs, write cover letters, prep interviews. Fork it and own it.
claude-howto
41.7kA visual, example-driven guide to Claude Code — from basic concepts to advanced agents, with copy-paste templates that bring immediate value.
algorithmic-art
177.9kCreating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems.
Languages
Trust signals
From repository metadata: license, adoption, age and documentation. Not a code audit — see the Safety scan above for what the skill file itself contains.
