vidmoat/motion-graphics

Gráficos en movimiento

addHtmlElement está diseñado para contenedores y diseños; los comandos de texto y leyenda son para palabras simples.

Flujo de trabajo

1. Un componente listo puede ser suficiente: addMotionComponent añade un gráfico editable impulsado por la línea de tiempo en la dirección del video, sin costo de generación (cambia su texto con setMotionComponent; busca en searchCatalogue tipo elements los componentes: reveal-title, speaker-card, progress-ring, feature-spotlight, stat-counter, keyword, checklist, chat-bubbles, search-bar, proof-card, icon-card, quote-card). En función de lo que dice un orador, designInserts los coloca verificados contra la transcripción. Construye HTML solo cuando ninguno encaja.
2. Lee primero el contrato: busca en searchCatalogue tipo commands el id exacto addHtmlElement y lee su contrato de autoría completo antes de escribir marcado.
3. Tamaño basado en contenido y espacio: deja que el texto y el área disponible decidan el tamaño, estilo y ubicación. Un tercio inferior no siempre necesita un panel oscuro; una estadística no siempre necesita una tarjeta con degradado.
4. Anima en la línea de tiempo del reloj, usando el contrato de animación impulsada por la línea de tiempo compatible. La animación CSS de pared no es reproducción en línea de tiempo y no se exportará.
5. Contenedor versus objetos: una transformación en un clip HTML mueve toda su composición, no sus hijos. Para mover un objeto dentro, lee el HTML de ese clip y anima los elementos hijo deseados en la línea de tiempo, o usa clips reales separados. Mantén los detalles adjuntos en el mismo contenedor en movimiento.
6. Componentes personalizados: los componentes de movimiento TSX se compilan a través de la acción agentWorkspace motion_compile (flujo de trabajo motion-authoring) cuando la escritura de scripts está disponible.
7. Verifica las posiciones de los objetos en varios momentos en fotogramas renderizados. Un zoom de cámara por sí solo no puede satisfacer una acción de objeto.

Problemas comunes

• El SVG en línea necesita xmlns o se renderiza con cero píxeles, silenciosamente.
• Un elemento HTML que pinta un fondo sólido de pantalla completa oculta todo lo que hay debajo durante toda su duración; haz la raíz transparente.
• Si el usuario dice que un cambio está ausente, inspecciona el resultado guardado y cambia el mecanismo real en lugar de repetir los mismos fotogramas clave.
• La IU diseñada, los diagramas y los gráficos procedurales pueden mostrar un flujo de trabajo sin necesidad de generación de imágenes paga.

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