Add PR video preview

DECISIONS.md

@@ -48,3 +48,8 @@
 - Route performance approach: lazy-load route pages from `src/App.tsx`, especially `/team` and `/deck/*`, to keep the initial app bundle smaller without changing route ownership.
 - Team workspace structure: keep `/team` orchestration in `team-space-view.tsx`, split signed-in server-backed panels into focused `real-team-*` components, and keep the signed-out mock preview separate while sharing tabs, status helpers, and GitHub permission notices.
 - MSW maintainability: keep route handlers in `src/lib/api/mocks/handlers.ts`, but move reusable team-space fixture builders into `src/lib/api/mocks/team-space-fixtures.ts` so handler code focuses on request behavior.
+
+## 2026-06-11
+- PR video approach: use Remotion for frame-accurate React motion graphics and `@remotion/player` for in-app preview at `/pr-video` before rendering.
+- Remotion dependency policy: keep `remotion`, `@remotion/cli`, and `@remotion/player` on the same exact version to avoid render/runtime mismatches.
+- Remotion styling bridge: use `@remotion/tailwind` so Vite preview and Remotion CLI renders share the same Tailwind v3 visual system.

package.json

@@ -9,13 +9,23 @@
 		"lint": "pnpm biome lint .",
 		"format": "pnpm biome format --write .",
 		"typecheck": "pnpm tsc --noEmit",
-		"preview": "vite preview"
+		"preview": "vite preview",
+		"video:studio": "remotion studio src/remotion-entry.tsx",
+		"video:still": "remotion still src/remotion-entry.tsx TeamPoPrVideo artifacts/pr-video/team-po-pr-opening-frame.png --frame=110 --scale=0.5",
+		"video:still:problem": "remotion still src/remotion-entry.tsx TeamPoPrVideo artifacts/pr-video/team-po-pr-problem-frame.png --frame=330 --scale=0.5",
+		"video:still:matching": "remotion still src/remotion-entry.tsx TeamPoPrVideo artifacts/pr-video/team-po-pr-matching-frame.png --frame=520 --scale=0.5",
+		"video:still:workspace": "remotion still src/remotion-entry.tsx TeamPoPrVideo artifacts/pr-video/team-po-pr-workspace-frame.png --frame=820 --scale=0.5",
+		"video:still:report": "remotion still src/remotion-entry.tsx TeamPoPrVideo artifacts/pr-video/team-po-pr-report-frame.png --frame=1120 --scale=0.5",
+		"video:still:closing": "remotion still src/remotion-entry.tsx TeamPoPrVideo artifacts/pr-video/team-po-pr-closing-frame.png --frame=1440 --scale=0.5",
+		"video:still:finale": "remotion still src/remotion-entry.tsx TeamPoPrVideo artifacts/pr-video/team-po-pr-finale-frame.png --frame=1645 --scale=0.5",
+		"video:render": "remotion render src/remotion-entry.tsx TeamPoPrVideo artifacts/pr-video/team-po-pr-opening.mp4"
 	},
 	"dependencies": {
 		"@radix-ui/react-avatar": "^1.1.11",
 		"@radix-ui/react-label": "^2.1.8",
 		"@radix-ui/react-separator": "^1.1.8",
 		"@radix-ui/react-slot": "^1.2.4",
+		"@remotion/player": "4.0.475",
 		"@tanstack/react-query": "^5.90.21",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
@@ -24,11 +34,14 @@
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
 		"react-router-dom": "^7.13.1",
+		"remotion": "4.0.475",
 		"tailwind-merge": "^3.5.0",
 		"tailwindcss-animate": "^1.0.7"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.4.5",
+		"@remotion/cli": "4.0.475",
+		"@remotion/tailwind": "4.0.475",
 		"@types/node": "^24.10.1",
 		"@types/react": "^19.2.7",
 		"@types/react-dom": "^19.2.3",