External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(videos): add PromoTeaser square and vertical compositions

Browse Source
This commit is contained in:
SnapOtter
2026-05-08 16:41:44 +08:00
parent 210bf9cded
commit 85acce7e16
3 changed files with 176 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/videos/src/Root.tsx
+18
View File
@@ -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}
/>
<Composition
id="PromoTeaser"
component={PromoTeaser}
durationInFrames={600}
fps={30}
width={1080}
height={1080}
/>
<Composition
id="PromoTeaserVertical"
component={PromoTeaserVertical}
durationInFrames={600}
fps={30}
width={1080}
height={1920}
/>
</>
);
apps/videos/src/compositions/promo-teaser/PromoTeaser.tsx
+79
View File
@@ -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>
);
};
apps/videos/src/compositions/promo-teaser/PromoTeaserVertical.tsx
+79
View File
@@ -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 (
<AbsoluteFill style={{ backgroundColor: COLOR.dark }}>
{BG_BLOBS.map((blob, i) => (
<GradientBlob key={`bg-v-${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>
);
};