Módulo 4.4 · Reels / Shorts

📐 Formato vertical — 1080×1920 com useVideoConfig

O Reel começa na definição da Composition: width: 1080, height: 1920. Tudo dentro do componente lê essas dimensões via useVideoConfig() para se adaptar — fontes maiores, margens menores, conteúdo centralizado verticalmente no terço superior (onde fica o polegar do usuário).

Composition vertical + hook Root.tsx + Reel.tsx

// Root.tsx — declaração do formato
<Composition
  id="Reel"
  component={ReelVideo}
  width={1080}
  height={1920}
  fps={30}
  durationInFrames={900}  // 30 s
/>

// Reel.tsx — layout responsivo
const { width, height } = useVideoConfig();

// fonte escala com a largura
const baseFontSize = width * 0.055; // ~60px em 1080px

// conteúdo no terço superior (fora da área do polegar)
const contentTop = height * 0.15;

📱 Regras de layout 9:16

Terço superior (0–30%): título e texto principal — área mais visível
Terço central (30–70%): visual/imagem — zona de foco do olho
Terço inferior (70–100%): CTA e subscribe — zona do polegar, interação
Fonte mínima: 60px em 1080px (width * 0.055) — legível em celular pequeno

1080×1920

Resolução 9:16

width*0.055

Fonte base escalável

30 s = 900f

Duração ideal

Terços

Layout em 3 zonas

💬 Legenda animada — typewriter e bounce-text

85% dos Reels são assistidos sem som. Isso significa que o texto é o áudio do vídeo. O typewriter-subtitle.tsx revela o texto letra por letra, enquanto o bounce-text.tsx faz cada palavra entrar com um pequeno pulo — ambos criam a sensação de que alguém está "escrevendo ao vivo".

Typewriter por palavra typewriter-subtitle.tsx

const words = text.split(" ");
const FRAMES_PER_WORD = 8;  // ritmo: 1 palavra a cada 8 frames

{words.map((word, i) => {
  const startFrame = i * FRAMES_PER_WORD;
  const opacity = interpolate(
    frame, [startFrame, startFrame + 6], [0, 1],
    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
  );
  // bounce: entra de baixo
  const y = interpolate(
    frame, [startFrame, startFrame + 10], [20, 0],
    { easing: Easing.out(Easing.back(1.5)), extrapolateLeft: "clamp", extrapolateRight: "clamp" }
  );
  return <span key={i} style={{ opacity, transform: `translateY(${y}px)`, display: "inline-block", margin: "0 4px" }}>{word}</span>;
})}

💡 Ritmo: 8 frames por palavra = 0.27 s

A 30fps, 8 frames por palavra produz leitura natural e fluida. Para frases de impacto que precisam de mais ênfase, use 12–15 frames por palavra. Para listas rápidas ("fácil · rápido · barato"), use 5–6 frames. O ritmo do texto deve imitar o ritmo da fala.

Ritmo

8f por palavra

Bounce

Easing.back(1.5)

Display

inline-block por word

Fonte

≥60px em 1080px

⚡ Glitch no destaque — impacto visual nos primeiros frames

O algoritmo do Reels mede a retenção dos primeiros 3 segundos. O glitch-text.tsx cria um efeito de "interferência" na palavra-chave do vídeo: deslocamentos rápidos de cor (channel offset) por 2–4 frames, criando impacto visual que prende o olhar imediatamente.

✓ Glitch que funciona

✓Glitch nos primeiros 0–15 frames — prende a atenção antes do scroll.
✓Offset pequeno (3–8px) — perceptível sem ser nauseante.
✓random("glitch-N") com seed — mesmo glitch em todos os renders.

✗ Glitch que afasta

✗Glitch em todo o vídeo — cansa e parece bug, não efeito.
✗Offset grande (20px+) — torna o texto ilegível.
✗Math.random() sem seed — texto "piscando" incontrolavelmente no render.

Frame 0–3: glitch intenso

Três camadas do texto deslocadas em X e Y aleatoriamente (mas semeadas). Cores: âmbar, ciano e branco separadas por 3–6px.

Frame 4–6: glitch residual

Offset reduz a 1–2px. A "cura" do glitch é tão importante quanto o glitch — a estabilização reforça a palavra como memória.

Frame 7+: texto estável

O texto principal fica estável pelo restante da cena. O efeito glitch pode reaparecer brevemente quando uma nova frase surge.

Frames 0–6

Janela do glitch

3 camadas

Cor separada por offset

random seed

Determinístico

3–8px

Offset máximo

🎵 Sound-wave visual — ritmo sem áudio

