Framefields: tworzenie wideo za pomocą kodu TypeScript

Twórz kompozycje w TypeScript, sprawdzaj klatki i renderuj wideo na GPU.

framefields.dev
Framefields screenshot

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

  1. 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.
  2. Opcjonalnie dodaj umiejętności agenta. Określ tekst, czas, proporcje obrazu, dostępne zasoby i oczekiwany plik.
  3. Oddziel motyw, kompozycję i skrypt renderowania. Zarejestruj rzeczywiste fonty i pobierz pełne pliki Git LFS.
  4. 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.
  5. 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