Framefields: video maken met code en TypeScript

Framefields is een opensource bibliotheek om video met code te maken. Je beschrijft een compositie in TypeScript, bekijkt de gerenderde beelden en exporteert het resultaat. De meegeleverde instructies voor programmeeragenten helpen bij het schrijven en verbeteren van het project.

Eenvoudig uitgelegd: waarvoor dient deze website?

De website is het startpunt voor de software en documentatie. Stel dat je een productintro wilt met een bewegende kop, een grafiek en een draaiend object. In code bepaal je hun plaats en timing; Framefields zet dat om in videobeelden. Je kunt de bron zelf aanpassen of een agent inschakelen. Daarvoor is een ingericht project nodig: de homepage alleen is geen kant-en-klare online video-editor.

Voor wie is deze werkwijze geschikt?

Vooral ontwikkelaars en makers die met een programmeeragent werken kunnen profiteren van bewerkbare bronbestanden en herbruikbare scènes. Node.js 22 of nieuwer, ES-modules en een geschikte grafische backend horen bij de installatie. Native WebGPU-rendering maakt de export zonder Chromium-screenshots. Softwarematig renderen is mogelijk in ondersteunde omgevingen, maar kost meer tijd.

Het project is nog bèta. Leg versies vast en probeer eerst een echte scène op je eigen apparaat. Een zelf te hosten render-worker kan ook een Git-project ophalen, verwerken en de uitvoer uploaden; daar hoort aparte infrastructuur bij.

Van bewegende tekst tot samengestelde 3D-beelden

Vectorletters, animatie per teken en flexibele lay-outs zijn bruikbaar voor titels en uitleg. Afbeeldingen en videolagen kunnen kleurcorrectie, vervaging, korrel, LUT’s, maskers en overgangen krijgen. Camera’s, verlichting, materialen en geïmporteerde 3D-modellen kunnen samen met 2D-elementen in dezelfde compositie staan.

Grafieken, Lottie-bestanden, geluidssporen en procedurele geluidseffecten bieden extra bouwstenen. Audioreactieve signalen kunnen visuele eigenschappen sturen. Het blijft nodig om geschikte media, een duidelijk ontwerp en de juiste timing aan te leveren.

Maak eerst één gecontroleerde export

1. Volg de officiële startgids en stel de beschreven toestemming voor het native installatiescript in.
2. Installeer eventueel de agentvaardigheden. Geef tekst, duur, beeldverhouding, beschikbare bestanden en gewenste uitvoer op.
3. Houd thema, compositie en render-script apart. Registreer echte lettertypebestanden en haal Git-LFS-media volledig op.
4. Controleer types, enkele PNG-frames en daarna een overzichtsraster. Gebruik de lokale speler om beweging en geluid te beoordelen en opmerkingen op het beeld te plaatsen.
5. Exporteer MP4 met QA, lees de bevindingen en speel het eindbestand af.

Lokale beeldanalyse, kosten en gegevens

ONNX-modellen bieden detectie, segmentatie en poseherkenning, bijvoorbeeld voor een label dat een onderwerp volgt. Bij withVision komt de analyse uit het vorige gerenderde frame; frame nul bevat nog geen resultaat. Controleer hiervoor opeenvolgende frames of de export, niet alleen een verspreid raster. Zie de uitleg over vision.

Gecontroleerd op 21 oktober 2026: het pakket gebruikt Apache-2.0. AI-abonnementen, rekenkracht, opslag en rechten op media vallen daar buiten. Een algemene prijs of gratis maandelijks tegoed voor gehost renderen is niet vastgesteld.

Modellen worden bij eerste gebruik gedownload en lokaal bewaard. De agentvaardigheden zijn instructies en versturen zelf geen gegevens. Dat zegt niets over de externe programmeeragent of server die je kiest; beoordeel die verwerking afzonderlijk.

Veelgestelde vragen

Kan een agent het schrijfwerk doen?

Ja, de officiële vaardigheden ondersteunen het schrijven en aanpassen van TypeScript. Een werkende omgeving, geschikte bestanden en menselijke beeldcontrole blijven nodig.

Hoe bekijk ik het resultaat?

Met PNG-frames, overzichtsrasters, een lokale speler en het uiteindelijke MP4-bestand. Bekijk de export met geluid voordat je hem deelt.

Is het hele proces gratis?

De opensource bibliotheek betaalt niet voor AI-diensten, hardware, hosting of mediarechten. Controleer alle onderdelen van je eigen productieproces.

Officiële bronnen

• Instructies voor agents: installatie en werkwijze.
• GitHub met broncode: voorbeelden en problemen melden.
• Officiële Discord: community.
• Gatewai op YouTube: voorbeeldfilms.