From f5ea95e9e614e0581d1a32b485600f9f8911ad08 Mon Sep 17 00:00:00 2001
From: SnapOtter <snapotter.hq@gmail.com>
Date: Fri, 8 May 2026 17:41:42 +0800
Subject: [PATCH] feat(videos): wire BackgroundMusic into all 3 promo
 compositions

Tracks from Mixkit (royalty-free, no attribution required):
- PromoTeaser: "Life's a Movie" by Arulo (50% vol)
- XLaunchVideo: "Techno Fest Vibes" by A.M. (40% vol)
- ProductDemo: "Rising Forest" by Diego Nava (30% vol)
---
 .../src/compositions/product-demo/ProductDemo.tsx      | 10 +++++++++-
 .../src/compositions/promo-teaser/PromoTeaser.tsx      | 10 +++++++++-
 apps/videos/src/compositions/x-launch/XLaunchVideo.tsx | 10 +++++++++-
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/apps/videos/src/compositions/product-demo/ProductDemo.tsx b/apps/videos/src/compositions/product-demo/ProductDemo.tsx
index 74d8e67d..f29b887b 100644
--- a/apps/videos/src/compositions/product-demo/ProductDemo.tsx
+++ b/apps/videos/src/compositions/product-demo/ProductDemo.tsx
@@ -1,6 +1,7 @@
 import type React from "react";
-import { AbsoluteFill, Series } from "remotion";
+import { AbsoluteFill, Series, staticFile } from "remotion";
 import { GrainOverlay } from "@/components/GrainOverlay";
+import { BackgroundMusic } from "@/lib/audio";
 import { AiToolsScene } from "./scenes/AiToolsScene";
 import { ApiDocsScene } from "./scenes/ApiDocsScene";
 import { BatchProcessingScene } from "./scenes/BatchProcessingScene";
@@ -41,6 +42,13 @@ export const ProductDemo: React.FC = () => {
       </Series>
 
       <GrainOverlay opacity={0.02} />
+      <BackgroundMusic
+        src={staticFile("audio/product-demo.mp3")}
+        volume={0.3}
+        fadeInFrames={30}
+        fadeOutFrames={60}
+        totalFrames={2250}
+      />
     </AbsoluteFill>
   );
 };
diff --git a/apps/videos/src/compositions/promo-teaser/PromoTeaser.tsx b/apps/videos/src/compositions/promo-teaser/PromoTeaser.tsx
index ea4dc808..9e9aec4a 100644
--- a/apps/videos/src/compositions/promo-teaser/PromoTeaser.tsx
+++ b/apps/videos/src/compositions/promo-teaser/PromoTeaser.tsx
@@ -1,7 +1,8 @@
 import type React from "react";
-import { AbsoluteFill, Series } from "remotion";
+import { AbsoluteFill, Series, staticFile } from "remotion";
 import { GradientBlob } from "@/components/GradientBlob";
 import { GrainOverlay } from "@/components/GrainOverlay";
+import { BackgroundMusic } from "@/lib/audio";
 import { COLOR } from "@/lib/colors";
 import { AmbientOpenScene } from "./scenes/AmbientOpenScene";
 import { CTAScene } from "./scenes/CTAScene";
@@ -74,6 +75,13 @@ export const PromoTeaser: React.FC = () => {
       </Series>
 
       <GrainOverlay opacity={0.03} />
+      <BackgroundMusic
+        src={staticFile("audio/promo-teaser.mp3")}
+        volume={0.5}
+        fadeInFrames={15}
+        fadeOutFrames={45}
+        totalFrames={600}
+      />
     </AbsoluteFill>
   );
 };
diff --git a/apps/videos/src/compositions/x-launch/XLaunchVideo.tsx b/apps/videos/src/compositions/x-launch/XLaunchVideo.tsx
index 414c4cf7..99be15d8 100644
--- a/apps/videos/src/compositions/x-launch/XLaunchVideo.tsx
+++ b/apps/videos/src/compositions/x-launch/XLaunchVideo.tsx
@@ -1,6 +1,7 @@
 import type React from "react";
-import { AbsoluteFill, Series } from "remotion";
+import { AbsoluteFill, Series, staticFile } from "remotion";
 import { GrainOverlay } from "@/components/GrainOverlay";
+import { BackgroundMusic } from "@/lib/audio";
 import { COLOR } from "@/lib/colors";
 import { AiShowcaseScene } from "./scenes/AiShowcaseScene";
 import { FeatureBurstScene } from "./scenes/FeatureBurstScene";
@@ -38,6 +39,13 @@ export const XLaunchVideo: React.FC = () => {
       </Series>
 
       <GrainOverlay opacity={0.03} />
+      <BackgroundMusic
+        src={staticFile("audio/x-launch.mp3")}
+        volume={0.4}
+        fadeInFrames={30}
+        fadeOutFrames={60}
+        totalFrames={1050}
+      />
     </AbsoluteFill>
   );
 };