Video Master
Guia de Referências

Todos os elementos visuais da skill, demonstrados com vídeo e explicados para humanos.

60+
Elementos
12
Demos em Vídeo
9
Categorias
24
Cenários Testados
01 · Tipografia
Texto e Tipografia
Como o texto aparece, se move e cria hierarquia visual em cada cena.

Headline Slam

Texto enorme (120-220px) que surge com impacto dramático. O primeiro elemento que o viewer vê. Cria o momento "WOW".

gsap.from("#title", { scale: 2, opacity: 0, duration: 0.4, ease: "back.out(1.4)" })

Body Text

Texto de leitura (20-36px) que complementa o headline. Aparece suavemente logo após o título.

gsap.from("#body", { y: 20, opacity: 0, duration: 0.4, ease: "power2.out" })

Label / Eyebrow

Texto pequeno (16px) acima do título. Identifica a seção ou categoria. Sempre uppercase e monospace.

font: JetBrains Mono 16px, uppercase, letter-spacing: 0.2em

Serif Accent

Texto em fonte serifada itálica (Instrument Serif) para elegância e emoção. Ideal para quotes e nomes.

font-family: "Instrument Serif"; font-style: italic; color: #c05a30

Monospace Code

Texto em JetBrains Mono para exibir comandos, prompts, dados técnicos ou URLs.

font-family: "JetBrains Mono"; font-size: 24px; font-weight: 500

Ghost Text

Texto gigante (500-700px) quase invisível (4-6% opacity) no fundo da cena. Cria profundidade sem distrair.

font-size: 500px; color: rgba(192, 90, 48, 0.05)

Contraste Light/Bold

Usar peso 300 + 800 na mesma frase cria drama. Ex: "Comece" (light) + "agora." (bold).

font-weight: 300 para subtítulo, 800 para destaque
02 · Contadores e Dados
Números que Contam
Todo número importante é animado: conta de 0 ao valor real. Cria impacto que números estáticos não conseguem.

Counter Inteiro

Número que conta de 0 ao valor alvo. Ex: 0 → 47. Usa GSAP onUpdate com Math.round().

var o={val:0}; tl.to(o, {val:47, onUpdate:()=>{el.textContent=Math.round(o.val)}})

Counter Percentual

Número com prefixo "+" e sufixo "%". Ex: +0% → +121%. Formatação no callback.

el.textContent = "+" + Math.round(o.val) + "%"

Counter Decimal

Valor com casa decimal. Ex: 0.0 → 4.7. Usa .toFixed(1) para precisão.

el.textContent = o.val.toFixed(1)

Progress Bar

Barra horizontal que preenche de 0% a 100%. Gradiente de cor opcional. Mostra progresso visual.

tl.to("#bar", { width: "100%", duration: 1.8, ease: "power2.inOut" })

Stat Badge

Pill arredondada com número + label. Ex: "50+ Blocos". Entrada com scale-pop (back.out).

border-radius: 50px; padding: 16px 28px + gsap.from({scale:0.8})

Dados Sequenciais

Métricas aparecem uma a uma (não todas juntas). Cada dado surge quando é mencionado. Cria suspense.

tl.from("#m1",{...}, 5.0); tl.from("#m2",{...}, 7.0); // stagger manual

Progress Ring

Círculo SVG que preenche progressivamente. Ideal para percentuais. Ex: 78% de conclusão.

stroke-dasharray: circumference; stroke-dashoffset: animado de 100% a 22%
03 · Gráficos
Visualização de Dados
Gráficos animados feitos em CSS e SVG puro. Sem bibliotecas externas.

Bar Chart

Barras verticais que crescem de 0 até diferentes alturas. Stagger de 0.15s entre barras. Cores variadas.

gsap.from(".bar", { height: 0, stagger: 0.15, ease: "power2.out" })

Ring Chart

Círculo SVG com preenchimento parcial. Mostra percentuais de forma visual. Animação suave de stroke.

SVG circle: stroke-dasharray + stroke-dashoffset animados

Line Draw

Linha SVG que se desenha progressivamente. Ideal para tendências, crescimento, conexões.

SVG polyline: stroke-dasharray: total; dashoffset: total → 0

Flowchart

Diagrama com nodes (boxes) + arrows (SVG paths). Cada node aparece em sequência, arrows se desenham.

Nodes: scale 0→1 stagger; Arrows: stroke-dashoffset animation
04 · Cards e Containers
Containers Animados
Caixas, pills e cards que organizam informação com estilo e animação.

Step Card

Card retangular com número + título. Ideal para listas de passos. Entrada deslizando da esquerda.

