frame-logo-outro
Faz seu agente montar logos de forma animada com brilho e slogan. É ideal para criar encerramentos de vídeo memoráveis ou frames finais de marca.
O que ela faz
Cria um quadro final animado para vídeos, mostrando seu logo de forma criativa, com o nome da sua marca e um slogan que aparecem gradualmente.
Quando usar
- ✓Para encerrar vídeos com uma marca profissional.
- ✓Para apresentar seu logo e slogan em animações curtas.
- ✓Para criar um cartão de visita digital animado.
Exemplo do que pedir para a IA
“Crie um final animado para meu vídeo com o logo 'Minha Empresa', slogan 'Inovação para o futuro' e as cores azul neon.”
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
A IA monta seu logo a partir de blocos que se movem e aparecem na tela. Em seguida, o nome da sua marca e o slogan surgem suavemente, finalizando com um brilho.
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-logo-outroOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/frame-logo-outro/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 Final de Logo (Logo Outro)】 【Intenção】Quadro final de marca para vídeos — logo montado em blocos + brilho suave + tagline subindo + CTA. Inspirado em hyperframes logo-outro.
【Tela】1920×1080, fundo preto #08090c ou cor escura da marca; com um sutil vignette radial-gradient(...) para clarear o centro.
【Layout】
- Logo Central: Desenho em CSS / SVG inline; composto por 4-8 blocos geométricos (círculos / quadrados / triângulos / linhas finas).
- Animação de Entrada: Cada bloco desliza de fora da tela (direções com ±100px de diferença) + escala 1.4→1.0 + opacidade 0→1, com intervalo de 80ms; duração total de 1.2s.
- Após a entrada, o logo inteiro ganha um brilho suave:
filter: drop-shadow(0 0 24px <accent>40); ao mesmo tempo, um brilho cintilantemask-imagevarre o logo (500ms).
- Nome da Marca: Abaixo do logo, a 6-8% da altura, fonte grande (Inter Tight / SF Pro Display, 48-72px, peso 700, espaçamento entre letras -0.02em), entrada: efeito de máquina de escrever ou fade-up após o brilho do logo (começando em 1.4s).
- Tagline: Uma linha abaixo do nome da marca (24-28px, peso 400, opacidade 0.7), fade in (começando em 1.8s).
- CTA Inferior + Metadados: Linha dupla na parte inferior, por exemplo
htmlanything.dev · @htmlanything · 2026, 11px em maiúsculas com espaçamento entre letras de 0.16em, cor com opacidade 0.4, separada por uma linha fina.
【Paleta de Cores — Escolha 1 de 4, não misturar】
- 🌌 Azul Meia-Noite — fundo
#08090c, destaque#7c5cff(brilho roxo-azulado neon). - 🌅 Âmbar Solar — fundo
#0e0a08, destaque#ffb547(âmbar quente). - 🌿 Menta Florestal — fundo
#0a1410, destaque#5fb38a(verde menta). - ⚪ Osso e Tinta — fundo
#f1efea, destaque#0a0a0b(sem neon, estilo editorial, brilho substituído por sombra).
【Detalhes de Design】
- Nunca: Usar imagem de logo externa; o logo deve ser desenhado com formas puras em CSS / SVG inline.
- Animação de entrada usa
@keyframes+animation-delay; pode ser desativada porprefers-reduced-motion. - Fontes: Ocidentais
Inter Tight/SF Pro Display/Manrope; ChinesasNoto Sans SCpeso 700. - Deve usar o nome da marca + tagline fornecidos pelo usuário; se não houver, usar o fallback "HTML Anything" / "Anything → beautiful HTML".
- Arquivo HTML único; congela após a conclusão de toda a animação (não repetir, este é um quadro final de vídeo).
- Opcional: fita de 5px no topo (cor de destaque) para aumentar o reconhecimento da marca.
Perguntas frequentes
Posso usar uma imagem de logo?
Não, o logo precisa ser criado com formas geométricas simples (círculos, quadrados) diretamente no código para garantir a animação correta.
O que acontece se eu não fornecer um nome ou slogan?
A animação usará 'HTML Anything' como nome e 'Anything → beautiful HTML' como slogan como um exemplo.
A animação fica repetindo?
Não, a animação para após ser concluída, ideal para ser o final de um vídeo.
Detalhes
Descrição original do autor
Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #546
- 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