mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
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)
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
import type React from "react";
|
import type React from "react";
|
||||||
import { AbsoluteFill, Series } from "remotion";
|
import { AbsoluteFill, Series, staticFile } from "remotion";
|
||||||
import { GrainOverlay } from "@/components/GrainOverlay";
|
import { GrainOverlay } from "@/components/GrainOverlay";
|
||||||
|
import { BackgroundMusic } from "@/lib/audio";
|
||||||
import { AiToolsScene } from "./scenes/AiToolsScene";
|
import { AiToolsScene } from "./scenes/AiToolsScene";
|
||||||
import { ApiDocsScene } from "./scenes/ApiDocsScene";
|
import { ApiDocsScene } from "./scenes/ApiDocsScene";
|
||||||
import { BatchProcessingScene } from "./scenes/BatchProcessingScene";
|
import { BatchProcessingScene } from "./scenes/BatchProcessingScene";
|
||||||
@@ -41,6 +42,13 @@ export const ProductDemo: React.FC = () => {
|
|||||||
</Series>
|
</Series>
|
||||||
|
|
||||||
<GrainOverlay opacity={0.02} />
|
<GrainOverlay opacity={0.02} />
|
||||||
|
<BackgroundMusic
|
||||||
|
src={staticFile("audio/product-demo.mp3")}
|
||||||
|
volume={0.3}
|
||||||
|
fadeInFrames={30}
|
||||||
|
fadeOutFrames={60}
|
||||||
|
totalFrames={2250}
|
||||||
|
/>
|
||||||
</AbsoluteFill>
|
</AbsoluteFill>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
import type React from "react";
|
import type React from "react";
|
||||||
import { AbsoluteFill, Series } from "remotion";
|
import { AbsoluteFill, Series, staticFile } from "remotion";
|
||||||
import { GradientBlob } from "@/components/GradientBlob";
|
import { GradientBlob } from "@/components/GradientBlob";
|
||||||
import { GrainOverlay } from "@/components/GrainOverlay";
|
import { GrainOverlay } from "@/components/GrainOverlay";
|
||||||
|
import { BackgroundMusic } from "@/lib/audio";
|
||||||
import { COLOR } from "@/lib/colors";
|
import { COLOR } from "@/lib/colors";
|
||||||
import { AmbientOpenScene } from "./scenes/AmbientOpenScene";
|
import { AmbientOpenScene } from "./scenes/AmbientOpenScene";
|
||||||
import { CTAScene } from "./scenes/CTAScene";
|
import { CTAScene } from "./scenes/CTAScene";
|
||||||
@@ -74,6 +75,13 @@ export const PromoTeaser: React.FC = () => {
|
|||||||
</Series>
|
</Series>
|
||||||
|
|
||||||
<GrainOverlay opacity={0.03} />
|
<GrainOverlay opacity={0.03} />
|
||||||
|
<BackgroundMusic
|
||||||
|
src={staticFile("audio/promo-teaser.mp3")}
|
||||||
|
volume={0.5}
|
||||||
|
fadeInFrames={15}
|
||||||
|
fadeOutFrames={45}
|
||||||
|
totalFrames={600}
|
||||||
|
/>
|
||||||
</AbsoluteFill>
|
</AbsoluteFill>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import type React from "react";
|
import type React from "react";
|
||||||
import { AbsoluteFill, Series } from "remotion";
|
import { AbsoluteFill, Series, staticFile } from "remotion";
|
||||||
import { GrainOverlay } from "@/components/GrainOverlay";
|
import { GrainOverlay } from "@/components/GrainOverlay";
|
||||||
|
import { BackgroundMusic } from "@/lib/audio";
|
||||||
import { COLOR } from "@/lib/colors";
|
import { COLOR } from "@/lib/colors";
|
||||||
import { AiShowcaseScene } from "./scenes/AiShowcaseScene";
|
import { AiShowcaseScene } from "./scenes/AiShowcaseScene";
|
||||||
import { FeatureBurstScene } from "./scenes/FeatureBurstScene";
|
import { FeatureBurstScene } from "./scenes/FeatureBurstScene";
|
||||||
@@ -38,6 +39,13 @@ export const XLaunchVideo: React.FC = () => {
|
|||||||
</Series>
|
</Series>
|
||||||
|
|
||||||
<GrainOverlay opacity={0.03} />
|
<GrainOverlay opacity={0.03} />
|
||||||
|
<BackgroundMusic
|
||||||
|
src={staticFile("audio/x-launch.mp3")}
|
||||||
|
volume={0.4}
|
||||||
|
fadeInFrames={30}
|
||||||
|
fadeOutFrames={60}
|
||||||
|
totalFrames={1050}
|
||||||
|
/>
|
||||||
</AbsoluteFill>
|
</AbsoluteFill>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user