SnapOtter/apps/videos/src/compositions/promo-teaser/PromoTeaser.tsx

import type React from "react";
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";
import { LogoRevealScene } from "./scenes/LogoRevealScene";
import { NumberPunchScene } from "./scenes/NumberPunchScene";
import { TaglineCascadeScene } from "./scenes/TaglineCascadeScene";

const BG_BLOBS = [
  {
    color: "#f59e0b",
    radius: 200,
    cx: 300,
    cy: 400,
    a: 1,
    b: 2,
    phaseX: 0,
    phaseY: 0,
    amplitudeX: 60,
    amplitudeY: 40,
  },
  {
    color: "#f97316",
    radius: 150,
    cx: 750,
    cy: 250,
    a: 2,
    b: 1,
    phaseX: 1.2,
    phaseY: 0.8,
    amplitudeX: 50,
    amplitudeY: 60,
  },
  {
    color: "#d97706",
    radius: 180,
    cx: 540,
    cy: 700,
    a: 1,
    b: 1,
    phaseX: 2.4,
    phaseY: 1.6,
    amplitudeX: 70,
    amplitudeY: 50,
  },
];

export const PromoTeaser: React.FC = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: COLOR.dark }}>
      {BG_BLOBS.map((blob, i) => (
        <GradientBlob key={`bg-${i}`} config={blob} duration={600} />
      ))}

      <Series>
        <Series.Sequence durationInFrames={90}>
          <AmbientOpenScene />
        </Series.Sequence>
        <Series.Sequence durationInFrames={150}>
          <NumberPunchScene />
        </Series.Sequence>
        <Series.Sequence durationInFrames={150}>
          <TaglineCascadeScene />
        </Series.Sequence>
        <Series.Sequence durationInFrames={120}>
          <LogoRevealScene />
        </Series.Sequence>
        <Series.Sequence durationInFrames={90}>
          <CTAScene />
        </Series.Sequence>
      </Series>

      <GrainOverlay opacity={0.03} />
      <BackgroundMusic
        src={staticFile("audio/promo-teaser.mp3")}
        volume={0.5}
        fadeInFrames={15}
        fadeOutFrames={45}
        totalFrames={600}
      />
    </AbsoluteFill>
  );
};