Framefields: vídeo con código y renderizado GPU

Framefields permite crear vídeo con código mediante composiciones TypeScript. Es una biblioteca de código abierto orientada a desarrolladores y creadores que trabajan con agentes de programación. Reúne animación, composición visual y renderizado para producir archivos que se pueden revisar y volver a generar desde el proyecto.

Explicación sencilla: ¿para qué sirve esta web?

La web da acceso al motor y a sus instrucciones. Imagina una presentación de producto con un titular que entra en pantalla, un gráfico que se anima y un objeto que gira. El código describe esos elementos y sus tiempos; Framefields calcula los fotogramas y produce el vídeo. Puedes escribir la composición o pedir ayuda a un agente. Hace falta preparar un proyecto y su entorno de ejecución: visitar la portada no equivale a tener un editor online listo para generar cualquier película.

Qué puedes construir dentro de una composición

La tipografía vectorial, las animaciones por carácter y los diseños flexibles ayudan a crear títulos y secuencias explicativas. Las capas de imagen y vídeo admiten corrección de color, desenfoque, grano, LUT, máscaras y transiciones. Cámaras, iluminación, materiales y modelos 3D importados pueden combinarse con elementos bidimensionales.

También hay gráficos de datos, archivos Lottie, pistas de sonido y efectos sonoros procedurales. Las señales del audio pueden controlar propiedades visuales. Esto resulta útil para demostraciones y piezas con un diseño repetible, siempre que se aporten materiales adecuados y se revise la composición.

De la idea a un primer MP4

1. Sigue la guía oficial de inicio: Node.js 22 o posterior, módulos ES y un entorno gráfico compatible. Configura la autorización indicada para la dependencia nativa antes de instalar.
2. Si usarás un agente, instala las habilidades oficiales. Describe texto, duración, formato horizontal o vertical, materiales disponibles y resultado esperado.
3. Separa tema visual, composición y script de renderizado. Registra fuentes reales y comprueba que los archivos de Git LFS se hayan descargado como medios completos.
4. Ejecuta la comprobación de tipos, examina PNG de momentos concretos y después una cuadrícula de fotogramas. Abre la previsualización local para revisar movimiento y sonido.
5. Exporta con QA activado, revisa sus resultados y reproduce el MP4 antes de entregarlo.

La vista previa permite desplazarse por el tiempo, avanzar fotograma a fotograma y dejar anotaciones sobre la imagen para orientar la siguiente revisión.

Licencia, costes y archivos del proyecto

Verificado el 21 de octubre de 2026: Framefields se distribuye bajo Apache-2.0. El uso local de la biblioteca no se presenta como un plan de créditos mensuales. Las suscripciones del agente, el hardware, el alojamiento y las licencias de los materiales tienen costes o condiciones independientes. No se verificó una tarifa universal de renderizado alojado.

Los modelos de visión se descargan cuando se necesitan por primera vez y se guardan localmente. Las habilidades del agente son instrucciones y no envían datos por sí mismas. Esto no describe las políticas del agente externo ni de un servidor donde decidas ejecutar el proyecto.

Requisitos y límites que conviene conocer

El renderizado nativo utiliza WebGPU y evita una cadena de capturas de un navegador sin interfaz. Aun así, necesita un backend compatible; la ejecución por software puede ser más lenta. El proyecto está en beta, por lo que conviene fijar versiones y probar una escena real. Existe además un worker de renderizado desplegable en infraestructura propia.

La visión local ofrece detección, segmentación y estimación de poses para seguir objetos o recortar sujetos. En la ruta withVision, el resultado corresponde al fotograma renderizado anterior y el primero no tiene detecciones. Comprueba fotogramas consecutivos o el vídeo final, no una cuadrícula dispersa. La documentación de visión detalla esta condición.

Preguntas frecuentes

¿Puedo trabajar con un agente sin escribirlo todo a mano?

Sí, las habilidades oficiales guían al agente al escribir y corregir TypeScript. Sigues necesitando el entorno, las fuentes y una revisión del resultado visual.

¿Qué archivos puedo obtener?

El flujo documentado produce imágenes PNG, cuadrículas de revisión y vídeos MP4. La previsualización local sirve para comprobar movimiento y audio antes del archivo final.

¿Código abierto significa producción sin gastos?

No necesariamente. La licencia de la biblioteca no incluye servicios de IA, computación ni derechos sobre música, imágenes o tipografías que añadas.

Recursos oficiales y comunidad

• Habilidades para agentes: instalación y ciclo de trabajo.
• Código y ejemplos en GitHub: proyectos de referencia e incidencias.
• Discord oficial: conversaciones de la comunidad.
• Canal de Gatewai: vídeos de muestra.