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