Marc Mintel
2113055a90
Some checks failed
Build & Deploy Mintel Blog / build-and-deploy (push) Failing after 2m19s
41 lines
1.2 KiB
Markdown
41 lines
1.2 KiB
Markdown
---
|
|
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:
|
|
```bash
|
|
npm run video:preview
|
|
```
|
|
|
|
## 4. Render the video
|
|
// turbo
|
|
To render a deterministic, pixel-perfect MP4 file:
|
|
```bash
|
|
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:
|
|
```bash
|
|
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
|