Motion Graphics Técnico

O que Motion Graphics Técnico faz?

Gere motion graphics programáticos e código de animação interativa, prontos para produção, em uma estética industrial-tech minimalista em modo escuro.

Resumo

Transforma scripts de texto, arquiteturas técnicas ou pontos de dados em código de animação HTML/JS/CSS ou React/Remotion auto-contido, apresentando fundos de grade de carbono escuro, acentos neon de alto contraste, suportes de canto HUD e transições com física de mola.

Quando Usar

• O usuário deseja gerar animações baseadas em código (HTML, React, Framer Motion, GSAP, Motion Canvas ou Node.js Remotion) para produção de vídeo ou apresentações técnicas.
• O usuário faz referência a estilos de explicadores técnicos (ex.: Silicon Valley 101 / 硅谷101, Apple Keynote modo escuro, breakdowns de hardware HUD).
• O usuário precisa de visualizações dinâmicas para arquiteturas de chip/hardware, linhas do tempo de processos, comparações de dados ou fluxos de trabalho em várias etapas.

Especificação Visual e Estética

Aplique estes tokens de design exatos em todo o código gerado:

1. Fundo e Superfície:

   • Canvas base: #0D0E11 a #141518 com uma grade sutil de pontos ou fibra de carbono em CSS (radial-gradient(#2A2D35 1px, transparent 1px) com background-size: 16px 16px).
   • Superfície do cartão: rgba(255, 255, 255, 0.03) com backdrop-filter: blur(8px) e 1px solid rgba(255, 255, 255, 0.12).

2. Paleta de Cores:

   • Destaque Primário (Ativo/Realçado): #FF5500 (Laranja Industrial) com brilho 0 0 16px rgba(255, 85, 0, 0.35).
   • Destaque Secundário (Dados/Computação): #38BDF8 (Azul Ciano).
   • Hierarquia de Texto: Primário #F3F4F6, Secundário #9CA3AF, Silenciado/Inativo #4B5563.

3. Tipografia e Elementos HUD:

   • Cabeçalhos e Corpo: Inter, HarmonyOS Sans SC ou PingFang SC, peso negrito para conclusões principais.
   • Números, Anos e Especificações: JetBrains Mono ou Share Tech Mono (font-variant-numeric: tabular-nums).
   • HUD Decorativo: Adicione suportes de canto em L de 6px x 6px (border-top + border-left, etc.) em contêineres primários, e indicadores de pílula verticais laranja (width: 4px; background: #FF5500) ao lado dos títulos das seções.

Arquétipos Centrais de Animação

Selecione o arquétipo apropriado com base no conteúdo do usuário:

1. Linha do Tempo Deslizante ([Timeline])

   • Trilha tracejada horizontal (border-bottom: 2px dashed #374151).
   • Nó ativo escala para 1.1x com uma borda #FF5500 e ponto de nó brilhante; nós históricos deslocam-se para a esquerda, escalam para 0.85x e escurecem para opacity: 0.4.
   • Especificações de callout entram em cena com atraso escalonado verticalmente (translateY(12px) para 0, stagger: 120ms).

2. Arquitetura de Hardware / Sistema ([Architecture])

   • Grade Bento de tela dividida ou aninhada mostrando módulos macro (esquerda) e pipelines internos micro (direita).
   • Pacotes de dados representados por pílulas brilhantes #FF5500 ou pulsos SVG stroke-dasharray movendo-se entre submódulos (ex.: Task -> Core -> Shared Cache).
   • Inclua contadores ou badges de status com atualização ao vivo para contrastar desempenho legado vs. próxima geração.

3. Dados Dinâmicos e Cartões Métricos ([DataChart])

   • Gráficos de polilinha ou barras SVG com animações de desenho stroke-dashoffset.
   • Segmentos de previsão renderizados em linhas tracejadas #FF5500.
   • Cartões de resumo Bento de 3 colunas com cabeçalhos numerados (01, 02, 03) e barras de progresso horizontais animadas comparando linha de base (#4B5563) vs. alvo (#FF5500).

Etapas de Execução

1. Analisar Conteúdo e Selecionar Arquétipo:

   • Divida a entrada do usuário em cenas discretas ou quadros-chave (Passo 1, Passo 2, Passo 3...).
   • Mapeie cada cena para [Timeline], [Architecture] ou [DataChart].

2. Escolher Stack Tecnológica:

   • Padrão (Pré-visualização Zero-Config): Gere um único index.html auto-contido usando Tailwind CSS (CDN), GSAP ou Anime.js (CDN) e controladores de estado JS vanilla.
   • Renderização de Vídeo (Quando Node.js/Remotion for solicitado): Gere um componente React modular usando remotion (useCurrentFrame, spring, interpolate) ou framer-motion.

3. Implementar Controles de Reprodução e Gravação:

   • Sempre inclua um controlador no canto inferior direito ou acionado por teclado (Espaço para reproduzir/pausar, SetaDireita/SetaEsquerda para avançar pelos quadros-chave, R para repetir).
   • Forneça um modo "Canvas Limpo" alternável (pressione H para ocultar controles de UI) para que o usuário possa gravar a tela em 1920x1080 (16:9) sem desordem.

4. Aplicar Física de Movimento:

   • Nunca use transições lineares para movimento de UI. Use cubic-bezier(0.22, 1, 0.36, 1) ou física de mola (stiffness: 120, damping: 18).
   • Sincronize mudanças de estado visual com rótulos de passo claros para que a animação corresponda ao ritmo da narração.

Armadilhas

• Evite desordem: Mantenha no máximo 3 dimensões de dados na tela por vez. Escureça módulos inativos (opacity: 0.35) ao focar em um subcomponente específico.
• Proporção de Tela: Bloqueie o contêiner do palco principal para 16:9 (aspect-ratio: 16/9, max-width: 1920px) centralizado na viewport para que os layouts nunca quebrem durante a captura de vídeo.
• Sem dependências de imagem externas: Use formas CSS puras, SVGs inline e tipografia em vez de URLs de imagem externas que podem falhar ao carregar.