From 66f28d9cf99f741b48aa0670a6ff38f2f5e35032 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Tue, 9 Jun 2026 00:34:25 +0200
Subject: [PATCH] feat: add remotion video app to monorepo with UI integration

---
 apps/example-video/package.json        | 22 ++++++++++++++
 apps/example-video/postcss.config.js   |  6 ++++
 apps/example-video/remotion.config.ts  |  4 +++
 apps/example-video/src/Composition.tsx | 40 ++++++++++++++++++++++++++
 apps/example-video/src/Root.tsx        | 18 ++++++++++++
 apps/example-video/src/index.ts        |  4 +++
 apps/example-video/tailwind.config.js  | 11 +++++++
 apps/example-video/tsconfig.json       | 20 +++++++++++++
 docker-compose.yml                     | 19 +++++++++++-
 9 files changed, 143 insertions(+), 1 deletion(-)
 create mode 100644 apps/example-video/package.json
 create mode 100644 apps/example-video/postcss.config.js
 create mode 100644 apps/example-video/remotion.config.ts
 create mode 100644 apps/example-video/src/Composition.tsx
 create mode 100644 apps/example-video/src/Root.tsx
 create mode 100644 apps/example-video/src/index.ts
 create mode 100644 apps/example-video/tailwind.config.js
 create mode 100644 apps/example-video/tsconfig.json

diff --git a/apps/example-video/package.json b/apps/example-video/package.json
new file mode 100644
index 0000000..a56afe8
--- /dev/null
+++ b/apps/example-video/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@mintel/example-video",
+  "version": "1.0.0",
+  "description": "Remotion video project using Mintel UI",
+  "scripts": {
+    "start": "remotion studio",
+    "build": "remotion render"
+  },
+  "dependencies": {
+    "@mintel/ui": "workspace:*",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "remotion": "^4.0.0"
+  },
+  "devDependencies": {
+    "@remotion/cli": "^4.0.0",
+    "@remotion/tailwind": "^4.0.0",
+    "typescript": "^5.0.0",
+    "@types/react": "^18.0.0",
+    "tailwindcss": "^3.0.0"
+  }
+}
diff --git a/apps/example-video/postcss.config.js b/apps/example-video/postcss.config.js
new file mode 100644
index 0000000..12a703d
--- /dev/null
+++ b/apps/example-video/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/apps/example-video/remotion.config.ts b/apps/example-video/remotion.config.ts
new file mode 100644
index 0000000..e8d4dba
--- /dev/null
+++ b/apps/example-video/remotion.config.ts
@@ -0,0 +1,4 @@
+import { Config } from "@remotion/cli/config";
+
+Config.setVideoImageFormat("jpeg");
+Config.setOverwriteOutput(true);
diff --git a/apps/example-video/src/Composition.tsx b/apps/example-video/src/Composition.tsx
new file mode 100644
index 0000000..63e87bc
--- /dev/null
+++ b/apps/example-video/src/Composition.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";
+import { Box, Text } from "@mintel/ui";
+import "../../ui/index.css"; // Ensure Tailwind CSS from UI package is loaded
+
+export const MintelPromo: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Fade in over the first 1 second (30 frames)
+  const opacity = interpolate(frame, [0, fps], [0, 1], {
+    extrapolateRight: "clamp",
+  });
+
+  // Slide up over the first 1 second
+  const translateY = interpolate(frame, [0, fps], [50, 0], {
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <div style={{ flex: 1, backgroundColor: "#f3f4f6" }}>
+      <Box
+        className="w-full h-full flex items-center justify-center bg-gray-100"
+        style={{ opacity }}
+      >
+        <Box
+          className="bg-white p-12 rounded-3xl shadow-2xl flex flex-col items-center"
+          style={{ transform: `translateY(${translateY}px)` }}
+        >
+          <Text variant="h1" className="text-blue-600 mb-4 text-8xl font-bold">
+            Mintel Video
+          </Text>
+          <Text variant="body" className="text-gray-600 text-3xl">
+            Powered by Remotion & @mintel/ui
+          </Text>
+        </Box>
+      </Box>
+    </div>
+  );
+};
diff --git a/apps/example-video/src/Root.tsx b/apps/example-video/src/Root.tsx
new file mode 100644
index 0000000..e65546c
--- /dev/null
+++ b/apps/example-video/src/Root.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { Composition } from "remotion";
+import { MintelPromo } from "./Composition";
+
+export const RemotionRoot: React.FC = () => {
+  return (
+    <>
+      <Composition
+        id="MintelPromo"
+        component={MintelPromo}
+        durationInFrames={150}
+        fps={30}
+        width={1920}
+        height={1080}
+      />
+    </>
+  );
+};
diff --git a/apps/example-video/src/index.ts b/apps/example-video/src/index.ts
new file mode 100644
index 0000000..f31c790
--- /dev/null
+++ b/apps/example-video/src/index.ts
@@ -0,0 +1,4 @@
+import { registerRoot } from "remotion";
+import { RemotionRoot } from "./Root";
+
+registerRoot(RemotionRoot);
diff --git a/apps/example-video/tailwind.config.js b/apps/example-video/tailwind.config.js
new file mode 100644
index 0000000..e186530
--- /dev/null
+++ b/apps/example-video/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{ts,tsx}",
+    "../../packages/ui/src/**/*.{ts,tsx}"
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/apps/example-video/tsconfig.json b/apps/example-video/tsconfig.json
new file mode 100644
index 0000000..19433a1
--- /dev/null
+++ b/apps/example-video/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}
diff --git a/docker-compose.yml b/docker-compose.yml
index f4f1ca5..78bb2d9 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -34,11 +34,28 @@ services:
       - infra
     restart: unless-stopped
     command: >
-      sh -c "corepack enable && pnpm config set store-dir /pnpm && pnpm install --no-frozen-lockfile && pnpm --filter @mintel/ui run ladle serve --host 0.0.0.0 --port 61000"
+      sh -c "corepack enable && pnpm config set store-dir /pnpm && pnpm install --no-frozen-lockfile --ignore-scripts || true; echo 'Starting ladle...'; pnpm --filter @mintel/ui exec ladle serve --host 0.0.0.0 --port 61000"
     labels:
       - "caddy=http://ui.localhost"
       - "caddy.reverse_proxy={{upstreams 61000}}"
 
+  at-mintel-video:
+    image: node:22-alpine
+    working_dir: /app
+    volumes:
+      - .:/app
+      - ui_pnpm_store:/pnpm
+    environment:
+      - CI=true
+    networks:
+      - infra
+    restart: unless-stopped
+    command: >
+      sh -c "corepack enable && pnpm config set store-dir /pnpm && pnpm install --no-frozen-lockfile --ignore-scripts || true; pnpm --filter @mintel/example-video exec remotion studio --host 0.0.0.0 --port 3001"
+    labels:
+      - "caddy=http://video.localhost"
+      - "caddy.reverse_proxy={{upstreams 3001}}"
+
 networks:
   infra:
     external: true