
Framefields: tworzenie wideo za pomocą kodu TypeScript
Twórz kompozycje w TypeScript, sprawdzaj klatki i renderuj wideo na GPU.

Framefields umożliwia tworzenie wideo za pomocą kodu TypeScript. To otwarta biblioteka dla programistów i twórców współpracujących z agentami programistycznymi. Łączy kompozycję obrazu, animację i renderowanie, a materiał źródłowy pozostaje projektem, który można zmieniać i ponownie sprawdzać.
Prosto wyjaśnione: do czego służy ta strona?
Strona prowadzi do silnika i dokumentacji. Wyobraź sobie krótki film produktowy: napis wjeżdża na ekran, wykres rośnie, a obiekt się obraca. Kod określa pozycje i czas tych działań. Framefields wylicza klatki i zapisuje film. Agent może napisać kompozycję, ale potrzebne są środowisko, materiały i kontrola efektu. Sama witryna nie jest gotowym edytorem online obsługiwanym jednym poleceniem.
Z czego można złożyć film?
Tekst wektorowy, animacje pojedynczych znaków i elastyczne układy służą do czołówek oraz sekwencji objaśniających. Warstwy obrazów i nagrań mogą otrzymać korekcję koloru, rozmycie, ziarno, LUT, maski i przejścia. Kamery, światła, materiały oraz importowane modele 3D można łączyć z elementami 2D.
Wykresy, pliki Lottie, ścieżki audio i proceduralne efekty dźwiękowe poszerzają możliwości demonstracji. Sygnały z dźwięku mogą sterować właściwościami obrazu. Przydatność tych elementów zależy od przygotowanego scenariusza, mediów i sposobu sprawdzenia wyniku.
Pierwszy projekt i kontrola eksportu
- Przygotuj Node.js 22 lub nowszy oraz moduły ES zgodnie z instrukcją startową. Uwzględnij wskazane uprawnienie dla skryptu instalacji zależności natywnej.
- Opcjonalnie dodaj umiejętności agenta. Określ tekst, czas, proporcje obrazu, dostępne zasoby i oczekiwany plik.
- Oddziel motyw, kompozycję i skrypt renderowania. Zarejestruj rzeczywiste fonty i pobierz pełne pliki Git LFS.
- Sprawdź typy, wybrane klatki PNG, a następnie siatkę klatek. W lokalnym podglądzie oceń ruch i dźwięk oraz dodaj uwagi do obrazu.
- Wyrenderuj MP4 z QA, przejrzyj zgłoszone problemy i odtwórz wynik przed publikacją.
Podgląd pozwala przewijać czas i przechodzić klatka po klatce. Taki proces ułatwia znalezienie nieczytelnych napisów czy błędnego przejścia przed długim eksportem.
Wymagania, analiza obrazu i beta
Natywny eksport wykorzystuje WebGPU zamiast sekwencji zrzutów Chromium. Nadal potrzebuje zgodnego środowiska graficznego; renderowanie programowe jest wolniejsze. Projekt pozostaje w fazie beta, więc warto przypiąć wersję. Osobny worker może działać na własnej infrastrukturze i przetwarzać zapisane projekty Git.
Lokalne modele ONNX wykrywają obiekty, segmentują sylwetki i szacują pozy. W ścieżce withVision analiza dotyczy poprzedniej klatki, a klatka zero nie ma wyniku. Kontroluj kolejne klatki lub gotowy film, zamiast siatki odległych momentów. Szczegóły opisuje dokumentacja vision.
Licencja, koszty i dane
Stan na 21 października 2026: kod udostępniono na Apache-2.0. Koszty agenta AI, sprzętu, serwera, przechowywania i mediów są osobne. Nie potwierdzono uniwersalnej ceny ani darmowego miesięcznego limitu chmurowego.
Modele pobierane są przy pierwszym użyciu i zapisywane lokalnie. Umiejętności agenta zawierają instrukcje i same nie wysyłają danych. Nie jest to jednak deklaracja dotycząca zewnętrznego asystenta ani wdrożonego serwera.
Częste pytania
Czy agent może napisać film za mnie?
Może tworzyć i poprawiać kompozycję TypeScript według oficjalnych instrukcji. Użytkownik nadal przygotowuje środowisko, zasoby i ocenia efekt.
Jakie wyniki można sprawdzić?
Dokumentacja obejmuje PNG, siatki klatek i MP4. Lokalny odtwarzacz pomaga ocenić animację i dźwięk, a eksport trzeba sprawdzić oddzielnie.
Czy otwarty kod oznacza brak kosztów?
Nie obejmuje opłat za usługi AI, hosting i licencjonowane materiały. Sprawdź też warunki użycia fontów, muzyki i importowanych nagrań.
Oficjalne materiały
- Instrukcje dla agentów: instalacja i praca z projektem.
- Repozytorium GitHub: kod, przykłady i zgłoszenia.
- Oficjalny Discord: społeczność.
- Kanał Gatewai: filmy referencyjne.





