diff --git a/apps/videos/src/Root.tsx b/apps/videos/src/Root.tsx
index 0a6f4a51..9f13a22a 100644
--- a/apps/videos/src/Root.tsx
+++ b/apps/videos/src/Root.tsx
@@ -14,6 +14,8 @@ import { FormatUniverse } from "./compositions/features/FormatUniverse";
import { PipelineFlow } from "./compositions/features/PipelineFlow";
import { OneCommand } from "./compositions/hero/OneCommand";
import { PrivacyPromise } from "./compositions/hero/PrivacyPromise";
+import { PromoTeaser } from "./compositions/promo-teaser/PromoTeaser";
+import { PromoTeaserVertical } from "./compositions/promo-teaser/PromoTeaserVertical";
import { TEXT } from "./lib/fonts";
const ComponentTest: React.FC = () => (
@@ -119,5 +121,21 @@ export const RemotionRoot: React.FC = () => (
width={1920}
height={1080}
/>
+
+
>
);
diff --git a/apps/videos/src/compositions/promo-teaser/PromoTeaser.tsx b/apps/videos/src/compositions/promo-teaser/PromoTeaser.tsx
new file mode 100644
index 00000000..ea4dc808
--- /dev/null
+++ b/apps/videos/src/compositions/promo-teaser/PromoTeaser.tsx
@@ -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 (
+
+ {BG_BLOBS.map((blob, i) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/apps/videos/src/compositions/promo-teaser/PromoTeaserVertical.tsx b/apps/videos/src/compositions/promo-teaser/PromoTeaserVertical.tsx
new file mode 100644
index 00000000..53d4f5f0
--- /dev/null
+++ b/apps/videos/src/compositions/promo-teaser/PromoTeaserVertical.tsx
@@ -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: 250,
+ cx: 540,
+ cy: 600,
+ a: 1,
+ b: 2,
+ phaseX: 0,
+ phaseY: 0,
+ amplitudeX: 80,
+ amplitudeY: 100,
+ },
+ {
+ color: "#f97316",
+ radius: 200,
+ cx: 300,
+ cy: 1200,
+ a: 2,
+ b: 1,
+ phaseX: 1.2,
+ phaseY: 0.8,
+ amplitudeX: 60,
+ amplitudeY: 120,
+ },
+ {
+ color: "#d97706",
+ radius: 220,
+ cx: 700,
+ cy: 1600,
+ a: 1,
+ b: 1,
+ phaseX: 2.4,
+ phaseY: 1.6,
+ amplitudeX: 90,
+ amplitudeY: 80,
+ },
+];
+
+export const PromoTeaserVertical: React.FC = () => {
+ return (
+
+ {BG_BLOBS.map((blob, i) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};