border: 1px solid rgba(accent, 0.08); border-radius: 12px; slide from x:-60

Pill Badge

Container arredondado (border-radius 50px). Melhor que cards retangulares em formato portrait.

border-radius: 50px; padding: 16px 28px; entrance: scale-pop back.out

Prompt Card

Card com código/prompt em monospace. Background accent sutil, borda colorida. Mostra exemplos de prompt.

background: rgba(accent, 0.04); border: 1px solid rgba(accent, 0.15)

Case Card

Card para resultados/cases. Background verde sutil. Contém métricas com counters internos.

background: rgba(26,188,156,0.03); métricas com counter animation

Avatar

Container circular (80-220px) para fotos ou iniciais. Borda accent. Entrada com scale-pop.

border-radius: 50%; border: 2px solid accent; scale: 0.5→1 back.out
05 · Backgrounds e Profundidade
Camadas de Fundo
Elementos decorativos que criam profundidade sem precisar de imagens. 100% CSS.

Radial Glow

Círculo com gradiente radial (15% opacity). Posicionado atrás do conteúdo. Dá "calor" visual à cena.

radial-gradient(circle, rgba(accent, 0.15) 0%, transparent 55%)

Ghost Text

Texto gigante (500px+) quase invisível (4-6%). Cria dimensão e contexto temático no fundo.

font-size: 500px; color: rgba(accent, 0.05); position: absolute

Corner Marks

Cantoneiras em 4 cantos da tela (40x40px, borda 2px). Dão sensação de enquadramento cinematográfico.

border-top: 2px solid rgba(accent, 0.15); border-left: 2px solid...

Decorative Circle

Círculo grande (400-800px) com borda visível (1px, 10% opacity). Elemento geométrico que cria composição.

border-radius: 50%; border: 1px solid rgba(accent, 0.1); width: 600px

Accent Line

Linha horizontal de 3px com gradiente da cor accent para transparente. Separador visual elegante.

