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) => ( + + ))} + + + + + + + + + + + + + + + + + + + + + + ); +};