
Framefields: criar vídeos com código TypeScript
Crie vídeos em TypeScript, confira os quadros e renderize diretamente na GPU.

O Framefields é uma biblioteca de código aberto para criar vídeos com código TypeScript. Desenvolvedores e criadores podem montar uma composição, verificar os quadros e exportar o resultado. As habilidades para agentes de programação ajudam a escrever e revisar um projeto que continua editável.
Em linguagem simples: para que serve este site?
O site apresenta o motor e sua documentação. Imagine uma introdução de produto com um título em movimento, um gráfico animado e um objeto girando. O código descreve posições e tempos; o Framefields transforma isso em quadros e vídeo. Você pode escrever a composição ou pedir ajuda ao agente. É necessário preparar um projeto e um ambiente de execução: a página inicial, sozinha, não é um editor online de geração imediata.
Combine texto, efeitos, 3D e som
Tipografia vetorial, animação por caractere e layouts flexíveis ajudam na criação de títulos e explicações. Camadas de imagem e vídeo podem receber ajustes de cor, desfoque, granulação, LUTs, máscaras e transições. Câmeras, luzes, materiais e modelos 3D importados convivem com elementos 2D.
Gráficos de dados e arquivos Lottie também entram na composição. Trilhas, efeitos sonoros procedurais e sinais que reagem ao áudio permitem coordenar imagem e som. Isso oferece peças reutilizáveis para demos e formatos recorrentes; materiais adequados e revisão visual continuam essenciais.
Um caminho prático até o primeiro MP4
- Configure Node.js 22 ou superior e módulos ES pelo guia oficial de início. Aplique a autorização indicada para o script da dependência nativa antes da instalação.
- Adicione as habilidades opcionais do agente e informe texto, duração, proporção da tela, arquivos disponíveis e saída desejada.
- Separe tema visual, composição e script de renderização. Registre arquivos reais de fontes e baixe integralmente os materiais do Git LFS.
- Verifique os tipos, abra PNGs de momentos escolhidos e depois uma grade de quadros. Use a prévia local com som e anotações na imagem para orientar ajustes.
- Exporte MP4 com QA, examine os avisos e reproduza o arquivo final antes de entregar.
A prévia permite percorrer a linha do tempo e avançar quadro a quadro. Assim, erros de legibilidade e transições podem ser encontrados antes da exportação completa.
Custos, licença e arquivos locais
Verificado em 21 de outubro de 2026: o pacote usa a licença Apache-2.0. Assinaturas de IA, hardware, hospedagem, armazenamento e direitos dos materiais são questões separadas. Não foi confirmado um preço geral de serviço hospedado nem uma franquia mensal gratuita de renderização.
Os modelos de visão são baixados no primeiro uso e ficam em cache local. As habilidades do agente contêm instruções e não enviam dados por conta própria. Isso não define as políticas do assistente externo ou de um servidor que você escolher usar.
Limites de hardware e visão computacional
O renderizador nativo usa WebGPU sem uma sequência de capturas do Chromium. Ainda depende de um backend compatível; renderização por software pode ser mais lenta. O projeto está em beta, então fixe versões e teste uma cena real. Há um worker opcional que pode ser implantado em infraestrutura própria para renderizar projetos Git.
Modelos ONNX locais permitem detectar e segmentar objetos e estimar poses. Na rota withVision, os dados vêm do quadro renderizado anterior, e o quadro zero não tem resultado. Verifique quadros consecutivos ou o vídeo exportado, não apenas uma grade com momentos distantes. Veja o guia de visão.
Perguntas frequentes
O agente pode escrever o vídeo?
Pode ajudar a criar e corrigir a composição TypeScript com as habilidades oficiais. O ambiente, os arquivos e a avaliação do resultado ainda precisam de atenção.
Como conferir a saída?
O fluxo inclui PNGs, grades de quadros, prévia local e MP4. Assista à exportação com áudio; código válido não comprova que o vídeo está pronto.
Código aberto significa custo zero?
Não cobre serviços de IA, computação nem licenças de fontes, músicas e imagens. Avalie cada componente usado na produção.
Recursos oficiais e comunidade
- Habilidades para agentes: instalação e processo de criação.
- Código e exemplos no GitHub: consulta e registro de problemas.
- Discord oficial: comunidade.
- Canal Gatewai: filmes de referência.





