Mmcp.market

frame-glitch-title skill

by nexu-io·nexu-io/html-anything·9.0k stars·Apache-2.0

数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero

A100/100content scan

Is the frame-glitch-title skill safe?

Clean: nothing in its files matched our rules. We read 3 files in the folder on 2026-09-28.

No findings.

Install the frame-glitch-title skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/nexu-io/html-anything.git /tmp/html-anything
mkdir -p ~/.claude/skills
cp -r /tmp/html-anything/next/src/lib/templates/skills/frame-glitch-title ~/.claude/skills/frame-glitch-title
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

【模板: 故障艺术标题帧 (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 滤镜 (可选)】

  • 定义 用 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。

More skills from nexu-io/html-anything

  • Aarticle-magazineSubstack / Medium 高级感长文排版, 适合公众号、博客发布
  • Aarticle-sketchnote-editorial把一个概念铸成杂志专题档案——真问题→失败→转折→顿悟→命名, 6 个 layout 模具 + 4 字族对比 + 探案档案细节
  • Ablog-post杂志感长文, 含 masthead、hero、figures、pull quote、作者署名
  • Acard-twitter推特金句 / 数据卡, 适合配推文
  • Acard-xiaohongshu小红书风格知识卡片, 多张联排可滑动浏览
  • Acompetitive-teardown定位图 + 功能矩阵 + 价格对比 + 机会窗口, 把竞品资料转成产品决策报告
  • Adashboard固定侧栏 + 顶栏 + KPI 网格 + 1-2 张图
  • Adata-report把 CSV/Excel/JSON 数据转成漂亮的可视化报告页
  • Adating-web消费感配对仪表板: 信号 ticker + KPI + 30 天柱状 + 趋势
  • Adeck-blueprint奶油纸 + 锈红 + 蓝图网格 mask + 黑边硬卡片 + pipeline 盒
  • Adeck-course-module暖纸背景 + Playfair, 左侧学习目标常驻, 含 MCQ 自测页
  • Adeck-dir-key-nav8 页单色背景, 160px display + 4px accent + Mono 箭头列表

All agent skills → · MCP servers