docs-demo
Dodaj interaktywne demo do dokumentacji Remotion za pomocą komponentu Demo
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill docs-demo umożliwia wstawienie interaktywnego demo bezpośrednio na stronach dokumentacji Remotion. Komponenty demo renderują się inline przy użyciu @remotion/player i obsługują interaktywne kontrolki takie jak suwaki, pola wyboru i listy rozwijane. Twoje demo może automatycznie się odtwarzać i reagować na zmianę parametrów użytkownika. Idealne do pokazywania animacji i efektów w kontekście dokumentacji technicznej.
Jak używać
Utwórz nowy komponent React w katalogu packages/docs/components/demos/ (np. MyDemo.tsx). Komponent powinien używać hooków Remotion takich jak useCurrentFrame() i useVideoConfig() do obsługi animacji.
Zarejestruj demo w pliku packages/docs/components/demos/types.ts poprzez zaimportowanie komponentu i eksportowanie obiektu DemoType z polami: id (unikatowy identyfikator), comp (twój komponent), compWidth i compHeight (wymiary kanwy, np. 1280x720), fps (liczba klatek na sekundę, zwykle 30), durationInFrames (długość animacji w klatkach), autoPlay (czy demo odtwarza się automatycznie) oraz options (tablica interaktywnych kontrolek).
Dodaj demo do tablicy demos w pliku packages/docs/components/demos/index.tsx poprzez zaimportowanie stałej demo z ./types i dodanie jej do tablicy.
Jeśli chcesz dodać interaktywne kontrolki, zdefiniuj je w polu options. Każda kontrolka wymaga pola name i optional (wartości: 'no', 'default-enabled' lub 'default-disabled'). Obsługiwane typy to numeric (suwak z min, max, step, default), boolean (checkbox), enum (lista rozwijana z values i default) oraz string (pole tekstowe).
Wartości z kontrolek są przekazywane do komponentu jako inputProps i dostępne jako zwykłe propsy React.
Użyj demo w plikach MDX dokumentacji za pomocą tagu
gdzie twój-id to wartość pola id z kroku 2.