motion-canvas
Twórz animowane wideo w TypeScript z pełną konfiguracją i rozwiązaniami dla ESM/CommonJS
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Motion Canvas to skill do programistycznego tworzenia filmów animowanych w TypeScript. Zawiera gotowe szablony konfiguracji, krytyczne rozwiązania dla problemów interoperacyjności ESM/CommonJS oraz kompletny przewodnik rozwiązywania błędów. Pracuj z funkcjami generatorów, sygnałami reaktywnymi, grafiką wektorową i synchronizacją audio. Idealne do tworzenia wizualizacji, diagramów, animacji tekstu i kształtów z podglądem w czasie rzeczywistym.
Jak używać
Zainstaluj Motion Canvas i jego zależności (@motion-canvas/core, @motion-canvas/2d, @motion-canvas/ui, @motion-canvas/vite-plugin w wersji 3.0.0 lub wyższej) w swoim projekcie TypeScript.
Skonfiguruj Vite z pluginem Motion Canvas, używając workaround'u createRequire zamiast standardowego import — jest to konieczne, ponieważ @motion-canvas/vite-plugin jest dystrybuowany jako CommonJS i spowoduje błędy w projektach ESM.
Utwórz plik animacji TypeScript z funkcją generatora opisującą sekwencję klatek. Użyj sygnałów reaktywnych do zarządzania wartościami, które zmieniają się w czasie animacji.
Dodaj elementy wizualne — tekst, kształty, grafikę wektorową — używając komponentów Canvas API dostępnych w Motion Canvas. Możesz synchronizować animacje z audio lub voice-over'ami.
Uruchom podgląd w czasie rzeczywistym za pomocą edytora Motion Canvas, aby natychmiast zobaczyć zmiany i iterować nad animacją.
Zbuduj projekt za pomocą Vite — skill zawiera szablony konfiguracji i wskazówki do rozwiązywania typowych błędów budowania i konfiguracji.