feat: add remotion video app to monorepo with UI integration

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"
+  }
+}

apps/example-video/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/example-video/remotion.config.ts

@@ -0,0 +1,4 @@
+import { Config } from "@remotion/cli/config";
+
+Config.setVideoImageFormat("jpeg");
+Config.setOverwriteOutput(true);

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>
+  );
+};

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}
+      />
+    </>
+  );
+};

apps/example-video/src/index.ts

@@ -0,0 +1,4 @@
+import { registerRoot } from "remotion";
+import { RemotionRoot } from "./Root";
+
+registerRoot(RemotionRoot);

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: [],
+};

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"]
+}

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