Claude MarketplacesSubmit
nexu-io avatar

Frame Glitch Title

nexu-io/open-design

Single-frame cyberpunk title card with chromatic RGB offset, scanline overlays, and animated glitch slices. Built for 1920×1080 video transitions or hero frames. The template uses Space Grotesk or JetBrains Mono bold with cyan and magenta channel splits that shift every 1.5 seconds, plus ASCII noise chunks in the corners and a fake timecode overlay. The glitch is CSS keyframe driven with clip-path slicing, so you can tone it down with prefers-reduced-motion if needed. Inspired by the hyperframes aesthetic. Works best when you feed it real titles instead of placeholders, and the mono timecode detail sells the data-corruption vibe without going full rainbow mess.

skills.sh installs
2.7K
GitHub stars
106.9K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill frame-glitch-title --agent claude-code

Installs into .claude/skills of the current project.

Files

【模板: 故障艺术标题帧 (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) 在故障瞬间应用。
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/nexu-io/open-design
Category
Design & UI/UX
First seen
Jun 3, 2026

More from nexu-io/open-design

All 217

Recommended

More Design & UI/UX
1nexu-io avatarframe-logo-outronexu-io/open-designSegmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.2.7Kskills.sh installs
2nexu-io avatarframe-macos-notificationnexu-io/open-designRealistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.2.7Kskills.sh installs
3nexu-io avatarsocial-x-post-cardnexu-io/open-designRealistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.2.7Kskills.sh installs
4nexu-io avatarsocial-spotify-cardnexu-io/open-designSpotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.2.7Kskills.sh installs
5dylantarre avatarmobile-touchdylantarre/animation-principlesUse when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.2.4Kskills.sh installs
6nexu-io avatarredesign-existing-projectsnexu-io/open-designUpgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without bre2Kskills.sh installs