HyperFrames
Construye un sistema de motion graphics y una galería con HyperFrames
Diseña escenas reutilizables con recursos fijos, estados identificados y resultados revisables; añade Three.js cuando la explicación espacial lo justifique.
Qué aprenderás
- Separa hechos revisados de movimiento y disposición.
- Una galería hace concreta la aceptación visual.
- Utiliza 3D cuando aporte comprensión espacial.
Antes de empezar
- HTML, CSS y JavaScript básicos
- Node.js 22+ y FFmpeg para el ejercicio local
Explica la frontera del capítulo y utiliza su lista para evaluar un flujo de vídeo repetible.
Conclusiones clave
- Separa hechos revisados de movimiento y disposición.
- Una galería hace concreta la aceptación visual.
- Utiliza 3D cuando aporte comprensión espacial.
Convierte reglas de marca en un sistema pequeño de movimiento
El README presenta frame.md como puente entre diseño web y composición de vídeo. Un ejercicio útil consiste en definir títulos, subtítulos y tarjetas de datos con tipografía, colores y espaciado compartidos. Este capítulo propone un proyecto alrededor de esas ideas, no afirma que ya exista un panel de validación incluido.
Separa hechos de comportamiento visual. Guarda título, subtítulo y cifras como entradas revisadas antes de alimentar la composición. Un generador no debe inventar estadísticas porque otro número haga más atractivo el gráfico. La fuente de contenido sigue teniendo autoridad aunque un agente escriba la animación.
Revisa estados, no solo una reproducción en bucle
Construye una galería con instantes elegidos: estado inicial, entrada terminada, permanencia y salida. Cada imagen debe enlazar a la revisión de composición y explicar qué tiene que verse. Esto permite discutir texto ausente, fuentes sin cargar o movimientos inesperados con más precisión que un MP4 sin anotaciones.
En escenas GPU asíncronas, utiliza el contrato hf-seek inspeccionado cuando corresponda y mantén un tiempo máximo fuera de la composición. Registra el trabajo durante el callback y deja que la promesa represente su finalización. La galería debe mostrar una captura fallida, no sustituirla silenciosamente por una imagen correcta antigua.
Usa Three.js para una pregunta espacial, no como adorno
Una escena Three.js se justifica cuando el aprendizaje depende de relaciones espaciales, movimiento de cámara u objetos tridimensionales. El adaptador inspeccionado proporciona tiempo e integración con el gestor de carga, pero la escena todavía debe derivar su estado de ese tiempo. Girar indefinidamente según el reloj real no demuestra captura repetible.
El proyecto estará terminado cuando otra persona pueda cambiar contenido revisado, regenerar estados, explicar una comprobación fallida y exportar un vídeo trazable. Añade escenas, previsualización interactiva o nube como capacidades separadas. Conserva un diagrama estático o cuadros seleccionados cuando el movimiento pueda ocultar la explicación.
Pasos de implementación
- 1
Define pocas reglas visuales compartidas y tipos de escena.
- 2
Crea datos revisados y estados temporales identificados.
- 3
Captura y revisa esos estados con enlaces de versión.
- 4
Añade animación espacial para un objetivo de aprendizaje explícito.
Ejemplo para copiar
const frameChecks = [
{
"time": 0,
"expected": "fondo listo"
},
{
"time": 1.8,
"expected": "entrada completa"
},
{
"time": 3,
"expected": "permanencia"
},
{
"time": 5,
"expected": "título terminado"
}
];
console.table(frameChecks);
// Datos propuestos; la aplicación debe implementar captura y revisión.Preguntas frecuentes
¿La galería viene incluida en HyperFrames?
Este capítulo propone una aplicación de revisión. Conversión, adaptadores y CLI son capacidades upstream; galería y aceptación son añadidos.
¿Cuándo compensa la complejidad de Three.js?
Cuando el espectador necesita entender un objeto, relación o cámara en el espacio y la escena se controla mediante tiempo explícito.
Fuentes
- README fijadoFuente verificada 2026-09-07
- Adaptador GSAPFuente verificada 2026-09-07
- Despachador temporalFuente verificada 2026-09-07
- Adaptador Three.jsFuente verificada 2026-09-07
- Pruebas GSAPFuente verificada 2026-09-07
- Pruebas del despachadorFuente verificada 2026-09-07