tech-motion-graphics-coder

Tech Motion Graphics Coder

Genera código de animaciones de gráficos en movimiento listas para producción con un estilo estético oscuro minimalista de tecnología industrial.

Resumen

Transforma guiones de texto, arquitecturas técnicas o puntos de datos en código de animación autocontenido en HTML/JS/CSS o React/Remotion con fondos oscuros de patrón de carbono, acentos neón de alto contraste, soportes de esquina HUD y transiciones físicas de resorte.

Cuándo Usarlo

• El usuario desea generar animaciones basadas en código (HTML, React, Framer Motion, GSAP, Motion Canvas o Node.js Remotion) para producción de video o presentaciones técnicas.
• El usuario menciona estilos de explicación técnica (por ejemplo, Silicon Valley 101 / 硅谷101, modo oscuro de Apple Keynote, desgloses de hardware HUD).
• El usuario necesita visualizaciones dinámicas para arquitecturas de chips/hardware, líneas de tiempo de procesos, comparaciones de datos o flujos de trabajo de múltiples pasos.

Especificación Visual y Estética

Aplica estos tokens de diseño exactos en todo el código generado:

1. Fondo y Superficie:

   • Lienzo base: #0D0E11 a #141518 con una sutil cuadrícula CSS de puntos o fibra de carbono (radial-gradient(#2A2D35 1px, transparent 1px) con background-size: 16px 16px).
   • Superficie de tarjeta: rgba(255, 255, 255, 0.03) con backdrop-filter: blur(8px) y 1px solid rgba(255, 255, 255, 0.12).

2. Paleta de Colores:

   • Acento Principal (Activo/Resaltado): #FF5500 (Naranja Industrial) con resplandor 0 0 16px rgba(255, 85, 0, 0.35).
   • Acento Secundario (Datos/Computación): #38BDF8 (Azul Cian).
   • Jerarquía de Texto: Principal #F3F4F6, Secundario #9CA3AF, Atenuado/Inactivo #4B5563.

3. Tipografía y Elementos HUD:

   • Encabezados y Cuerpo: Inter, HarmonyOS Sans SC o PingFang SC, negrita para puntos clave.
   • Números, Años y Especificaciones: JetBrains Mono o Share Tech Mono (font-variant-numeric: tabular-nums).
   • HUD Decorativo: Añadir soportes de esquina en forma de L 6px x 6px (border-top + border-left, etc.) en los contenedores principales, e indicadores naranjas verticales en forma de píldora (width: 4px; background: #FF5500) junto a los títulos de sección.

Arquetipos de Animación Principales

Selecciona el arquetipo apropiado según el contenido del usuario:

1. Línea de Tiempo Deslizante ([Timeline]) :

   • Pista horizontal discontinua (border-bottom: 2px dashed #374151).
   • Nodo activo escala a 1.1x con un borde #FF5500 y un punto de nodo brillante; los nodos históricos se desplazan a la izquierda, escalan a 0.85x, y se atenúan a opacity: 0.4.
   • Las especificaciones de las tarjetas informativas aparecen escalonadamente de forma vertical (translateY(12px) a 0, stagger: 120ms).

2. Arquitectura de Hardware / Sistema ([Architecture]) :

   • Pantalla dividida o cuadrícula Bento anidada que muestra módulos macro (izquierda) y canalizaciones micro internos (derecha).
   • Paquetes de datos representados por píldoras #FF5500 brillantes o pulsos SVG stroke-dasharray que se mueven entre submódulos (por ejemplo, Tarea -> Núcleo -> Caché Compartido).
   • Incluir contadores de actualización en vivo o insignias de estado para contrastar el rendimiento anterior vs. de nueva generación.

3. Tarjetas de Datos Dinámicos y Métricas ([DataChart]) :

   • Gráficos de líneas o barras SVG con animaciones de dibujo stroke-dashoffset.
   • Segmentos de pronóstico renderizados en líneas discontinuas #FF5500.
   • Tarjetas de resumen Bento de 3 columnas con encabezados numerados (01, 02, 03) y barras de progreso horizontales animadas que comparan la línea base (#4B5563) vs. el objetivo (#FF5500).

Pasos de Ejecución

1. Analizar Contenido y Seleccionar Arquetipo:

   • Dividir la entrada del usuario en escenas o fotogramas clave discretos (Paso 1, Paso 2, Paso 3...).
   • Mapear cada escena a [Timeline], [Architecture] o [DataChart].

2. Elegir Pila Tecnológica:

   • Por Defecto (Vista Previa Sin Configuración): Generar un único index.html autocontenido usando Tailwind CSS (CDN), GSAP o Anime.js (CDN), y controladores de estado JS básicos.
   • Renderizado de Video (Cuando se solicita Node.js/Remotion): Generar un componente React modular usando remotion (useCurrentFrame, spring, interpolate) o framer-motion.

3. Implementar Controles de Reproducción y Grabación:

   • Incluir siempre un controlador en la parte inferior derecha o basado en teclado (Espacio para reproducir/pausar, Flecha Derecha/Flecha Izquierda para avanzar entre fotogramas clave, R para repetir).
   • Proporcionar un "Modo Lienzo Limpio" conmutable (presionar H para ocultar los controles de la interfaz de usuario) para que el usuario pueda grabar la pantalla a 1920x1080 (16:9) sin desorden.

4. Aplicar Físicas de Movimiento:

   • Nunca usar transiciones lineales para el movimiento de la interfaz de usuario. Usar cubic-bezier(0.22, 1, 0.36, 1) o físicas de resorte (stiffness: 120, damping: 18).
   • Sincronizar los cambios de estado visual con etiquetas de paso claras para que la animación coincida con el ritmo de la narración.

Consideraciones Adicionales

• Evitar el desorden: Mantener un máximo de 3 dimensiones de datos en pantalla a la vez. Atenuar los módulos inactivos (opacity: 0.35) al enfocarse en un subcomponente específico.
• Relación de aspecto: Fijar el contenedor del escenario principal a 16:9 (aspect-ratio: 16/9, max-width: 1920px) centrado en la ventana gráfica para que los diseños nunca se rompan durante la captura de video.
• Sin dependencias de imágenes externas: Usar formas CSS puras, SVG en línea y tipografía en lugar de URL de imágenes externas que podrían fallar al cargarse.