Marc Mintel
2113055a90
Some checks failed
Build & Deploy Mintel Blog / build-and-deploy (push) Failing after 2m19s
1.2 KiB
1.2 KiB
description
| description |
|---|
| Build and render UI showcase videos using Remotion |
UI Showcase Toolkit Workflow
This workflow guides you through creating and rendering deterministic UI showcase videos for LinkedIn/social media.
1. Create a new Composition
Add a new file in video/compositions/ (e.g., MyNewComponent.tsx).
Use the existing ButtonShowcase.tsx as a template. The default format is 1080x1350 (4:5) which is optimized for LinkedIn portrait view.
2. Register the Composition
Open video/Root.tsx and add your new composition using the <Composition /> component.
3. Preview locally
// turbo Run the following command to open the Remotion Studio:
npm run video:preview
4. Render the video
// turbo To render a deterministic, pixel-perfect MP4 file:
npm run video:render
The output will be saved in out/button-showcase.mp4.
5. Scripted Rendering (CLI)
You can customize the props via the CLI:
npx remotion render video/index.ts ButtonShowcase out/button-showcase.mp4 --props '{"text": "Register Now"}'
Tech Stack Note
- Remotion: Video rendering engine
- Tailwind: Styling (reusing project's
tailwind.config.js) - Framer Motion: Supported for complex animations within compositions