feat(videos): add PromoTeaser square and vertical compositions

2026-08-03 07:46:42 +02:00 · 2026-05-08 16:41:44 +08:00
parent 210bf9cded
commit 85acce7e16
3 changed files with 176 additions and 0 deletions
@@ -0,0 +1,79 @@
+import type React from "react";
+import { AbsoluteFill, Series } from "remotion";
+import { GradientBlob } from "@/components/GradientBlob";
+import { GrainOverlay } from "@/components/GrainOverlay";
+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} />
+    </AbsoluteFill>
+  );
+};