feat(videos): scaffold Remotion workspace with React 18 and Tailwind v3

apps/videos/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@snapotter/videos",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "npx remotion studio",
+    "render": "node scripts/render-all.mjs",
+    "render:single": "npx remotion render"
+  },
+  "dependencies": {
+    "remotion": "^4.0.0",
+    "@remotion/cli": "^4.0.0",
+    "@remotion/renderer": "^4.0.0",
+    "@remotion/bundler": "^4.0.0",
+    "@remotion/tailwind": "^4.0.0",
+    "@remotion/noise": "^4.0.0",
+    "@remotion/motion-blur": "^4.0.0",
+    "@remotion/paths": "^4.0.0",
+    "@remotion/google-fonts": "^4.0.0",
+    "@remotion/shapes": "^4.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.7.0"
+  }
+}

apps/videos/remotion.config.ts

@@ -0,0 +1,6 @@
+import { Config } from "@remotion/cli/config";
+import { enableTailwind } from "@remotion/tailwind";
+
+Config.setVideoImageFormat("jpeg");
+Config.setOverwriteOutput(true);
+Config.overrideWebpackConfig((config) => enableTailwind(config));

apps/videos/src/Root.tsx

@@ -0,0 +1,6 @@
+import "./style.css";
+import { Composition } from "remotion";
+
+export const RemotionRoot: React.FC = () => {
+  return <>{/* Compositions will be added as they are built */}</>;
+};

apps/videos/src/index.ts

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

apps/videos/src/style.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/videos/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {
+      fontFamily: {
+        heading: ["Nunito", "sans-serif"],
+        body: ["Inter", "sans-serif"],
+        mono: ["JetBrains Mono", "monospace"],
+      },
+    },
+  },
+};

apps/videos/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "noEmit": true,
+    "lib": ["ES2022", "DOM"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "remotion.config.ts"]
+}