Skip to main content

Regenerating the demo assets

Nothing on the docs site or in the README is a screenshot of a real library. The demo is a React recreation of the UI rendered with Remotion over a CC0 fixture library, the CLI demo is a VHS recording, and the screenshots come from a hermetic run over the same library. The library is 136 stock pictures under tests/e2e/fixtures/library/ that tell one household's June 2024: ordinary days at home, a birthday in the garden, a Saturday in the woods, a week by a lake 590 km away and the drive home. tests/e2e/fake_library.py is the script: which picture belongs to which story, which ones the editor keeps (18) and the reason for every one it leaves out. Every file is credited in CREDITS.md next to the pictures, and tests/test_fixture_library.py pins the credits, the hashes and the 60 MB ceiling.

Command (repo root)Produces
make demo-uidocs-site/static/demo/demo.mp4, the 47-second composition, 1920×1080 H.264; it ends on the film the product made
make demo-herodocs-site/static/img/demo-hero.gif, seconds 3.4 to 15.6 of demo.mp4 (brief, cut, storyboard) then its last 3 s (the film), 720 px, 10 fps, 15.1 s, 3.8 MB, the README hero
make demo-clidocs-site/remotion/public/cli-demo.mp4, VHS recording the real CLI: scripts/demo-cli-hermetic.py runs generate, runs story and runs why against the hermetic fakes from tests/e2e (make demo-cli-run plays the same session without recording)
make demo-outputdocs-site/remotion/public/output-preview.mp4 and output-frame.jpg, cut on the hermetic launch
make demo-output-tripdocs-site/static/demo/trip-preview.mp4 and docs-site/static/img/trip-map-flyover.jpg, the fixture's lake week cut as a trip memory and the still of its map fly-over, both played by the trip memory page. Needs the network: the satellite tiles come from ArcGIS World Imagery and the trip's name from Nominatim, and neither has an offline stand-in
make demo-musicACE-Step candidates for docs-site/remotion/public/demo-music.wav
make screenshotsthe light and dark screenshots under docs-site/static/img/screenshots/
make demo-ui-devRemotion Studio for a live preview

Two entries in docs-site/remotion/public/ are symlinks, so the demo shows the same pictures as the tests and the docs: library points at tests/e2e/fixtures/library (credits in its CREDITS.md) and screenshots at docs-site/static/img/screenshots.

The order that keeps everything consistent after a UI or a fixture change: make screenshots, then make demo-output and make demo-output-trip, then make demo-cli, then make demo-ui (which runs make demo-fixture first, exporting the fixture's cut and first pool page into docs-site/remotion/src/fixture.ts), then make demo-hero. The hero GIF is served from the docs site, so it reaches the README on the next docs deploy, not on the next push.

The scenes live in docs-site/remotion/src/scenes/. When a page name or a button changes in the app, the scene changes with it: tests/e2e/test_demo_assets.py pins the button labels the demo shows against the real pages.