docs-demo

Add an interactive demo to the Remotion documentation. Use when creating a new u003cDemou003e component for docs pages.

1. 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.

2. 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).

3. 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.

4. 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).

5. Wartości z kontrolek są przekazywane do komponentu jako inputProps i dostępne jako zwykłe propsy React.

6. Użyj demo w plikach MDX dokumentacji za pomocą tagu gdzie twój-id to wartość pola id z kroku 2.