R
remotion
Best practices and comprehensive guide for Remotion - programmatic video creation in React with animations, compositions, and media handling
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Best practices and comprehensive guide for Remotion - programmatic video creation in React with animations, compositions, and media handling
How to use
- Zainstaluj Remotion w swoim projekcie, upewniając się, że masz React ≥18.0.0 i Remotion ≥4.0.0 jako zależności. 2. Utwórz komponenty React, które będą stanowić zawartość wideo – każdy komponent to potencjalna scena lub element animacji. 3. Zdefiniuj kompozycję wideo za pomocą funkcji Remotion, określając czas trwania (w klatkach), wymiary (szerokość, wysokość) oraz props przekazywane do komponentu. 4. Używaj hooka
useCurrentFrame()wewnątrz komponentów, aby uzyskać numer bieżącej klatki i sterować animacjami – zmiana wartości na podstawie numeru klatki tworzy efekt ruchu. 5. Dodaj zasoby (obrazy, wideo, audio, czcionki) do projektu i importuj je do komponentów – Remotion obsługuje trimowanie, zmianę głośności, zmianę tempa i wysokości tonu. 6. Renderuj wideo programowo, wybierając format wyjściowy i ustawienia – framework automatycznie generuje plik wideo na podstawie Twojej definicji kompozycji.