Sistema de marca y filosofía de movimiento: el DESIGN.md de tu video

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

Una frase: fondo oscuro y calmo, una idea a la vez, luz en lugar de color; el amarillo solo aparece en detalles.

## Cores
- fundo: #0c0c10
- superfície: #1c1c22
- linha: #3f3f47
- texto: #f4f4f5
- texto secundário: #a1a1aa
- destaque (solo detalle: un filete, un punto, el cabezal de lectura): #e9b949

## Tipografia
- Títulos: sans serif del sistema, peso 700, altura de línea 1,1, máximo 6 palabras.
- Apoyo: sans serif del sistema, peso 400, 48 px en 1920x1080.
- Ninguna palabra sola en la última línea.

## Movimento
- Entrada de 0,5 a 0,8 s con power2.out o power3.out; salida más corta que la entrada, con power2.in.
- Una cosa se mueve a la vez; la siguiente empieza cuando la anterior ya se asentó.
- Todo texto queda al menos 1,2 s quieto y legible.
- Nada a velocidad constante (ease "none" solo en barra de progreso).
- El fotograma principal (título o marca) se sostiene al menos 1,5 s al final.

## Proibido
- Color que no está en "Cores", neón, brillo fuerte, degradado de colores.
- Logo dibujado de memoria: logo solo del archivo de la marca.
- Math.random y Date.now en la composición.

<!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 del DESIGN.md: la composición solo usa estos colores */
      :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>
      // reglas del DESIGN.md: una cosa a la vez, entrada 0,5–0,8 s con power2/3.out, el título se sostiene hasta el final
      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>