feat: Integrate Remotion for video generation, add video compositions, and adapt ContactForm for Remotion compatibility.

.agent/workflows/video-toolkit.md

@@ -0,0 +1,40 @@
+---
+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