motion-canvas
Complete production-ready guide for Motion Canvas with ESM/CommonJS workarounds, full setup templates, and troubleshooting for programmatic video creation using TypeScript
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Complete production-ready guide for Motion Canvas with ESM/CommonJS workarounds, full setup templates, and troubleshooting for programmatic video creation using TypeScript
How to use
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.