Sistema de marca e filosofia de movimento: o DESIGN.md do seu vídeo

# DESIGN.md — vídeo de exemplo (curso Motion por código, INEMA.CLUB)

Uma frase: fundo escuro e calmo, uma ideia por vez, luz em vez de cor; o amarelo só aparece em detalhe.

## Cores
- fundo: #0c0c10
- superfície: #1c1c22
- linha: #3f3f47
- texto: #f4f4f5
- texto secundário: #a1a1aa
- destaque (só detalhe: um filete, um ponto, a cabeça de leitura): #e9b949

## Tipografia
- Títulos: sem serifa do sistema, peso 700, altura de linha 1,1, no máximo 6 palavras.
- Apoio: sem serifa do sistema, peso 400, 48 px em 1920x1080.
- Nenhuma palavra sozinha na última linha.

## Movimento
- Entrada de 0,5 a 0,8 s com power2.out ou power3.out; saída mais curta que a entrada, com power2.in.
- Uma coisa se move por vez; a próxima começa quando a anterior já assentou.
- Todo texto fica pelo menos 1,2 s parado e legível.
- Nada em velocidade constante (ease "none" só em barra de progresso).
- O quadro principal (título ou marca) segura pelo menos 1,5 s no fim.

## Proibido
- Cor que não está em "Cores", neon, brilho forte, gradiente colorido.
- Logo desenhado de memória: logo só do arquivo da marca.
- Math.random e Date.now na composição.

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1920, height=1080" />
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
    <style>
      /* tokens copiados do DESIGN.md: a composição só usa estas cores */
      :root { --fundo: #0c0c10; --superficie: #1c1c22; --linha: #3f3f47; --texto: #f4f4f5; --texto2: #a1a1aa; --destaque: #e9b949; }
      * { margin: 0; padding: 0; box-sizing: border-box; }
      html, body { width: 1920px; height: 1080px; overflow: hidden; background: var(--fundo); }
      #root { width: 100%; height: 100%; position: relative; font-family: ui-sans-serif, system-ui, sans-serif; }
      #luz { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 45%, var(--superficie) 0%, var(--fundo) 65%); }
      #bloco { position: absolute; left: 220px; top: 340px; }
      #rotulo { color: var(--texto2); font-size: 40px; letter-spacing: 0.2em; text-transform: uppercase; }
      #filete { width: 120px; height: 6px; margin: 28px 0 32px; background: var(--destaque); transform-origin: left center; }
      #titulo { color: var(--texto); font-size: 128px; font-weight: 700; line-height: 1.1; }
      #base { position: absolute; left: 220px; right: 220px; top: 900px; height: 2px; background: var(--linha); transform-origin: left center; }
    </style>
  </head>
  <body>
    <div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1920" data-height="1080">
      <div id="luz"></div>
      <div id="bloco">
        <p id="rotulo">Capítulo 2</p>
        <div id="filete"></div>
        <h1 id="titulo">A luz decide o tom</h1>
      </div>
      <div id="base"></div>
    </div>
    <script>
      // regras do DESIGN.md: uma coisa por vez, entrada 0,5–0,8 s com power2/3.out, título segura até o fim
      const tl = gsap.timeline({ paused: true });
      tl.fromTo("#base", { scaleX: 0 }, { scaleX: 1, duration: 0.8, ease: "power2.out" }, 0.2);
      tl.fromTo("#rotulo", { y: 20, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5, ease: "power2.out" }, 0.8);
      tl.fromTo("#filete", { scaleX: 0 }, { scaleX: 1, duration: 0.5, ease: "power3.out" }, 1.2);
      tl.fromTo("#titulo", { y: 40, opacity: 0 }, { y: 0, opacity: 1, duration: 0.8, ease: "power3.out" }, 1.6);
      window.__timelines["main"] = tl;
    </script>
  </body>
</html>