"Acorda": motion design em código verde, 100% JavaScript

Nenhuma imagem ou vídeo gerado por IA: tudo neste vídeo é código. Chuva de caracteres, texto decodificando, glitch, linhas de TV antiga e até os efeitos sonoros foram feitos com JavaScript e ffmpeg. Só a narração usou IA.

Ferramentas: JavaScript (canvas) · Remotion (React para vídeo) · ffmpeg para os sons · ElevenLabs para a voz
Alternativa sem código: CapCut (detalhes no fim da página)

01 · A chuva de código

Cada coluna tem velocidade e tamanho de rastro próprios. A letra da frente é quase branca e as de trás vão apagando. O segredo para vídeo: calcular tudo a partir do número do quadro, sem guardar estado, para qualquer quadro sair igual.

Teste no navegador agora: salve como chuva.html e abra:

<canvas id="c"></canvas>
<script>
const c = document.getElementById("c"), ctx = c.getContext("2d");
c.width = innerWidth; c.height = innerHeight;
const S = 22, glyphs = "アイウエオカキクケコサシスセソ0123456789IA<>/=+*";
const cols = Math.ceil(c.width / S), rows = Math.ceil(c.height / S);
const rnd = (n) => { const x = Math.sin(n) * 10000; return x - Math.floor(x); };
let frame = 0;
function draw() {
  ctx.fillStyle = "#000"; ctx.fillRect(0, 0, c.width, c.height);
  ctx.font = S + "px monospace";
  for (let col = 0; col < cols; col++) {
    const speed = 0.25 + rnd(col) * 0.55, trail = 12 + Math.floor(rnd(col + 99) * 22);
    const span = rows + trail, head = Math.floor((frame * speed + rnd(col + 7) * span) % span);
    for (let k = 0; k < trail; k++) {
      const row = head - k; if (row < 0) continue;
      ctx.globalAlpha = k === 0 ? 1 : 1 - k / trail;
      ctx.fillStyle = k === 0 ? "#D9FFE6" : "#00FF66";
      ctx.fillText(glyphs[Math.floor(rnd(col * 31 + row + Math.floor(frame / 6)) * glyphs.length)], col * S, row * S);
    }
  }
  ctx.globalAlpha = 1; frame++; requestAnimationFrame(draw);
}
draw();
</script>

Truque do "IA" gigante: desenhe a chuva e depois use ctx.globalCompositeOperation = "destination-in" com o texto por cima. Só a chuva dentro das letras sobrevive.

02 · Texto decodificando

Cada letra mostra caracteres aleatórios por alguns quadros e depois "trava" na letra certa, uma depois da outra.

const decode = (text, frame, start) =>
  [...text].map((ch, i) =>
    ch === " " || frame >= start + i * 1.5 + 8 ? ch : glyphs[Math.floor(Math.random() * glyphs.length)]
  ).join("");

Brilho: text-shadow: 0 0 20px #00FF66, 0 0 50px #00FF6666;

03 · Glitch, TV antiga e impacto

04 · J-cut (o corte de cinema)

No J-cut, o áudio da próxima cena começa antes da imagem trocar. A voz "puxa" o espectador para o corte, e o vídeo fica com ritmo de trailer.

• Neste vídeo, cada fala entra 20 quadros (0,67 s) antes do corte de imagem.
• No CapCut: separe o áudio do clipe seguinte (Extrair áudio) e arraste o início dele para a esquerda, por baixo do final do clipe anterior.

05 · Efeitos sonoros feitos com código (ffmpeg)

Nenhum banco de sons, tudo gerado com matemática:

Impacto grave (boom):

ffmpeg -f lavfi -i "aevalsrc=0.95*sin(2*PI*(38+110*exp(-5*t))*t)*exp(-2.6*t):s=44100:d=1.4" boom.mp3

Glitch digital:

ffmpeg -f lavfi -i "anoisesrc=d=0.4:c=white:a=0.8" -af "highpass=f=900,acrusher=bits=4:samples=12,tremolo=f=38:d=0.95,afade=t=out:st=0.25:d=0.15" glitch.mp3

Subida de tensão (riser):

ffmpeg -f lavfi -i "aevalsrc=(0.15+0.6*t/1.6)*sin(2*PI*180*exp(1.44*t)*t):s=44100:d=1.6" riser.mp3

🧩 Fazendo sem programar (CapCut)

1. Fundo: procure nos Efeitos/Stickers por "código", "digital rain" ou "matrix" e coloque sobre fundo preto.
2. Texto: fonte monoespaçada, cor #00FF66. Animação de entrada "Máquina de escrever" ou "Decodificar" e efeito "Brilho".
3. Glitch: efeito "Glitch" ou "Falha" com 0,2 s em cada corte.
4. TV antiga: efeito "VHS" ou "Linhas de varredura" por cima de tudo.
5. J-cut: puxe o áudio da próxima cena para antes do corte (passo 04).

Testou o código? Grava a tela e marca o @enoisnaia! 🧠⚡