Pular para o conteúdo
Skillpedia
Motion e animação101 mil · #618

video-template-frame-creative-voltage

Faz seu agente criar um vídeo com efeitos elétricos e rabiscos. Ele usa painéis deslizantes e títulos que se escrevem sozinhos.

O que ela faz

Este modelo cria um vídeo animado com um visual elétrico e traços de escrita à mão. Ele mostra títulos e textos que aparecem de forma dinâmica em painéis que deslizam.

Quando usar

  • ✓Para criar um título chamativo para uma marca ou campanha.
  • ✓Para revelar um conteúdo de forma criativa com um toque pessoal.
  • ✓Para fazer um vídeo de abertura com estilo moderno e retrô.

Exemplo do que pedir para a IA

“Crie um vídeo animado com o título 'Amanhã é Agora' e o subtítulo 'Descubra o futuro'.”

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

https://github.com/nexu-io/open-design/blob/main/plugins/_official/video-templates/frame-creative-voltage/SKILL.md

Mensagem pronta para colar

Use esta skill para me ajudar: https://github.com/nexu-io/open-design/blob/main/plugins/_official/video-templates/frame-creative-voltage/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.
Como funciona

O modelo usa código de computador (HTML, CSS, GSAP) para animar elementos visuais. Você substitui os textos de exemplo pelos seus, mantendo o estilo e o movimento originais do vídeo.

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 video-template-frame-creative-voltage

Ou baixe só o arquivo:

curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/video-templates/frame-creative-voltage/SKILL.md -o SKILL.md
Conteúdo técnico (SKILL.md)

Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.

Quadro de Tensão Criativa

Elétrico e dividido com escrita à mão — painéis deslocados deslizam para dentro, o título aparece com uma palavra contornada, a escrita se desenha.

O que este modelo é

Uma composição de movimento pronta para HyperFrames em HTML + CSS + GSAP, agrupada sob source/. Ele renderiza deterministicamente para MP4 / WEBM em 16:9, 1:1, padrão de 15s, 60fps.

Ideal para: Título de marca / campanha enérgico · Revelação criativa com um toque humano e desenhado à mão · Herói retrô-moderno

Fluxo de trabalho

  1. Leia source/index.html para entender as camadas nomeadas e a linha do tempo da animação.
  2. Substitua o texto de exemplo (títulos, números, rótulos) pelo conteúdo real do usuário; mantenha o tempo do movimento e a assinatura visual intactos.
  3. Mantenha a composição autônoma sob source/; não introduza ativos de rede externos que possam quebrar uma renderização sem cabeça.
  4. Renderize para MP4 via html-video / renderizador HyperFrames.

Atribuição

Fonte: html-video templates/frame-creative-voltage (licença Apache-2.0). Derivado de frontend-slides (Zara Zhang, MIT) — https://github.com/zarazhangrui/frontend-slides.

Perguntas frequentes

Qual o tamanho e duração do vídeo?

O vídeo pode ter formatos quadrado (1:1) ou widescreen (16:9) e tem duração padrão de 15 segundos, com 60 quadros por segundo.

Posso usar imagens ou links externos?

Não é recomendado usar links ou arquivos externos para garantir que o vídeo seja renderizado corretamente sem precisar de internet.

De onde veio esse modelo?

Este modelo foi adaptado de um projeto chamado 'frontend-slides' e usa código licenciado sob Apache-2.0.

Detalhes

Descrição original do autor

Use this plugin when the user wants a "Creative Voltage Frame" HyperFrames motion video — Electric split with hand-drawn script — offset panels slide in, display title rises with an outlined word, script strokes itself in.

repo: nexu-io/open-design

Popularidade

Estrelas no GitHub
101 mil
Posição no ranking
#618
Licença
Apache-2.0
Atualizada em
16/10/2026

Essa skill é útil?

0

Entre para votar.

Comentários

  • …

Mais skills deste repositório

Skills parecidas