html-motion-graphics

HTML Motion Graphics

Crie gráficos em movimento de nível cinematográfico e determinísticos como um arquivo index.html autônomo, alimentado por GSAP, desfoque de movimento SVG direcional, um rig de câmera #world unificado e backgrounds opcionais em Three.js WebGL.

Quando Usar

• Criando um vídeo promocional, abertura de lançamento de produto, teaser ou bumper de marca em index.html.
• Construindo tipografia cinética, tours de produto de interface SaaS ou explicadores visuais com múltiplas cenas.
• Convertendo animações web estáticas estilo slides em verdadeiro design de movimento orientado por câmera.
• Entregando um index.html portátil que abre diretamente via file:// e suporta scrub frame-a-frame e renderização headless para MP4.

Fluxo de Trabalho Principal

Passo 1: Definir o Brief Criativo e o Quadro Conceitual

Antes de escrever código, defina um breve resumo de estilo para que o resultado nunca pareça um modelo de slides genérico:

1. Proporção e Resolução: Padrão 1920x1080 (16:9) para desktop/YouTube, ou 1080x1920 (9:16) para Reels/TikTok/Shorts (envolva o conteúdo em um contêiner .safe com escala 0.78 em transform-origin: 50% 45% para margem de segurança de HUD social em 9:16).
2. Arquitetura do Conceito: Escolha um conceito estrutural claro baseado no assunto, em vez de usar o padrão gancho -> 3 blocos de ícone -> CTA:
   • Jornada Contínua de Mundo / Câmera: Um espaço unificado onde a câmera faz dolly, orbita ou mergulha através das cenas.
   • Tour de Interface Viva: Componentes DOM/SVG reconstruídos onde um cursor/toque interage, painéis se expandem e dados animam deterministicamente.
   • Problema-para-Clareza: O caos visual se acumula, então uma única ação do produto varre o quadro, revelando a marca.
   • Tipografia Cinética Pura: Palavras entram de eixos variados, mudam peso/escala e se montam na marca final.
   • Desenho Animado / Ação Contínua: O personagem ou herói permanece ativo enquanto planos de fundo, instrumentos e rótulos diegéticos mudam ao redor.
3. Sistema de Cores e Superfície: Defina propriedades customizadas CSS (--base, --ink, --accent, --accent-lit). Nunca deixe um fundo plano de cor única. Combine pelo menos duas camadas (ex.: brilho radial de horizonte + gradiente linear, manchas suaves de mesh, ou nebulosa WebGL + poeira flutuante + sobreposição de granulado SVG).
4. Plano de Áudio e Tempo: Fixe a duração total (DURATION em segundos) e mapeie cada batida para timestamps absolutos em segundos.

Passo 2: Construir a Arquitetura Autônoma do index.html

Entregue um único index.html autocontido com <style> e `<script type=