Kit Motion da PixelCorp: o kit de animação do canal, de graça para a sua IA
O mesmo kit que usamos nos nossos vídeos e divulgações: sem imagens, sem editor, só IA. O guia com os números certos de letra, cor, ritmo e movimento, efeitos prontos, cenas e 20 transições. Este é o Kit Motion da PixelCorp, o mesmo que usamos nos vídeos do canal e nas divulgações, e está de graça para você. É um arquivo que a sua IA lê antes de animar: com ele o vídeo sai com brilho, ritmo e transições de cinema, sem imagens e sem programa de edição. As animações do vídeo deste post saíram de 15 pedidos em português, numa conversa nova do Claude Code.

Ivan Lessa
@oivandigital · IA aplicada a negócios, sem hype

Serve pra você?
Ver e baixar no GitHub
O que vem no kit
- Guia de referênciasTamanho de cada tipo de letra, margens do vídeo em pé, tempo de cada palavra (a palavra aparece quando é dita), curvas de movimento e 3 paletas de cores com brilho de neon em camadas.
- Efeitos de luz e de telaBrilho, faísca de luz, mira que trava no alvo, piso em perspectiva, partículas, painel de estúdio, linhas de tela, grão, falha de sinal (glitch) e letra 3D com rastro.
- Cenas prontasPalavra gigante, número contando, pedido digitado, cartões, antes e depois, linha do tempo, gráfico, medidor, selo de prova, lista marcada, preço cortado e outras, cada uma com o jeito certo de entrar e sair.
- 20 transiçõesChicote, estilhaço, túnel, glitch, película, laser, íris, persiana, luz, tubo apagando e mais. O guia diz quando usar cada uma (pesada, leve, corte seco).
O que você precisa
- Uma IA que trabalha no seu computadorEu uso o Claude Code, do Claude (precisa do plano pago do Claude). Uma IA só de conversa, no navegador, não grava o vídeo.
- Mais nada: a sua IA instala o restoVocê não instala nada à mão. No passo 1 você pede para a sua IA instalar o HyperFrames (que grava o vídeo) e o que faltar. Na primeira vez ela pede permissão: leia o que ela pede e aprove.
Como usar em 3 passos
Você só cola três pedidos na sua IA. Ela faz o resto.
Peça para a sua IA instalar o necessário (uma vez)
Abra a sua IA, cole este pedido e aprove o que ela pedir:
Peça para ela baixar o kit do repositório
O repositório é a página oficial do kit, no GitHub. Cole este pedido na mesma conversa:
Cole o pedido do vídeo
Troque o que está entre [colchetes] pelo seu negócio e pela sua oferta. A IA lê o guia, escreve a animação e grava o MP4. Assista ao vídeo inteiro antes de publicar. Há outros pedidos prontos mais abaixo.
Para quem prefere o terminal (opcional)
A prova real: o que aconteceu no meu teste
Teste em 18/10/2026 com a barbearia fictícia "Barbearia do Centro", numa conversa nova do Claude Code (Claude Opus 5.5, versão 2.1.302) com o HyperFrames, numa pasta vazia só com o kit. Uma tentativa, sem retoque.
- O pedidoLeia o arquivo kit-motion.md desta pasta antes de começar e siga os valores dele. Crie um vídeo vertical de 15 segundos para a minha barbearia, Barbearia do Centro, com a oferta: toda quarta, corte e barba por R$ 45. Use o tema escuro ouro do guia, legenda palavra por palavra no ritmo de fala, uma palavra gigante com brilho, a mira travando no preço e duas transições do guia. Termine com "Agende pelo WhatsApp". Grave o vídeo em MP4 nesta pasta.
- O que ela fez e quanto demorouLeu o guia, escreveu a animação (564 linhas), conferiu os erros, olhou quadros do próprio vídeo e gravou um MP4 vertical de 15 segundos. Tempo: 9 min 46 s.
- O que ela decidiu sozinhaDiminuiu a palavra gigante "QUARTA" porque no tamanho do guia ela passava da largura, e usou o chicote e o corte seco como as duas transições. Os rótulos extras que ela pôs ("corte + barba", "toda quarta") só repetem a oferta; não inventou preço. Ela avisou as escolhas no fim.
- Limites do testeFoi uma tentativa: se você repetir, o vídeo sai diferente. O tempo depende do computador e da IA. Na primeira vez que rodei, o modo de teste bloqueou os comandos da IA e ela parou antes de começar; a medida é a segunda, com os comandos liberados.
- O vídeo deste postAs animações (45 segundos, 15 pedidos e 14 transições) foram escritas numa conversa nova do Claude Code com o Claude Opus 5.5, só com o kit numa pasta vazia: 23 minutos, uma tentativa. Depois eu acrescentei a abertura, o fim, a marca e o som (música e efeitos gerados com IA) e suavizei o fundo para facilitar a leitura.
Baixe o kit grátis
O guia completo que a sua IA lê antes de animar. Texto simples, abre em qualquer editor. Grátis e de uso livre.
Ler o texto completo (18 KB)
# Kit Motion · guia de referências para a IA animar vídeos
> Versão 2.0 · 18/10/2026 (v2: distorção real com o `kit-fx.js`) · feito por @oivandigital (PixelCorp) · grátis, uso livre.
> **Arquivos do kit:** `kit-motion.md` (este guia) + `kit-fx.js` (efeitos prontos com distorção real da imagem; seção 10). Os dois ficam na mesma pasta do vídeo.
> **Para a IA que está lendo:** leia este guia inteiro ANTES de escrever qualquer animação e use os valores daqui (tamanhos, cores, ritmo, curvas). Ele foi escrito para o HyperFrames (HTML + CSS + GSAP, gratuito, licença Apache-2.0), mas os números valem para qualquer ferramenta de vídeo por código.
> **Para a pessoa:** você não precisa entender nada disto. Cole o pedido na sua IA e diga "leia o kit-motion.md antes". Ela usa os números certos e o vídeo sai com cara de profissional, em vez de cara de apresentação antiga.
## 0. As 7 regras que mais mudam o resultado
1. **A palavra aparece quando é dita.** Legenda palavra por palavra, 0,22 a 0,35 s por palavra (padrão 0,32 s). Com locução, use o início de cada palavra do arquivo de transcrição; sem locução, simule uma fala de ~3 palavras/s.
2. **Uma ideia por cena, uma ilustração literal por frase.** Se a frase diz "cortou o preço", a tela mostra um preço sendo cortado.
3. **Algo muda a cada 2,5 s no máximo** (corte, zoom, palavra gigante, faísca). Cena nunca dura menos de 1,8 s.
4. **Entrada rápida e decidida, saída mais rápida ainda.** Entrada com desaceleração (ease-out); saída com 40 a 60% do tempo da entrada.
5. **Luz de verdade:** núcleo quase branco + halo colorido em camadas (seção 6). Fundo quase preto, um só tom de destaque por vídeo.
6. **Nunca texto pequeno.** No celular, nada que precisa ser lido fica abaixo de 40 px reais.
7. **Sem sorteio.** Tudo que parece aleatório usa uma função com semente (seção 9), para o vídeo sair igual toda vez.
## 1. Unidade de medida
`u` = 1% do menor lado do quadro. Vídeo em pé 1080×1920 → u = 10,8 px. Tela 1600×1200 → u = 12 px. Todos os tamanhos abaixo estão em `u`.
## 2. Tipografia (fontes gratuitas)
| Papel | Fonte | Tamanho | Detalhes |
|---|---|---|---|
| Palavra gigante (1 a 2 palavras) | Archivo Black | 22u | entrelinha 0,9 · espaçamento −0,03em |
| Número gigante | Archivo Black | 30u | algarismos de largura fixa (tabular-nums) |
| Título | Space Grotesk 700 | 11u | −0,02em |
| Legenda palavra a palavra | Space Grotesk 700 | 8u | entrelinha 1,08 · no máximo 2 linhas |
| Frase de apoio / chips | Manrope 600–700 | 5u / 4,2u | entrelinha 1,2 |
| Rótulo técnico (HUD) | JetBrains Mono 800 | 2,2u | CAIXA ALTA · espaçamento 0,14em |
| Micro rótulo | JetBrains Mono 500 | 1,7u | CAIXA ALTA · 0,1em |
Palavra-chave da frase: cor de destaque + brilho + "soco" de escala (1,25 → 1 em 0,3 s, expo.out).
## 3. Grade e zonas
- Margem lateral 6u; 6 colunas; calha 2u.
- **Vídeo 9:16 (1080×1920):** topo 0–130 px é da interface da rede social; 130–330 px fica para selo/marca; **legenda entre 360 e 700 px; elemento principal entre 700 e 1400 px; nada importante abaixo de 1670 px** (botões do Reels).
- **Tela dentro de um monitor (1600×1200):** legenda em 7–30% da altura, elemento principal em 30–78%, HUD a 4u das bordas.
## 4. Ritmo
| Item | Valor |
|---|---|
| Duração por palavra | 0,22 a 0,35 s (padrão 0,32 s) |
| Palavra entra em | 0,16 s, começando 0,03 s antes de ser dita |
| Cena mínima | 1,8 s |
| Troca máxima | 2,5 s sem nada mudar |
| Leitura de frase inteira (ex.: pedido) | 0,30 s por palavra + 1 s; pedido ≥ 3,5 s parado |
| Pausa antes de um impacto | 0,12 s |
| Sobra no fim da cena | 0,3 s |
Cortes no fim de palavra ou na batida da música; som de impacto no quadro exato do corte; nunca duas transições pesadas seguidas (pesada, leve, corte seco).
## 5. Curvas de movimento (nomes do GSAP)
| Movimento | Curva | Duração |
|---|---|---|
| Palavra/número gigante ("slam") | `expo.out` | 0,45 s, de escala 1,7 e desfoque 18 px para 1 e 0 |
| Cartão, chip, painel | `power3.out` | 0,35 s |
| Selo, ícone, botão (pop) | `back.out(1.7)` | 0,36 s |
| Objeto que cai no lugar (1 por cena) | `elastic.out(1, 0.55)` | 0,7 s |
| Saída | `power2.in` | 0,18 s |
| Câmera (zoom/pan) | `power3.inOut` | 0,8 s |
| Chicote (whip) | sai `power4.in` 0,16 s · entra `expo.out` 0,32 s | |
| Contador, rolagem, varredura | `none` (linear) | |
| Respiração, deriva | `sine.inOut` | |
Anime só posição, escala, rotação, opacidade, filtro e recorte (nunca largura, altura, top ou left).
## 6. Paletas (escolha UMA por vídeo; um só tom de destaque)
| Tema | Fundo | Fundo 2 | Superfície | Texto | Mudo | Destaque | Alerta | Ok |
|---|---|---|---|---|---|---|---|---|
| Escuro neon | #05080d | #0a1220 | #0e1726 | #eaf9ff | #7f93a8 | **#38e1ff** | #ff4d6d | #3dffa8 |
| Escuro ouro | #080604 | #14100a | #1c160d | #fff5e3 | #a8957a | **#ffb341** | #ff5a4f | #9cf27a |
| Escuro magenta | #07030c | #170828 | #1e0b33 | #fdeeff | #9d88b0 | **#ff3fd8** | #ffcc33 | #4dffc3 |
| Claro | #f2f0ea | #e6e3da | #ffffff | #0f1419 | #5d6670 | **#2457ff** | #e0342f | #0f9d58 |
Fundo: degradê radial do Fundo 2 (centro, 42% da altura) para o Fundo (borda, 70%).
### Brilho (bloom) em camadas
Núcleo da letra = 70% branco + 30% destaque. Halo com 5 sombras em `em` (escala com a letra):
```css
.neon { color: #c3f5ff; /* 70% branco + 30% #38e1ff */
text-shadow: 0 0 .01em rgba(255,255,255,.9), 0 0 .04em #38e1ff, 0 0 .12em rgba(56,225,255,.85),
0 0 .3em rgba(56,225,255,.55), 0 0 .6em rgba(56,225,255,.28); }
```
Tema claro: nada de núcleo branco; só 2 sombras suaves (0,06em e 0,2em, 35%).
Se der para pós-processar o vídeo (ffmpeg), some um bloom real: realces acima de 45% → desfoque 9 px tingido com o destaque, mais uma cópia a 1/4 da resolução com desfoque 9 px, as duas em modo "screen".
## 7. Efeitos (receitas curtas)
- **Faísca (flare):** ponto branco com halo radial (#fff 0–7%, destaque 18%, 35% em 40%, transparente em 70%, 18u de diâmetro) + traço horizontal fino de 140u × 0,7u (transparente → destaque → branco → destaque → transparente) + 2 raios de 28u girados ±62° + 4 círculos "fantasmas" de 3 a 9u com borda a 35%. Modo de mistura `screen`. Atravessa a palavra gigante em ~0,9 s logo depois que ela entra; o núcleo pulsa (escala 1 → 1,25, 0,07 s, ida e volta).
- **Mira (crosshair):** linha horizontal e vertical da tela inteira (destaque a 55%), anel tracejado de raio 7u girando 220° em ~2 s, ponto branco com brilho, leitura de coordenadas em mono ("ALVO · 0412 · 0288") que muda enquanto ela anda (`power3.inOut`). Ao chegar: 4 cantos em L entram de escala 2,2 para 1 (0,22 s, expo.out) + flash de 25%.
- **Grade em perspectiva (piso):** dois degradês lineares de linhas de 0,25u a cada 9u, `perspective(60u) rotateX(64deg)`, máscara sumindo no horizonte e embaixo, linha de horizonte acesa (destaque com sombra 3u). Rola para a frente animando `background-position` (linear).
- **Partículas:** num canvas, 40 a 70 pontos com posição calculada a partir do tempo (nunca guardando estado): "poeira" sobe devagar e pisca; "explosão" sai de um ponto com desaceleração exponencial e gravidade. Cada ponto é um degradê radial branco → destaque → transparente.
- **HUD de estúdio:** cantos em L (3,2u, traço 0,35u, destaque 75%), no topo "TÍTULO · CENA 03 / 15" e "● GRAVANDO 00:12:04" (bolinha vermelha piscando a cada 0,26 s), embaixo um rótulo técnico por cena e uma régua com marcas e uma cabeça de leitura que anda durante a cena.
- **Tela (por cima de tudo):** linhas de varredura (faixas de 0,17u a cada 0,45u, preto 16%), grão animado (textura trocando de posição 8 vezes por segundo, 13%, modo `screen`), vinheta radial (45% → 100%, até 55% de preto). Opcional: borda arredondada de tubo.
- **Glitch RGB:** por 0,2 a 0,5 s, a cada 0,04 s: deslocamento horizontal em degraus (até 12 px, diminuindo), duas sombras coloridas `drop-shadow(Npx 0 0 rgba(255,40,90,.85)) drop-shadow(-Npx 0 0 rgba(40,230,255,.85))` e, a cada 3 passos, um recorte de faixa (`clip-path: inset(a% 0 b% 0)`). Termina limpo.
- **Texto 3D extrudado:** 9 sombras de texto empilhadas atrás do brilho, cada uma 0,006em para a direita e 0,011em para baixo, do destaque escurecido até quase preto, mais uma sombra de contato desfocada. **Rastro:** 4 cópias da palavra que fazem o mesmo movimento de entrada com 0,03 s de atraso cada e somem (eco).
- **Orbe de luz:** círculo de 75u com degradê radial do destaque (30% → 0) passeando devagar atrás de tudo (6 s por trecho, `sine.inOut`).
## 8. Cenas modelo (escolha uma por frase)
1. **Palavra gigante** 3D com brilho, rastro, faísca e tremor.
2. **Número gigante** contando, crescendo junto com o valor, tremor e flash no fim.
3. **Pedido digitado** numa barra com cursor; sugestões entrando embaixo; botão de enviar que afunda.
4. **Cartões** (2 a 4) que entram girando e acendem quando a palavra é dita.
5. **Antes × depois** com cortina de luz que varre.
6. **Linha do tempo** com fio de luz e passos que acendem.
7. **Código rolando** num editor, com a linha atual destacada.
8. **Gráfico** de barras que sobem com valor no topo.
9. **Medidor** com arco e ponteiro.
10. **Selo de prova** (carimbo que cai girando, treme e dá flash).
11. **Lista marcada** (o visto se desenha).
12. **Preço cortado:** a mira trava na etiqueta, um laser corta, as metades caem e nasce "GRÁTIS" (ou o novo preço).
13. **Mira no alvo:** a mira trava numa palavra e ela muda de cor.
14. **Fluxo:** nós ligados por linhas tracejadas que correm (pedido → IA → vídeo).
15. **Celular** com o resultado real tocando.
16. **Vitrine:** grade de cartões pequenos que viram em cascata.
17. **Frase** grande com sublinhado de luz.
18. **Iceberg:** acima da água o que se viu; abaixo, o que uma empresa de verdade precisa.
19. **Fecho:** chamada final + "Comenta PALAVRA" + redes.
## 9. Transições (20)
Corte seco com flash · chicote (lateral ou vertical, com desfoque e inclinação) · zoom através · zoom para fora · túnel (anéis de luz) · glitch RGB · estilhaço (vidro em triângulos que voam) · película (fita de filme passando) · inundar (círculo de cor) · íris · persiana · blocos · luz (estouro de exposição) · desfoque · pixel · dobra 3D · empurrar · laser (a tela fecha numa linha e reabre) · estática de TV · desligar (tubo apagando).
Regras: saída em [t − 0,16…0,3 s, t] e entrada em [t, t + 0,3…0,5 s]; som de whoosh/impacto no instante t; alternar pesada, leve e corte seco.
## 10. Distorção real e efeitos prontos (`kit-fx.js`)
O `kit-fx.js` mexe nos PIXELS da cena (filtros SVG de deslocamento sobre o próprio HTML, shaders WebGL, canvas), em vez de só mover caixas. É isso que dá cara de "motion de verdade". Carregue depois do GSAP e chame `FX.inicio({ W: 1080, H: 1920, cor: "<destaque do tema>" })`.
| Função | O que faz |
|---|---|
| `FX.trans.estilhaco(tl, t, "#c1 .quadro", "#c2 .quadro", {cx, cy})` | rachaduras acesas, a imagem real quebra em cacos que voam, flash |
| `FX.trans.tunel(tl, t, a, b)` | a cena é sugada por uma lente que gira (redemoinho real); a nova sai de dentro |
| `FX.trans.glitch(tl, t, a, b)` | separa vermelho/verde/azul de verdade + fatias deslocadas em degraus |
| `FX.trans.chicote(tl, t, a, b, {vertical, sentido})` | borrão de movimento real na direção do giro |
| `FX.trans.derreter(tl, t, a, b)` | a imagem vira líquido e escorre; a nova se solidifica |
| `FX.trans.inundar(tl, t, a, b, {cx, cy})` | círculo cresce com borda ondulada |
| `FX.trans.luz(tl, t, a, b)` · `FX.trans.corte(tl, t, a, b)` | estouro de exposição · corte seco com soco e flash (leves) |
| `FX.filtros.bloom(forca, raio)` → `.url` | brilho REAL (só o que é claro vaza luz). Aplique uma vez em `#mundo` |
| `FX.filtros.onda()/glitch()/lente(cx, cy, giro)` | os mesmos filtros para usar dentro de uma cena (anime `feDisplacementMap` `attr.scale`) |
| `FX.shader(tl, "#canvas", "grade"/"tunel"/"raios"/"plasma"/"ondas", {total, ini, fim})` | fundo vivo em WebGL (piso neon em perspectiva, túnel de luz, raios, plasma, ondas). Um contexto só para o vídeo inteiro; passe `ini`/`fim` da cena |
| `FX.particulas(tl, "#canvas", [{modo, n, t0, dur, x, y}], total)` | `poeira`, `explosao`, `faiscas` (com rastro e gravidade), `vortice`, `chuva`, `estrelas` (dobra espacial). Centenas de pontos com brilho somado |
| `FX.texto3d("#el", {camadas: 24, prof: 4})` | letras 3D extrudadas DE VERDADE (pilha em profundidade); gire com `rotationY/rotationX` + `transformPerspective: 1000` |
| `FX.rastro(tl, "#el", t, de, para)` | eco: cópias repetem a entrada com atraso |
| `FX.contar(tl, "#el", de, ate, t, dur, fmt)` · `FX.digitar(tl, "#el", texto, t)` · `FX.dividir("#el")` | número que sobe · texto digitado · palavras em `.w` |
| `FX.ui.linha([...])`, `FX.ui.barras([...])`, `FX.ui.medidor()`, `FX.ui.anel()` + `FX.ui.animar(tl, "#painel", t, valor)` | mini-gráficos que se desenham, barras que sobem, medidor com ponteiro elástico, anel de progresso |
| `FX.camera.soco/deriva/parallax/tremor` · `FX.flash(tl, t)` | câmera: soco de zoom, aproximação lenta, profundidade, tremor com semente |
**Esqueleto (copie e preencha):**
```html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script src="kit-fx.js"></script>
<style>
#root{position:relative;width:1080px;height:1920px;overflow:hidden;background:#080604}
#mundo{position:absolute;inset:0} /* recebe o bloom e a câmera */
.cena{position:absolute;inset:0}
.quadro{position:absolute;inset:0;overflow:hidden;background:#080604} /* os filtros vão AQUI */
canvas.fundo,#particulas{position:absolute;inset:0;width:100%;height:100%}
</style>
<div id="root" data-composition-id="main" data-start="0" data-duration="45" data-width="1080" data-height="1920">
<div id="mundo">
<!-- cena 1 vai até o corte em 3,0 s e fica mais 0,6 s para a transição -->
<div id="c1" class="cena clip" data-start="0" data-duration="3.6" data-track-index="1" data-layout-allow-overlap data-layout-allow-occlusion>
<div class="quadro"><canvas class="fundo" id="f1" width="540" height="960"></canvas> ...conteúdo... </div></div>
<!-- a cena seguinte COMEÇA no instante do corte (nunca antes) -->
<div id="c2" class="cena clip" data-start="3" data-duration="3.6" data-track-index="2" data-layout-allow-overlap data-layout-allow-occlusion>
<div class="quadro"> ... </div></div>
</div>
<canvas id="particulas" width="1080" height="1920" data-layout-ignore></canvas>
<!-- HUD fixo e rótulos ficam aqui, fora de #mundo -->
</div>
<script>
FX.inicio({ W: 1080, H: 1920, cor: "#ffb341" });
const tl = gsap.timeline({ paused: true });
FX.shader(tl, "#f1", "grade", { total: 45, ini: 0, fim: 3.6 });
FX.particulas(tl, "#particulas", [{ modo: "poeira", n: 160 }, { modo: "explosao", n: 320, t0: 3, dur: 1.2 }], 45);
FX.trans.estilhaco(tl, 3.0, "#c1 .quadro", "#c2 .quadro");
document.querySelector("#mundo").style.filter = FX.filtros.bloom(1, 1).url;
window.__timelines = { main: tl };
</script>
```
Cuidados: filtros só no `.quadro` (nunca no `.clip`); uma transição por corte; o render fica em ~6 s por segundo de vídeo (normal). O `check` acusa sobreposição/contraste nas camadas do texto 3D, nas partículas e no meio das transições: é intencional; Lint e Runtime têm de passar sem erro e o resto você confere nos quadros.
## 11. Nível de impacto (o que separa amador de profissional)
1. **Quadro 0 já aceso e em movimento:** palavra gigante no meio do "slam", fundo em shader andando, partículas, faísca. Nunca começar do preto nem com fade.
2. **Toda cena tem 3 camadas:** fundo vivo (shader, grade ou partículas) + elemento principal GIGANTE (60 a 95% da largura) + interface de apoio densa (HUD, números, chips, mini-gráficos).
3. **Interface rica, não caixa vazia:** um painel tem 4 a 8 blocos (mini-gráfico de linha, barras, medidor, anel, tabela de 3 a 5 linhas com números contando, cronômetro em fonte mono, chips de status, barra de progresso), acendendo em cascata (0,06 s entre itens).
4. **Partículas com densidade:** poeira 120 a 200 sempre; 250 a 400 em cada impacto; 300 a 500 no túnel/dobra espacial.
5. **Câmera viva:** `soco` em cada batida, `deriva` em toda cena, `tremor` em todo impacto.
6. **Transição com distorção real em todo corte**, alternando pesada (estilhaço, túnel, glitch, derreter), média (chicote, inundar) e leve (luz, corte seco). Nunca a mesma pesada duas vezes seguidas.
7. **Bloom real ligado** (`FX.filtros.bloom`) + brilho em camadas na tipografia (seção 6). Contraste alto: fundo quase preto, destaque saturado, núcleo quase branco.
## 12. Vídeo "vitrine" (mostrar várias possibilidades num vídeo só)
- 2 a 4 s por possibilidade; troca de cena a cada 2 a 3 s; 12 a 18 possibilidades em 45 s.
- Em cada cena, um rótulo pequeno do que foi pedido, entre 360 e 560 px de altura: micro rótulo mono "PEDIDO 07" + a frase entre aspas em Space Grotesk 700, 4,5u, até 2 linhas (ex.: pedido: "faça o preço cair e virar GRÁTIS"). Ele entra digitado (`FX.digitar`) em até 0,6 s.
- O efeito ocupa o centro (700 a 1500 px) e é literal: se o pedido diz "gráfico que cresce", o gráfico cresce na tela.
- Abra com a possibilidade mais forte (palavra gigante 3D + faísca + explosão de partículas) e feche com uma frase gigante, sem tela parada no fim.
## 13. Regras técnicas (HyperFrames)
- Uma única linha do tempo GSAP pausada, registrada em `window.__timelines["<id>"]`.
- `fromTo` com valores iniciais explícitos; nada de `Math.random()`/`Date.now()`. "Aleatório" com semente:
`rnd = (i, s) => { const x = Math.sin(i*127.1 + s*311.7) * 43758.5453; return x - Math.floor(x); }`
- Contadores e canvas: um objeto "proxy" animado e `onUpdate` que desenha a partir do valor (função pura do tempo).
- Rode `npx hyperframes check` e corrija tudo antes de `npx hyperframes render`. Confira quadros do vídeo pronto (início, meio e fim de cada cena).
## 14. Antes de entregar (checklist)
- [ ] A frase de abertura aparece em até 0,5 s e a promessa inteira cabe em 3 s.
- [ ] Toda palavra dita aparece na tela no instante certo; palavra-chave em destaque.
- [ ] Nenhuma cena parada por mais de 2,5 s; nenhuma cena com menos de 1,8 s.
- [ ] Um só tom de destaque; fundo quase preto (ou o tema claro inteiro).
- [ ] Nada importante fora das zonas da seção 3.
- [ ] Nada inventado: nomes, preços e ofertas exatamente como a pessoa pediu.
- [ ] Quadro 0 aceso e em movimento; bloom ligado; toda cena com fundo vivo + elemento gigante + interface de apoio (seção 11).
- [ ] Toda transição pesada usa o `kit-fx.js` (distorção real), alternando com leves.
Baixe os pedidos prontos
Seis pedidos para copiar e colar (oferta da semana, lançamento, antes e depois, abertura com o seu nome, lista de dicas, número) e frases para ajustar o vídeo.
Ler o texto completo (4 KB)
# Pedidos prontos · Kit Motion
Como usar: baixe os arquivos `kit-motion.md` e `kit-fx.js`, crie uma pasta vazia, coloque os dois nela, abra a sua IA que trabalha no computador (ex.: Claude Code) nessa pasta e cole um dos pedidos abaixo, trocando o que está entre colchetes. Na primeira vez, a IA pede licença para instalar o que faltar (o HyperFrames, grátis): leia e aprove.
Regra de ouro: **confira o vídeo inteiro antes de publicar.** A IA pode errar um preço ou inventar uma frase. Quem publica é você.
---
## 1. Oferta da semana (o que eu testei)
> Leia o arquivo kit-motion.md desta pasta antes de começar e siga os valores dele. Crie um vídeo vertical de 15 segundos para o meu negócio, [NOME], com a oferta: [OFERTA]. Use o tema [escuro neon / escuro ouro / claro] do guia, legenda palavra por palavra no ritmo de fala, uma palavra gigante com brilho, a mira travando no preço e duas transições do guia. Termine com "[CHAMADA FINAL]". Grave o vídeo em MP4 nesta pasta.
Teste real em 18/10/2026 (barbearia fictícia): 9 min 46 s do pedido ao MP4, numa tentativa, sem retoque.
## 2. Anúncio de lançamento
> Leia o kit-motion.md antes. Faça um vídeo vertical de 20 segundos anunciando [PRODUTO] da [MARCA]. Comece com uma pergunta de dor em texto grande ("[DOR]?"), mostre 3 cartões com os benefícios [1], [2], [3] acendendo na hora certa, um número gigante "[NÚMERO]" e feche com "[CHAMADA]". Tema escuro neon, uma transição de chicote e uma de estilhaço. Grave em MP4.
## 3. Antes e depois
> Leia o kit-motion.md antes. Crie um vídeo vertical de 12 segundos com a cena "antes × depois" do guia: antes "[COMO ERA]", depois "[COMO FICOU]", com a cortina de luz varrendo. Depois, um selo de prova com "[TEXTO DO SELO]". Tema claro. Grave em MP4.
## 4. Abertura com o seu nome ou logo
> Leia o kit-motion.md antes. Faça uma abertura de 6 segundos para os meus vídeos com o nome "[NOME]" em palavra gigante 3D com brilho, faísca atravessando e partículas. Tema escuro ouro. Sem música. Grave em MP4 vertical e outro em MP4 horizontal (16:9).
## 5. Lista de dicas animada
> Leia o kit-motion.md antes. Crie um vídeo vertical de 25 segundos com [N] dicas sobre [ASSUNTO]: um título grande, depois uma dica por cena (legenda palavra por palavra e uma ilustração simples por dica), uma lista marcada no fim e a chamada "[CHAMADA]". Alterne transições leves e pesadas como o guia manda. Grave em MP4.
## 6. Número que impressiona
> Leia o kit-motion.md antes. Crie um vídeo vertical de 10 segundos que mostra o número "[NÚMERO]" contando até o valor final, com o texto "[O QUE O NÚMERO SIGNIFICA]" e o gráfico de barras do guia com [VALORES]. Use só números verdadeiros que eu passei. Grave em MP4.
## 7. Vitrine de efeitos (mostrar tudo o que dá para fazer)
> Leia o arquivo kit-motion.md desta pasta antes de começar e use o kit-fx.js que está junto. Crie um vídeo vertical de [45] segundos, sem áudio, com uma vitrine rápida de [15] possibilidades, uma a cada 3 segundos, cada uma com um rótulo pequeno mostrando o pedido que gerou aquilo: [LISTA]. Use as transições com distorção real do kit em todos os cortes, alternando pesadas e leves. Tema [escuro ouro / escuro neon / escuro magenta] do guia. Impacto desde o primeiro quadro, letras gigantes, muito brilho e muita interface. Grave em MP4.
## 8. Ajustes depois (cole na mesma conversa)
- "Deixe as letras maiores e o vídeo 2 segundos mais curto."
- "Troque o tema para o claro do guia."
- "A palavra [X] tem que aparecer exatamente quando eu digo; use o arquivo de áudio [nome.mp3] e transcreva antes."
- "Troque a transição do meio por um túnel de luz."
- "Mostre o vídeo pronto em quadros (início, meio e fim de cada cena) para eu conferir."
Glossário para leigos
- Motion (animação)Texto, formas e imagens que se mexem no vídeo.
- TransiçãoO jeito de passar de uma cena para a outra (um corte, um chicote, um estilhaço).
- Brilho (bloom)O halo de luz em volta das letras, como um letreiro de neon.
- SkillUm manual que a IA guarda para usar sempre. Aqui não precisa: é um arquivo que você entrega junto com o pedido.
Isso é só a ponta do iceberg.
Na sua empresa de verdade entram modelos mais avançados, que não treinam com os seus dados, mais segurança e LGPD. Na Imersão de IA para o seu negócio, eu coloco a IA para trabalhar com limites definidos por você.


