frame-glitch-title
Ajuda seu agente a gerar títulos com efeitos visuais de falha digital. É ideal para criar um visual moderno e impactante em vídeos ou projetos com tema cyberpunk.
O que ela faz
Este recurso cria um título com efeito de falha digital, como se estivesse corrompido ou com interferência. É ideal para dar um visual cyberpunk ou de transição em vídeos.
Quando usar
- ✓Para títulos de vídeos com tema cyberpunk.
- ✓Ao criar transições visuais em vídeos.
- ✓Para simular uma falha de sinal ou corrupção de dados em um texto.
Exemplo do que pedir para a IA
“Crie um título de vídeo com efeito glitch para 'Cyberpunk City Nights'.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
Ele usa cores específicas (preto, branco, ciano, magenta) e fontes com visual moderno. O texto principal é duplicado com pequenos deslocamentos de cor para simular a falha, e efeitos de movimento aleatório criam a sensação de corrupção de dados.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add nexu-io/open-design --skill frame-glitch-titleOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/frame-glitch-title/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
【Modelo: Quadro de Título Glitch Art (Título Glitch)】 【Intenção】 Hero de quadro único / transição de vídeo / título estilo cyberpunk. Inspirado em glitch de hyperframes.
【Tela】 1920×1080, fundo #070708 quase preto ou cinza escuro de CRT #0d0e10; com grade de 56px (transparência 5%) + linhas horizontais de scanlines (transparência 8%, espaçamento de 2px).
【Título Principal】
- Centralizado, 6-9vw, peso 800/900, fonte
Space Grotesk Bold/Inter Tight Black/JetBrains Mono Bold. - Cor: camada principal
#f5f5f7; com 2 camadas de artefatos por trás:- ciano
#00f0fftranslate(-3px,1px). - magenta
#ff2bd6translate(3px,-1px).
- ciano
- Camada inteira com clip-path fatiada em 5-8 segmentos, cada segmento
@keyframestranslateX aleatório de -10px → 10px, duração de 80-160ms, reprodução dessincronizada, criando um "data corruption" como aberração. - A cada 1.5s, aciona um "super glitch" — o título inteiro é afetado por um smear horizontal de 1 frame, usando
filter: url(#displacementFilter)ou um simples deslocamento CSS.
【Camadas Adicionais】
- Uma linha de legenda no topo (maiúsculas mono, 11px, opacidade 0.6):
>> SIGNAL_LOST · CH-04 · 14:32:08. - 1 linha abaixo do título com subtítulo (24-28px, mono, opacidade 0.7), ocasionalmente substituído por caracteres
̶▒̶(falso lixo eletrônico). - Pontilhado aleatório de chunks de ruído ASCII
█▓▒░nos cantos. - Timecode na parte inferior (mono, opacidade 0.4).
- Camada de ruído e grão em toda a tela
background-image: url("data:image/svg+xml,...turbulence..."), opacidade 6%, mix-blend-mode overlay.
【Filtro SVG (Opcional)】
- Define
<filter id="rgbShift">usandofeColorMatrix+feOffset+feMergepara deslocar os canais R/G/B; a camada inteirafilter: url(#rgbShift)é aplicada no momento do glitch.
【Detalhes de Design】
- Cores usadas apenas: preto / branco / ciano / magenta / um pouco de âmbar de cor de aviso; proibido arco-íris completo.
- Fontes: Latim
Space GroteskouJetBrains MonoBold; ChinêsNoto Sans Mono CJK SCouNoto Sans SCBold. - Proibido lorem ipsum; deve usar o título + subtítulo do usuário.
- Animação usa
@keyframes, pode ser desativada porprefers-reduced-motion(voltando para split cromático estático). - Arquivo HTML único.
Perguntas frequentes
Posso usar qualquer cor?
Não, o efeito funciona melhor com um esquema de cores limitado: preto, branco, ciano, magenta e um toque de âmbar. Cores vibrantes podem não dar o efeito desejado.
O texto fica ilegível?
O objetivo é parecer uma falha, mas o texto principal deve permanecer legível. Os efeitos são sutis o suficiente para manter a clareza.
Funciona em qualquer dispositivo?
Sim, ele é feito como um arquivo HTML simples que pode ser usado em navegadores web e é projetado para respeitar configurações de acessibilidade, como reduzir animações.
Detalhes
Descrição original do autor
Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #543
- Licença
- Apache-2.0
- Atualizada em
- 16/10/2026
Comentários
- …
Mais skills deste repositório
sample-plugin
Faz seu agente criar um arquivo de metadados para testes. Ele ajuda a garantir que o código funcione corretamente em diferentes situações.
nexu-io/open-design
aster-atelier
Ajuda seu agente a criar um site artístico com visual clássico. Ele usa imagens elegantes, céus azuis e fontes serifadas para um visual cinematográfico.
nexu-io/open-design
audio-jingle
Faz seu agente gerar áudio como jingles e efeitos sonoros. Ele pode criar músicas e vozes, salvando o resultado em um arquivo de áudio.
nexu-io/open-design
blog-post
Ajuda seu agente a escrever artigos longos ou posts de blog. Ele inclui espaços para imagens, citações e informações do autor.
nexu-io/open-design
Skills parecidas
blender-motion-state-inspection
Permite inspecionar detalhes de animações em 3D. É útil para verificar poses, movimentos e o alinhamento de personagens em animações.
affaan-m/ECC
manim-video
Faz seu agente criar vídeos explicativos animados. Ele usa o Manim para gerar gráficos e diagramas claros para conceitos técnicos.
affaan-m/ECC
remotion-video-creation
Orienta seu agente na criação de vídeos usando React com a biblioteca Remotion. Ele cobre boas práticas para animações, áudio, legendas e outros elementos visuais.
affaan-m/ECC