跳到正文
cccskills
免费在 GitHub 公开

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.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

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

查看安装方法

适用场景

  • 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

包含的文件(3)

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

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

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-design10.2万2026年10月19日 更新

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-design10.2万2026年10月19日 更新

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-design10.2万2026年10月19日 更新

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-design10.2万2026年10月19日 更新

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-design10.2万2026年10月19日 更新

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-design10.2万2026年10月19日 更新

查看 nexu-io 的全部技能

报告此技能的问题