Skip to content

Glitch Title Frame

Makes the agent build a cyberpunk glitch-style title card as a single HTML file

Stars
105,448
Licence
Apache-2.0
Files
3 files

What it does

When this skill is installed, the agent can turn your title text into a 1920×1080 glitch-style title frame, the kind used for video transitions or 'cyberpunk hero' openers. It follows a visual recipe: near-black background, scanlines, a large title with cyan and magenta offset layers, slicing and jitter animation, and small mono-font details such as a timecode and noise characters. The output is a single HTML page you can open in a browser or capture as a still or short clip.

Great for

  • Motion designers or video editors who need a quick glitch title card for a transition
  • Creators making cyberpunk-themed intros or social posts who want a starting point to tweak

Skip it if

  • Projects needing a precise brand identity or a non-glitch style, since the skill fixes the look to a glitch aesthetic
  • Accessibility-critical content: the flashing and jitter effects can be uncomfortable for people with photosensitivity, though the template says it falls back to a static split when reduced motion is preferred

Try asking

  • “Make a glitch title frame that says 'SIGNAL LOST' with a subtitle about the broadcast channel”
  • “Create a cyberpunk hero title card for my podcast intro in the glitch style”
  • “Design a 16:9 glitch transition frame reading 'NEXT LEVEL' for my video”
Step-by-step guide: how to use Glitch Title FrameInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    frame-glitch-title.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip frame-glitch-title.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip frame-glitch-title.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the exact title and subtitle text you want, since the template forbids lorem ipsum and requires real content
  • Ask for a static version if you need to avoid motion effects, or specify reduced motion behaviour

What's inside

  • example.html
  • open-design.json
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.