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