feat(videos): add BackgroundMusic component with fade-in/fade-out

apps/videos/package.json

@@ -0,0 +1,32 @@
+{
+  "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/bundler": "^4.0.0",
+    "@remotion/cli": "^4.0.0",
+    "@remotion/google-fonts": "^4.0.0",
+    "@remotion/media": "^4.0.459",
+    "@remotion/motion-blur": "^4.0.0",
+    "@remotion/noise": "^4.0.0",
+    "@remotion/paths": "^4.0.0",
+    "@remotion/renderer": "^4.0.0",
+    "@remotion/shapes": "^4.0.0",
+    "@remotion/tailwind": "^4.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "remotion": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.7.0"
+  }
+}

apps/videos/src/lib/audio.tsx

@@ -0,0 +1,23 @@
+import { Audio } from "@remotion/media";
+import type React from "react";
+import { interpolate, staticFile, useCurrentFrame } from "remotion";
+
+export const BackgroundMusic: React.FC<{
+  src?: string;
+  volume?: number;
+  fadeInFrames?: number;
+  fadeOutFrames?: number;
+  totalFrames: number;
+}> = ({ src, volume = 0.4, fadeInFrames = 30, fadeOutFrames = 60, totalFrames }) => {
+  const frame = useCurrentFrame();
+  if (!src) return null;
+
+  const vol = interpolate(
+    frame,
+    [0, fadeInFrames, totalFrames - fadeOutFrames, totalFrames],
+    [0, volume, volume, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+  );
+
+  return <Audio src={src} volume={vol} />;
+};