Framefields: creare video con codice TypeScript

Framefields è una libreria open source per creare video con codice TypeScript. Unisce composizione, motion graphics e rendering nativo su GPU. È pensata per sviluppatori e creatori che vogliono mantenere il filmato come progetto modificabile, anche con l’aiuto di un agente di programmazione.

In parole semplici: a cosa serve questo sito?

Il sito presenta il motore e le istruzioni per usarlo. Per una breve presentazione di prodotto puoi definire un titolo che entra in scena, un grafico che cresce e un oggetto che ruota. Il codice stabilisce posizione e tempi; Framefields produce i fotogrammi e il video. L’agente può scrivere il progetto, ma servono comunque installazione, materiali e controllo visivo. La sola pagina web non è un editor online pronto a creare qualsiasi filmato.

Animazioni e materiali nello stesso progetto

Testo vettoriale, animazioni dei singoli caratteri e layout flessibili aiutano a realizzare titoli leggibili e sequenze esplicative. Immagini e video possono ricevere correzione colore, sfocatura, grana, LUT, maschere e transizioni. Scene 3D con camere, luci, materiali e modelli importati si combinano con gli elementi 2D.

Grafici, file Lottie, tracce audio ed effetti sonori procedurali consentono di costruire demo e contenuti basati sui dati. I segnali audio possono pilotare proprietà visive. I componenti sono riutilizzabili, ma il ritmo e la qualità della scena dipendono ancora dalle scelte del progetto.

Preparare e verificare il primo MP4

1. Segui la guida iniziale per Node.js 22 o successivo, moduli ES e backend grafico compatibile. Configura l’autorizzazione richiesta per lo script della dipendenza nativa.
2. Installa le skill facoltative dell’agente e indica testo, durata, proporzioni, materiali e risultato desiderato.
3. Separa tema, composizione e script di rendering. Registra file di font reali e scarica completamente gli asset Git LFS.
4. Controlla i tipi, alcuni PNG e una griglia di fotogrammi. Usa l’anteprima locale con audio e annotazioni sull’immagine per correggere il risultato.
5. Esporta con QA attivo, esamina le segnalazioni e riproduci il file MP4 prima della consegna.

La visualizzazione locale consente di scorrere il tempo e avanzare di un fotogramma. L’esportazione nativa usa WebGPU senza una sequenza di screenshot Chromium; il rendering software, nelle configurazioni supportate, è più lento. Il progetto è in beta: conviene fissare la versione. È disponibile anche un worker da distribuire sulla propria infrastruttura per renderizzare progetti Git.

Visione locale, costi e licenza

I modelli ONNX rilevano e segmentano soggetti e stimano pose, utili per etichette in movimento o scontorni. La modalità withVision legge il fotogramma precedente e non ha risultati al fotogramma zero. Verifica sequenze consecutive o il video finale, non una griglia di istanti distanti. La guida alla visione spiega questa differenza.

Al 21 ottobre 2026, il progetto è distribuito con licenza Apache-2.0. Abbonamenti AI, calcolo, storage e diritti sui materiali restano separati. Non è stato verificato un prezzo unico per un servizio cloud ospitato.

I modelli si scaricano al primo utilizzo e rimangono nella cache locale. Le skill contengono istruzioni e non inviano dati autonomamente. Le politiche dell’agente esterno e di eventuali server vanno valutate separatamente prima di condividere file.

Domande frequenti

Devo scrivere tutto il codice?

Un agente può usare le skill ufficiali per comporre e correggere TypeScript. Devi comunque predisporre l’ambiente, fornire gli asset e verificare le immagini.

Quali risultati posso controllare?

Il flusso documentato include PNG, griglie di fotogrammi, anteprima e MP4. Controlla anche audio e leggibilità nel file finale.

Open source significa produzione gratuita?

La libreria non include i costi di servizi AI, hosting o materiali. La sua licenza non sostituisce i diritti necessari per musica, font e video importati.

Risorse ufficiali

• Skill per gli agenti: installazione e flusso di lavoro.
• Repository GitHub: sorgenti, esempi e segnalazioni.
• Discord ufficiale: confronto con la community.
• Canale Gatewai: filmati dimostrativi.