[AI] Set up dependencies for release video

Install @remotion/transitions, @remotion/media, @remotion/google-fonts, playwright, and @playwright/test. Create src/components, public/recordings, scripts directories and copy Actual Budget logo to public/logo.svg.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

my-video/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "my-video",
+  "version": "1.0.0",
+  "description": "My Remotion video",
+  "repository": {},
+  "license": "UNLICENSED",
+  "private": true,
+  "dependencies": {
+    "@remotion/cli": "4.0.443",
+    "@remotion/google-fonts": "^4.0.443",
+    "@remotion/media": "^4.0.443",
+    "@remotion/tailwind-v4": "4.0.443",
+    "@remotion/transitions": "^4.0.443",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "remotion": "4.0.443",
+    "tailwindcss": "4.0.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.59.1",
+    "@remotion/eslint-config-flat": "4.0.443",
+    "@types/react": "19.2.7",
+    "@types/web": "0.0.166",
+    "eslint": "9.19.0",
+    "playwright": "^1.59.1",
+    "prettier": "3.8.1",
+    "typescript": "5.9.3"
+  },
+  "scripts": {
+    "dev": "remotion studio",
+    "build": "remotion bundle",
+    "upgrade": "remotion upgrade",
+    "lint": "eslint src && tsc"
+  },
+  "sideEffects": [
+    "*.css"
+  ]
+}

my-video/public/logo.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="32" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.13785 30.4226L14.9372 1.11397C14.99 1.00184 15.1027 0.930283 15.2267 0.930283H15.8318C15.9542 0.930283 16.0659 1.00015 16.1195 1.11023L25.0219 19.3999L27.8131 18.3264C27.978 18.2629 28.1632 18.3452 28.2266 18.5102L28.9695 20.4417C29.033 20.6067 28.9507 20.7918 28.7857 20.8553L26.2121 21.8452L29.3875 28.3689C29.4648 28.5278 29.3987 28.7193 29.2398 28.7967L27.379 29.7024C27.2201 29.7798 27.0286 29.7136 26.9512 29.5547L23.6739 22.8215L1.6943 31.2754C1.52935 31.3389 1.3442 31.2566 1.28075 31.0916C1.28006 31.0898 1.27938 31.088 1.27872 31.0862L1.12666 30.6684C1.09749 30.5883 1.10152 30.4998 1.13785 30.4226ZM15.56 6.1518L5.85065 26.7737L22.4837 20.3762L15.56 6.1518Z" fill="white"/>
+<path d="M21.7768 14.5682L22.7095 17.1121L1.50597 24.8867C1.34004 24.9476 1.1562 24.8624 1.09536 24.6964L0.382928 22.7534C0.322087 22.5875 0.407278 22.4037 0.573207 22.3428L21.7768 14.5682Z" fill="white"/>
+</svg>

my-video/src/Composition.tsx

@@ -0,0 +1,3 @@
+export const MyComposition = () => {
+  return null;
+};

my-video/src/Root.tsx

@@ -0,0 +1,18 @@
+import "./index.css";
+import { Composition } from "remotion";
+import { MyComposition } from "./Composition";
+
+export const RemotionRoot: React.FC = () => {
+  return (
+    <>
+      <Composition
+        id="MyComp"
+        component={MyComposition}
+        durationInFrames={60}
+        fps={30}
+        width={1280}
+        height={720}
+      />
+    </>
+  );
+};

my-video/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

my-video/src/index.ts

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