vidmoat/motion-graphics

Motion graphics

addHtmlElement é para containers e layouts projetados; comandos de texto e legenda são para palavras simples.

Fluxo de trabalho

1. Um componente pronto pode já servir: addMotionComponent adiciona um gráfico editável e orientado pela linha do tempo no sentido do vídeo, sem custo de geração (altere seu texto com setMotionComponent; pesquise no searchCatalogue tipo elements pelos componentes: reveal-title, speaker-card, progress-ring, feature-spotlight, stat-counter, keyword, checklist, chat-bubbles, search-bar, proof-card, icon-card, quote-card). Com base no que um locutor diz, designInserts os posiciona verificando a transcrição. Construa HTML apenas quando nenhum servir.
2. Leia o contrato primeiro: pesquise searchCatalogue tipo commands pelo id exato addHtmlElement e leia seu contrato completo de autoria antes de escrever marcação.
3. Tamanho a partir do conteúdo e espaço: deixe o texto e a área disponível decidirem o tamanho, estilo e posicionamento. Um terço inferior nem sempre precisa de um painel escuro; uma estatística nem sempre precisa de um cartão com gradiente.
4. Anime na linha do tempo usando o contrato de animação orientado pela linha do tempo suportado. Animação CSS baseada em tempo real não é reprodução na linha do tempo e não será exportada.
5. Container versus objetos: uma transformação em um clipe HTML move sua composição inteira, não seus filhos. Para mover um objeto dentro, leia o HTML desse clipe e anime os elementos filhos desejados na linha do tempo, ou use clipes reais separados. Mantenha detalhes anexados no mesmo container em movimento.
6. Componentes personalizados: componentes de movimento TSX são compilados através da ação motion_compile do agentWorkspace (fluxo de trabalho motion-authoring) quando a scriptagem está disponível.
7. Verifique as posições dos objetos em vários momentos nos quadros renderizados. Um zoom de câmera sozinho não pode satisfazer uma ação de objeto.

Armadilhas

• SVG inline precisa de xmlns ou renderiza como zero pixels, silenciosamente.
• Um elemento HTML que pinta um fundo opaco de quadro completo esconde tudo abaixo dele durante toda a sua duração; torne a raiz transparente.
• Se o usuário disser que uma alteração está ausente, inspecione o resultado salvo e altere o mecanismo real em vez de repetir os mesmos quadros-chave.
• UI projetada, diagramas e gráficos processuais podem mostrar um fluxo de trabalho sem geração de imagem paga.

Habilidades relacionadas: titles, text-led-video. Especialista: motion-designer.