O sound-wave.tsx renderiza uma fileira de barras que oscilam com Math.sin(), simulando uma visualização de áudio. No Reel sem som, esse elemento sinaliza "este vídeo tem energia" — é o equivalente visual de uma batida de música.

Barras oscilantes com Math.sin sound-wave.tsx

const frame = useCurrentFrame();
const BAR_COUNT = 32;
const MAX_H = 80; // px, relativo ao height do container

{Array.from({ length: BAR_COUNT }).map((_, i) => {
  const seed = random(`wave-${i}`); // fase aleatória por barra
  const barH = Math.abs(
    Math.sin(frame * 0.15 + seed * Math.PI * 2)
  ) * MAX_H + 4;  // mínimo 4px para não sumir

  return <div key={i} style={{
    width: 4, height: barH,
    background: i % 3 === 0 ? "#38bdf8" : "#fbbf24",
    borderRadius: 2
  }} />;
})}

Math.sin

frame * 0.15 + seed

32 barras

Densidade visual

random seed

Fase única por barra

Mínimo 4px

Nunca desaparece

🫧 Fundo bokeh — profundidade de campo sintética

O bokeh-circles.tsx gera círculos desfocados flutuando no fundo — o efeito bokeh de câmera real, mas 100% computacional. Cada círculo tem tamanho, posição, opacidade e velocidade vertical aleatórios (semeados), criando profundidade de campo sem câmera física.

🫧 Como o bokeh é gerado

Posição: random("bokeh-x-N") e random("bokeh-y-N") — fixas, determinísticas
Tamanho: random("bokeh-r-N") * 80 + 20 — entre 20 e 100px de raio
Flutuação: translateY = -frame * random("bokeh-speed-N") * 0.3 — sobe lentamente
Reaparecimento: quando y < -r, reposicionar para height + r (loop)
Desfoque: filter: blur(Npx) — entre 8 e 20px para parecer fora de foco

blur

8–20px por círculo

opacity

0.15–0.45

Loop

Reaparece no bottom

z=0

AbsoluteFill base

🔔 Subscribe reminder — CTA nos últimos 5 s

O subscribe-reminder.tsx aparece nos últimos 150 frames (5 s) do Reel — uma animação de sino + texto "Inscreva-se" que não compete com o conteúdo principal, mas está lá quando o espectador está mais engajado (por ter assistido até o fim).

Subscribe com timing relativo ao fim subscribe-reminder.tsx

const { durationInFrames } = useVideoConfig();
const frame = useCurrentFrame();

// aparece nos últimos 150 frames
return (
  <Sequence from={durationInFrames - 150}>
    <SubscribeWidget />
  </Sequence>
);

// SubscribeWidget — sino com shake e texto
const bellFrame = useCurrentFrame(); // local frame (0–150)
const scale = spring({ frame: bellFrame, fps,
  config: { damping: 10, stiffness: 200 }
});
// shake: oscila 3x por segundo
const shakeX = Math.sin(bellFrame * 0.5) *
  interpolate(bellFrame, [0, 10], [8, 0], { extrapolateRight: "clamp" });

💡 Por que o último quinto?

Espectadores que chegam até os últimos 5 s do Reel já são "quentes" — aprovaram o conteúdo. Esse é o melhor momento para pedir uma ação. O subscribe antes disso parece spam; depois disso não há tempo para reagir. O timing correto é o que separa CTA eficaz de intrusão.

Timing

durationInFrames - 150

Frame local

Reinicia do 0

Spring

Entrada do sino

Shake

Math.sin × 8px → 0

🏆 Resumo do Módulo — e do Curso

✓

Composition 1080×1920 — width/height lidos via useVideoConfig para layout responsivo.

✓

Texto é o áudio — typewriter a 8f/palavra + bounce com Easing.back(1.5).

✓

Glitch nos 3 primeiros segundos — 3 camadas, offset 3–8px, random semeado, cura em 6 frames.

✓

Sound-wave visual — Math.sin(frame * 0.15 + seed) com 32 barras oscilantes.

✓

Bokeh computacional — círculos com blur 8–20px flutuando em loop semeado.

✓

Subscribe nos últimos 5 s — Sequence from=durationInFrames-150, frame local do sino.

🎓 Você completou a Trilha 4 — e o curso!

Você passou pelas 4 trilhas: Fundamentos (T1), Recursos e Templates (T2), Combinação e Composição (T3), e agora Projetos Completos (T4). Com os 81 templates da biblioteca e as técnicas que aprendeu, você está equipado para criar qualquer vídeo programático — de aberturas de canal a Reels virais.

← Módulo 4.3 Voltar ao início →