height: 3px; background: linear-gradient(90deg, #c05a30, transparent)

Alternância de Fundos

Alternar warm (#f0ebe0) ↔ dark (#1a1714) ↔ accent (#c05a30) entre cenas cria ritmo visual.

Warm → Dark → Warm → ACCENT (clímax) → Dark → Warm
06 · Animações
Tipos de Movimento
Cada tipo de entrada comunica uma emoção diferente. A escolha do ease define o "humor" da animação.

Slam

Entrada agressiva: o elemento surge de 2-3x o tamanho e bate na posição final. Impacto máximo.

gsap.from(el, { scale: 3, opacity: 0, ease: "power4.out", duration: 0.2 })

Slide

Desliza suavemente de uma direção (esquerda, direita, cima, baixo). Profissional e elegante.

gsap.from(el, { x: -60, opacity: 0, ease: "expo.out", duration: 0.4 })

Scale-Pop

Começa menor, cresce além do tamanho final e volta (overshoot). Divertido, energético.

gsap.from(el, { scale: 0.7, ease: "back.out(1.8)", duration: 0.4 })

Micro-Shake

Tremor rápido (±6px) após aparecer. Simula impacto físico. Combina com slam para efeito "boom".

gsap.to(el, { x: 6, yoyo: true, repeat: 5, duration: 0.04 })

Stagger Cascade

Vários elementos entram em sequência com 0.15s de intervalo. Cria sensação de "onda" ou "cascata".

gsap.from(".items", { y: 60, opacity: 0, stagger: 0.15 })

Glow Pulse

Glow radial que pulsa (cresce e diminui). Efeito ambiente que mantém a cena "viva".

gsap.to(glow, { scale: 1.15, yoyo: true, repeat: 3, ease: "sine.inOut" })

Draw Line

Linha que se "desenha" de um ponto ao outro. Ideal para separadores, regras, conexões.

gsap.from(line, { scaleX: 0, transformOrigin: "left", ease: "power3.out" })

CTA Pulse

Botão que pulsa suavemente (scale 1.04) em loop. Chama atenção para a ação desejada.

gsap.to(btn, { scale: 1.04, yoyo: true, repeat: 3, ease: "sine.inOut" })
07 · Transições
Entre Cenas
Como uma cena sai e a próxima entra. Cada tipo comunica algo diferente ao viewer.

Push Up / Down

A cena atual "empurra" para cima/baixo, revelando a próxima. Como virar uma página. Rápido e decisivo.

tl.to("#wrap", { y: -1920, duration: 0.3, ease: "power4.inOut" })

Zoom Through

A cena escala para 1.2-1.5x enquanto desaparece. Sensação de "atravessar" a tela. Ideal para clímax.

tl.to("#wrap", { scale: 1.3, opacity: 0, ease: "power4.in" })

Crossfade

A cena atual some (opacity 0) enquanto a próxima aparece. Suave, calmo, "isso continua".

tl.to("#wrap", { opacity: 0, duration: 0.5, ease: "power2.inOut" })

Glitch Cut

Corte rápido com flash de opacidade e offset horizontal. Energético, tech, disruptivo.

Rapid opacity flicker + x shift, duration: 0.15, ease: "steps(4)"

Fade to Black

A cena final escurece lentamente. Sensação de encerramento, resolução. Só na última cena.

tl.to("#wrap", { opacity: 0, duration: 1.5, ease: "power1.inOut" })
08 · Mock UI
Interfaces Simuladas
Telas de celular, navegadores e dashboards feitos 100% em CSS. Sem imagens.

Phone Mockup

Celular CSS com notch, status bar e content area. 200x360px. Ideal para mostrar apps.

border-radius: 28px; border: 2px solid; notch: 80x24px bg #000

Browser Chrome

Navegador CSS com 3 dots coloridos e barra de endereço. Mostra websites e dashboards.

3 dots (8px circles) + address bar input + content area

CTA Button

Botão sólido com texto e cor de destaque. Entrada com scale-pop. Pode pulsar para chamar ação.

background: #c05a30; color: #fff; border-radius: 12px; padding: 18px 40px

Dashboard Grid

Layout de cards simulando painel de controle. Grid 2x2 com métricas, mini-gráficos, labels.

display: grid; grid-template-columns: 1fr 1fr; gap: 16px + stagger
09 · Mídia
Áudio e Legendas
Elementos para narração, música de fundo e legendas sincronizadas.

Caption Bar

Barra de legenda no bottom da tela. Background semi-transparente com borda accent à esquerda.

position: absolute; bottom: 50px; background: rgba(10,10,10,0.8); border-left: 3px

Música de Fundo

Áudio pré-cortado com ffmpeg + fade in/out. Volume 35-50%. Elemento audio separado do vídeo.

<audio data-start="0" data-volume="0.5" src="bgm.mp3">

TTS Narração

Voz gerada via Kokoro (local, sem API). 54 vozes em 8 idiomas. Timing a 2.5 palavras/segundo.

node CLI tts "texto" --voice af_heart --output narration.wav

Vídeo Overlay

Vídeo do apresentador no lado direito (40% da tela). Pré-cortado com ffmpeg. Muted + audio separado.

<video muted playsinline style="right:0; width:608px"> + <audio>
10-12 · Layouts
3 Tipos de Cena
Alternância de fundos cria ritmo visual. Cada tipo de fundo serve um propósito narrativo.

Layout Warm (Claro)

Fundo cream (#f0ebe0), texto escuro. Para abertura, steps, prompts, CTAs. Sensação acolhedora.

background: #f0ebe0; color: #1a1816; accent: #c05a30

Layout Dark (Escuro)

Fundo dark (#1a1714), texto claro. Para dados, stats, profundidade. Sensação de autoridade.

background: #1a1714; color: #f0ebe0; accents: #d4a520, #1abc9c

Layout Accent (Clímax)

Fundo terracotta (#c05a30), texto branco. Para O MOMENTO mais importante. Máximo 1-2 cenas por vídeo.

background: #c05a30; color: #ffffff; accents: #1a1816 para contraste
Instalar a Skill
Use no seu Claude Code
2 passos. 30 segundos. Funciona em Mac, Windows e Linux.
BAIXAR VIDEO-MASTER SKILL
video-master-skill.zip · 22KB · 11 arquivos

1 Baixe e descompacte o ZIP

Clique no botao acima para baixar. Depois descompacte o arquivo ZIP no seu computador. Voce vai ter uma pasta chamada video-master com o SKILL.md e 10 arquivos de referencia.

2 Peca para o Claude instalar

Abra o Claude Code e diga:

"Instale a skill video-master que esta na pasta ~/Downloads/video-master para ~/.claude/skills/"

O Claude copia os arquivos para o lugar certo automaticamente. Funciona em Mac, Windows e Linux.

3 Pronto! Use a skill.

Reinicie o Claude Code (nova sessao) e digite:

/video-master

Ou simplesmente diga "crie um video", "faca um reel", "monte uma animacao". A skill ativa automaticamente.

Requisitos: Claude Code + Node.js 22+ + FFmpeg + Hyperframes