feat(film): gated audio track with fade in/out

marketing/product-film/src/components/AudioTrack.tsx

@@ -0,0 +1,18 @@
+import { Audio, staticFile, useCurrentFrame, interpolate } from "remotion";
+import { TOTAL_FRAMES } from "../timing";
+
+// Flip to true after dropping a royalty-free track at public/audio/music.mp3.
+export const HAS_MUSIC = false;
+
+export const AudioTrack: React.FC = () => {
+  const frame = useCurrentFrame();
+  if (!HAS_MUSIC) return null;
+  // fade in at start, fade out over the last 2s
+  const volume = interpolate(
+    frame,
+    [0, 30, TOTAL_FRAMES - 60, TOTAL_FRAMES],
+    [0, 0.7, 0.7, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+  return <Audio src={staticFile("audio/music.mp3")} volume={volume} />;
+};