- {showDeviceFrame ? (
-
- );
-};
-
-// Mock screen content components
-type MockScreenProps = {
- children: React.ReactNode;
-};
-
-export const MockScreen: React.FC
- {/* Dynamic Island */}
-
-
- {/* Screen content */}
-
- ) : (
-
- {src ? (
- })
- ) : (
- children
- )}
-
-
- {/* Home indicator */}
-
-
- {src ? (
-
- ) : (
- children
- )}
-
- )}
-
- {/* Icon placeholder - rounded square with gradient */}
-
-
- {/* Tagline */}
- {tagline && (
-
- {/* Simple stadium icon representation */}
-
-
-
- {/* Wordmark */}
-
- SportsTime
-
-
- {tagline}
-
- )}
-
- {/* App Store Badge */}
- {showAppStoreBadge && (
-
-
- )}
-
-
-
- Download on the App Store
-
-
-
- {/* Ripple */}
- {showRipple && rippleProgress > 0 && (
-
- )}
-
- {/* Finger circle */}
-
-
- );
-};
-
-// Swipe indicator for tutorial-style animations
-type SwipeIndicatorProps = {
- startX: number;
- startY: number;
- endX: number;
- endY: number;
- delay?: number;
- duration?: number;
-};
-
-export const SwipeIndicator: React.FC
-
-
- );
-};
diff --git a/marketing-videos/src/components/shared/TextReveal.tsx b/marketing-videos/src/components/shared/TextReveal.tsx
deleted file mode 100644
index 218eb29..0000000
--- a/marketing-videos/src/components/shared/TextReveal.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import React from "react";
-import {
- useCurrentFrame,
- useVideoConfig,
- spring,
- interpolate,
-} from "remotion";
-import { theme } from "./theme";
-
-type TextRevealProps = {
- text: string;
- fontSize?: number;
- color?: string;
- fontWeight?: number;
- textAlign?: "left" | "center" | "right";
- delay?: number;
- style?: React.CSSProperties;
-};
-
-export const TextReveal: React.FC
- {text}
-
- );
-};
-
-// Multi-line version with staggered reveal
-type TextRevealMultilineProps = {
- lines: string[];
- fontSize?: number;
- color?: string;
- fontWeight?: number;
- textAlign?: "left" | "center" | "right";
- staggerDelay?: number;
- startDelay?: number;
- lineHeight?: number;
-};
-
-export const TextRevealMultiline: React.FC
- {lines.map((line, index) => (
-
- );
-};
-
-// Highlight style text (with background)
-type HighlightTextProps = {
- text: string;
- fontSize?: number;
- delay?: number;
-};
-
-export const HighlightText: React.FC
- {/* Background highlight */}
-
- {/* Text */}
-
- {text}
-
-
- );
-};
diff --git a/marketing-videos/src/components/shared/TikTokCaption.tsx b/marketing-videos/src/components/shared/TikTokCaption.tsx
deleted file mode 100644
index be31f20..0000000
--- a/marketing-videos/src/components/shared/TikTokCaption.tsx
+++ /dev/null
@@ -1,306 +0,0 @@
-import React from "react";
-import {
- useCurrentFrame,
- useVideoConfig,
- spring,
- interpolate,
-} from "remotion";
-import { theme } from "./theme";
-
-/**
- * TikTok-native kinetic caption system.
- *
- * Unlike generic subtitle overlays, each style mimics real TikTok
- * caption patterns: punch zooms, word pops, highlight boxes, etc.
- */
-
-type CaptionEntry = {
- text: string;
- startSec: number;
- endSec: number;
- style?: "punch" | "highlight" | "stack" | "whisper" | "shake";
-};
-
-type TikTokCaptionProps = {
- captions: CaptionEntry[];
- /** Vertical position from bottom (px) */
- bottomOffset?: number;
-};
-
-export const TikTokCaption: React.FC
- {style === "punch" && (
-
- );
-};
-
-/** Punch zoom in - text scales from big to normal with impact */
-const PunchCaption: React.FC<{
- text: string;
- localFrame: number;
- fps: number;
-}> = ({ text, localFrame, fps }) => {
- const prog = spring({
- frame: localFrame,
- fps,
- config: { damping: 10, stiffness: 280 },
- });
-
- const scale = interpolate(prog, [0, 1], [1.8, 1]);
- const opacity = interpolate(prog, [0, 0.3], [0, 1], {
- extrapolateRight: "clamp",
- });
-
- return (
-
- {text}
-
- );
-};
-
-/** Highlight box - text with colored background box that wipes in */
-const HighlightCaption: React.FC<{
- text: string;
- localFrame: number;
- fps: number;
-}> = ({ text, localFrame, fps }) => {
- const boxProg = spring({
- frame: localFrame,
- fps,
- config: { damping: 15, stiffness: 200 },
- });
- const textProg = spring({
- frame: localFrame - 3,
- fps,
- config: { damping: 20, stiffness: 180 },
- });
-
- return (
-
-
-
- {text}
-
-
- );
-};
-
-/** Stack - words stack vertically, each popping in */
-const StackCaption: React.FC<{
- text: string;
- localFrame: number;
- fps: number;
-}> = ({ text, localFrame, fps }) => {
- const words = text.split(" ");
- return (
-
- {words.map((word, i) => {
- const delay = i * 2;
- const prog = spring({
- frame: localFrame - delay,
- fps,
- config: { damping: 12, stiffness: 250 },
- });
- return (
-
- {word}
-
- );
- })}
-
- );
-};
-
-/** Whisper - small italic text that fades in gently */
-const WhisperCaption: React.FC<{
- text: string;
- localFrame: number;
- fps: number;
-}> = ({ text, localFrame, fps }) => {
- const opacity = interpolate(localFrame, [0, fps * 0.3], [0, 1], {
- extrapolateRight: "clamp",
- });
-
- return (
-
- {text}
-
- );
-};
-
-/** Shake - text shakes briefly on entrance then settles */
-const ShakeCaption: React.FC<{
- text: string;
- localFrame: number;
- fps: number;
-}> = ({ text, localFrame, fps }) => {
- const prog = spring({
- frame: localFrame,
- fps,
- config: { damping: 8, stiffness: 300 },
- });
-
- // Shake offsets that decay over ~5 frames
- const shakeIntensity = interpolate(localFrame, [0, 5], [8, 0], {
- extrapolateRight: "clamp",
- });
- const OFFSETS = [
- { x: -1, y: 1 },
- { x: 1, y: -1 },
- { x: -1, y: -1 },
- { x: 1, y: 1 },
- { x: 0, y: -1 },
- ];
- const offset = OFFSETS[localFrame % OFFSETS.length];
- const sx = offset.x * shakeIntensity;
- const sy = offset.y * shakeIntensity;
-
- return (
-
- {text}
-
- );
-};
-
-export type { CaptionEntry };
diff --git a/marketing-videos/src/components/shared/index.ts b/marketing-videos/src/components/shared/index.ts
deleted file mode 100644
index 6763d89..0000000
--- a/marketing-videos/src/components/shared/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export { theme } from "./theme";
-export { LogoEndcard } from "./LogoEndcard";
-export { TextReveal, TextRevealMultiline, HighlightText } from "./TextReveal";
-export { TapIndicator, SwipeIndicator } from "./TapIndicator";
-export { AppScreenshot, MockScreen } from "./AppScreenshot";
-export { GradientBackground, GridBackground, GlowBackground } from "./Background";
-export { FilmGrain } from "./FilmGrain";
-export { TikTokCaption } from "./TikTokCaption";
-export type { CaptionEntry } from "./TikTokCaption";
diff --git a/marketing-videos/src/components/shared/theme.ts b/marketing-videos/src/components/shared/theme.ts
deleted file mode 100644
index 847fa99..0000000
--- a/marketing-videos/src/components/shared/theme.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-// SportsTime Marketing Video Theme
-export const theme = {
- colors: {
- background: "#0A0A0A",
- backgroundGradientStart: "#0A0A0A",
- backgroundGradientEnd: "#1A1A2E",
- accent: "#FF6B35",
- accentDark: "#E55A25",
- secondary: "#4ECDC4",
- secondaryDark: "#3DBDB5",
- text: "#FFFFFF",
- textSecondary: "#B0B0B0",
- textMuted: "#6B6B6B",
- success: "#4CAF50",
- gold: "#FFD700",
- mapLine: "#FF6B35",
- mapMarker: "#4ECDC4",
- },
- fonts: {
- display: "SF Pro Display, -apple-system, BlinkMacSystemFont, sans-serif",
- text: "SF Pro Text, -apple-system, BlinkMacSystemFont, sans-serif",
- },
- fontSizes: {
- hero: 72,
- headline: 56,
- title: 48,
- subtitle: 36,
- body: 28,
- caption: 20,
- },
- spacing: {
- xs: 8,
- sm: 16,
- md: 24,
- lg: 40,
- xl: 64,
- xxl: 96,
- },
- animation: {
- smooth: { damping: 200 },
- snappy: { damping: 20, stiffness: 200 },
- bouncy: { damping: 8 },
- heavy: { damping: 15, stiffness: 80, mass: 2 },
- },
-} as const;
-
-export type Theme = typeof theme;
diff --git a/marketing-videos/src/configs/week1.json b/marketing-videos/src/configs/week1.json
deleted file mode 100644
index e806429..0000000
--- a/marketing-videos/src/configs/week1.json
+++ /dev/null
@@ -1,430 +0,0 @@
-[
- {
- "id": "V03-H01",
- "base": "V03",
- "hook": "NOBODY planned it. So I made a poll.",
- "scenes": [
- { "type": "HOOK", "durationSec": 2.5 },
- { "type": "CHAT", "durationSec": 3.0, "props": { "overlayText": "Every group chat ever" } },
- { "type": "SCREENREC", "durationSec": 3.0, "props": { "assetKey": "screenrecs/route-generated.mp4", "caption": "Built the trip in 20 sec" } },
- { "type": "MAP", "durationSec": 2.5, "props": { "cities": [{ "name": "Dallas", "x": 45, "y": 55 }, { "name": "Houston", "x": 50, "y": 70 }, { "name": "San Antonio", "x": 38, "y": 72 }] } },
- { "type": "POLL", "durationSec": 2.5, "props": { "question": "Which trip?", "options": [{ "label": "Texas Triangle", "votes": 4, "emoji": "🤠" }, { "label": "East Coast", "votes": 2, "emoji": "🗽" }] } },
- { "type": "CTA", "durationSec": 2.0 }
- ],
- "captions": [
- { "text": "Nobody was planning it", "startSec": 0.3, "endSec": 2.3, "emphasis": "bold" },
- { "text": "So I opened SportsTime", "startSec": 2.8, "endSec": 4.8, "emphasis": "normal" },
- { "text": "Built a route in 20 seconds", "startSec": 5.3, "endSec": 7.5, "emphasis": "highlight" },
- { "text": "Dropped the poll", "startSec": 8.0, "endSec": 9.8, "emphasis": "normal" },
- { "text": "Trip booked by lunch", "startSec": 10.3, "endSec": 12.0, "emphasis": "bold" }
- ],
- "cta": "Search SportsTime on the App Store",
- "vo": "Nobody plans it. So I did.",
- "targetLengthSec": 15,
- "assets": { "screenrec": ["route-generated"], "overlay": ["chat-bubbles", "vote-bubbles"] }
- },
- {
- "id": "V10-H01",
- "base": "V10",
- "hook": "If your group chat needs 200 messages… use this.",
- "scenes": [
- { "type": "HOOK", "durationSec": 2.5 },
- { "type": "CHAT", "durationSec": 3.0, "props": { "overlayText": "200 messages later…", "groupName": "Trip Planning 🏈", "groupSize": 5 } },
- { "type": "SCREENREC", "durationSec": 3.5, "props": { "assetKey": "screenrecs/route-generated.mp4", "caption": "One app. One route." } },
- { "type": "POLL", "durationSec": 2.5, "props": { "question": "Dallas or Houston first?", "options": [{ "label": "Dallas first", "votes": 3, "emoji": "⭐" }, { "label": "Houston first", "votes": 2, "emoji": "🚀" }] } },
- { "type": "CTA", "durationSec": 2.0 }
- ],
- "captions": [
- { "text": "Your group chat after someone says 'trip'", "startSec": 0.3, "endSec": 2.3, "emphasis": "normal" },
- { "text": "200 messages… zero plans", "startSec": 2.8, "endSec": 4.8, "emphasis": "bold" },
- { "text": "Or just use this", "startSec": 5.3, "endSec": 7.0, "emphasis": "highlight" },
- { "text": "Route built. Poll sent.", "startSec": 7.5, "endSec": 9.5, "emphasis": "normal" },
- { "text": "Trip decided in 3 minutes", "startSec": 10.0, "endSec": 12.0, "emphasis": "bold" }
- ],
- "cta": "Search SportsTime on the App Store",
- "vo": "Two hundred messages or one app. Your call.",
- "targetLengthSec": 13
- },
- {
- "id": "V03-H02",
- "base": "V03",
- "hook": "Every sports trip starts with 'we should do this' 🤡",
- "scenes": [
- { "type": "HOOK", "durationSec": 2.5, "props": { "emoji": "🤡" } },
- { "type": "CHAT", "durationSec": 3.0, "props": { "overlayText": "The cycle continues…", "messages": [{ "sender": "Jake", "text": "We should do a baseball trip", "isMe": false, "delaySec": 0.2 }, { "sender": "Mike", "text": "Bro YES", "isMe": false, "delaySec": 0.5 }, { "sender": "Sam", "text": "When?", "isMe": false, "delaySec": 0.8 }, { "sender": "Jake", "text": "Idk someone plan it", "isMe": false, "delaySec": 1.2 }, { "sender": "You", "text": "Fine. I'll do it.", "isMe": true, "delaySec": 1.7 }] } },
- { "type": "SCREENREC", "durationSec": 3.5, "props": { "assetKey": "screenrecs/date-range.mp4", "caption": "Picked dates + sports" } },
- { "type": "POLL", "durationSec": 2.5, "props": { "question": "Which route?", "options": [{ "label": "LA → SD", "votes": 3, "emoji": "🌴" }, { "label": "NY → BOS", "votes": 2, "emoji": "🗽" }, { "label": "CHI → DET", "votes": 1, "emoji": "🌊" }] } },
- { "type": "CTA", "durationSec": 2.0 }
- ],
- "captions": [
- { "text": "Every. Single. Time.", "startSec": 0.3, "endSec": 2.3, "emphasis": "bold" },
- { "text": "'Someone plan it'", "startSec": 2.8, "endSec": 4.5, "emphasis": "normal" },
- { "text": "Fine. I opened SportsTime.", "startSec": 5.0, "endSec": 7.0, "emphasis": "highlight" },
- { "text": "3 options. 1 poll.", "startSec": 7.5, "endSec": 9.5, "emphasis": "normal" },
- { "text": "Trip planned in 2 min", "startSec": 10.0, "endSec": 12.0, "emphasis": "bold" }
- ],
- "cta": "Search SportsTime on the App Store",
- "vo": "Every trip starts the same way. End it different.",
- "targetLengthSec": 13
- },
- {
- "id": "V10-H02",
- "base": "V10",
- "hook": "3 trip options. 1 vote. Done.",
- "scenes": [
- { "type": "HOOK", "durationSec": 2.0 },
- { "type": "SCREENREC", "durationSec": 3.5, "props": { "assetKey": "screenrecs/route-generated.mp4", "caption": "Generated 3 routes" } },
- { "type": "POLL", "durationSec": 3.0, "props": { "question": "Pick our trip", "options": [{ "label": "Texas Triangle 🤠", "votes": 4, "emoji": "🤠" }, { "label": "Cali Coast 🌴", "votes": 3, "emoji": "🌴" }, { "label": "Northeast 🗽", "votes": 1, "emoji": "🗽" }] } },
- { "type": "CHAT", "durationSec": 2.5, "props": { "overlayText": "Group chat: decided", "messages": [{ "sender": "Jake", "text": "Texas it is!!", "isMe": false, "delaySec": 0.2 }, { "sender": "Mike", "text": "LETS GO 🤠", "isMe": false, "delaySec": 0.5 }, { "sender": "You", "text": "Booked ✅", "isMe": true, "delaySec": 0.9 }] } },
- { "type": "CTA", "durationSec": 2.0 }
- ],
- "captions": [
- { "text": "3 trip options", "startSec": 0.3, "endSec": 1.8, "emphasis": "bold" },
- { "text": "Generated in seconds", "startSec": 2.3, "endSec": 4.3, "emphasis": "normal" },
- { "text": "1 vote to decide", "startSec": 5.0, "endSec": 7.0, "emphasis": "highlight" },
- { "text": "Done. Trip booked.", "startSec": 7.5, "endSec": 9.5, "emphasis": "bold" }
- ],
- "cta": "Search SportsTime on the App Store",
- "vo": "Three options. One vote. Done.",
- "targetLengthSec": 13
- },
- {
- "id": "V03-H03",
- "base": "V03",
- "hook": "All talk → I shipped the itinerary.",
- "scenes": [
- { "type": "HOOK", "durationSec": 2.5 },
- { "type": "CHAT", "durationSec": 2.5, "props": { "overlayText": "3 months of 'we should'", "messages": [{ "sender": "Jake", "text": "We should do a trip", "isMe": false, "delaySec": 0.15 }, { "sender": "Mike", "text": "For sure", "isMe": false, "delaySec": 0.4 }, { "sender": "Sam", "text": "Down", "isMe": false, "delaySec": 0.6 }] } },
- { "type": "SCREENREC", "durationSec": 3.0, "props": { "assetKey": "screenrecs/route-generated.mp4", "caption": "So I just did it" } },
- { "type": "MAP", "durationSec": 2.5, "props": { "cities": [{ "name": "Chicago", "x": 55, "y": 35 }, { "name": "Milwaukee", "x": 54, "y": 30 }, { "name": "Detroit", "x": 62, "y": 33 }] } },
- { "type": "POLL", "durationSec": 2.5, "props": { "question": "We going?", "options": [{ "label": "YES 🔥", "votes": 4, "emoji": "🔥" }, { "label": "Can't make it", "votes": 0, "emoji": "😢" }] } },
- { "type": "CTA", "durationSec": 2.0 }
- ],
- "captions": [
- { "text": "3 months of all talk", "startSec": 0.3, "endSec": 2.3, "emphasis": "normal" },
- { "text": "'We should do a trip' — nobody moves", "startSec": 2.8, "endSec": 4.8, "emphasis": "bold" },
- { "text": "So I opened SportsTime", "startSec": 5.3, "endSec": 7.0, "emphasis": "highlight" },
- { "text": "Built the route, mapped the games", "startSec": 7.5, "endSec": 9.5, "emphasis": "normal" },
- { "text": "Shipped the itinerary", "startSec": 10.0, "endSec": 12.0, "emphasis": "bold" },
- { "text": "4-0 vote. We're going.", "startSec": 12.5, "endSec": 14.0, "emphasis": "highlight" }
- ],
- "cta": "Search SportsTime on the App Store",
- "vo": "All talk. Until I shipped the itinerary.",
- "targetLengthSec": 15
- },
- {
- "id": "V17-H01",
- "base": "V17",
- "hook": "The spreadsheet era is over.",
- "scenes": [
- { "type": "HOOK", "durationSec": 2.5 },
- { "type": "SCREENREC", "durationSec": 3.5, "props": { "assetKey": "screenrecs/date-range.mp4", "caption": "Pick dates → pick sports" } },
- { "type": "TEXTPUNCH", "durationSec": 2.0, "props": { "text": "No spreadsheet needed.", "variant": "slam" } },
- { "type": "SCREENREC", "durationSec": 3.0, "props": { "assetKey": "screenrecs/route-generated.mp4", "caption": "Route + games auto-matched" } },
- { "type": "CTA", "durationSec": 2.0 }
- ],
- "captions": [
- { "text": "Stop planning trips in spreadsheets", "startSec": 0.3, "endSec": 2.3, "emphasis": "bold" },
- { "text": "Pick your dates and sports", "startSec": 2.8, "endSec": 4.8, "emphasis": "normal" },
- { "text": "No spreadsheet needed", "startSec": 5.5, "endSec": 7.5, "emphasis": "highlight" },
- { "text": "Route + games auto-matched", "startSec": 8.0, "endSec": 10.5, "emphasis": "normal" },
- { "text": "Done in 20 seconds", "startSec": 11.0, "endSec": 12.5, "emphasis": "bold" }
- ],
- "cta": "Search SportsTime on the App Store",
- "vo": "Spreadsheets are over. This is how you plan now.",
- "targetLengthSec": 13
- },
- {
- "id": "V17-H02",
- "base": "V17",
- "hook": "I used to waste 2 hours. Now it's 20 seconds.",
- "scenes": [
- { "type": "HOOK", "durationSec": 2.5 },
- { "type": "TEXTPUNCH", "durationSec": 2.0, "props": { "text": "2 hours → 20 seconds", "variant": "split" } },
- { "type": "SCREENREC", "durationSec": 4.0, "props": { "assetKey": "screenrecs/by-games.mp4", "caption": "The whole flow" } },
- { "type": "CTA", "durationSec": 2.0 }
- ],
- "captions": [
- { "text": "Planning a sports trip used to take hours", "startSec": 0.3, "endSec": 2.3, "emphasis": "normal" },
- { "text": "2 hours → 20 seconds", "startSec": 2.8, "endSec": 4.5, "emphasis": "highlight" },
- { "text": "Pick sports. Pick dates. Get a route.", "startSec": 5.0, "endSec": 7.5, "emphasis": "normal" },
- { "text": "That's literally it", "startSec": 8.0, "endSec": 9.5, "emphasis": "bold" }
- ],
- "cta": "Search SportsTime on the App Store",
- "vo": "Two hours of Googling or twenty seconds. You pick.",
- "targetLengthSec": 12
- },
- {
- "id": "V06-H01",
- "base": "V06",
- "hook": "Plan a multi-game weekend in 3 taps.",
- "scenes": [
- { "type": "HOOK", "durationSec": 2.0 },
- { "type": "SCREENREC", "durationSec": 3.5, "props": { "assetKey": "screenrecs/date-range.mp4", "caption": "Tap 1: Dates" } },
- { "type": "TEXTPUNCH", "durationSec": 1.5, "props": { "text": "3 taps. Multiple games.", "variant": "slam" } },
- { "type": "SCREENREC", "durationSec": 3.0, "props": { "assetKey": "screenrecs/route-generated.mp4", "caption": "Tap 3: Route" } },
- { "type": "CTA", "durationSec": 2.0 }
- ],
- "captions": [
- { "text": "Multi-game weekend?", "startSec": 0.3, "endSec": 1.8, "emphasis": "bold" },
- { "text": "Tap 1: Pick your dates", "startSec": 2.3, "endSec": 4.0, "emphasis": "normal" },
- { "text": "Tap 2: Pick your sports", "startSec": 4.3, "endSec": 5.5, "emphasis": "normal" },
- { "text": "Tap 3: Route generated", "startSec": 6.0, "endSec": 8.0, "emphasis": "highlight" },
- { "text": "That easy", "startSec": 8.5, "endSec": 10.0, "emphasis": "bold" }
- ],
- "cta": "Search SportsTime on the App Store",
- "vo": "Three taps. Multi-game weekend. Planned.",
- "targetLengthSec": 12
- },
- {
- "id": "V08-H01",
- "base": "V08",
- "hook": "Already driving? Add games without chaos.",
- "scenes": [
- { "type": "HOOK", "durationSec": 2.5 },
- { "type": "SCREENREC", "durationSec": 4.0, "props": { "assetKey": "screenrecs/follow-team.mp4", "caption": "Add a game stop mid-drive" } },
- { "type": "MAP", "durationSec": 3.0, "props": { "caption": "Rerouted", "cities": [{ "name": "Start", "x": 30, "y": 40 }, { "name": "Game Stop", "x": 50, "y": 50 }, { "name": "Destination", "x": 70, "y": 40 }] } },
- { "type": "CTA", "durationSec": 2.0 }
- ],
- "captions": [
- { "text": "Already on the road?", "startSec": 0.3, "endSec": 2.3, "emphasis": "bold" },
- { "text": "Add a game stop without the chaos", "startSec": 2.8, "endSec": 5.0, "emphasis": "normal" },
- { "text": "Route adjusts automatically", "startSec": 5.5, "endSec": 7.5, "emphasis": "highlight" },
- { "text": "Detour = more games", "startSec": 8.0, "endSec": 10.0, "emphasis": "bold" }
- ],
- "cta": "Search SportsTime on the App Store",
- "vo": "Mid-drive game stop. No chaos.",
- "targetLengthSec": 13
- },
- {
- "id": "V05-LA-01",
- "base": "V05",
- "hook": "LA this weekend? Here's a REAL 2-game run.",
- "scenes": [
- { "type": "HOOK", "durationSec": 2.5 },
- { "type": "MAP", "durationSec": 3.5, "props": { "caption": "LA → Anaheim", "cities": [{ "name": "Dodger Stadium", "x": 40, "y": 45 }, { "name": "Angel Stadium", "x": 55, "y": 60 }] } },
- { "type": "SCREENREC", "durationSec": 3.5, "props": { "assetKey": "screenrecs/route-generated.mp4", "caption": "Full weekend itinerary" } },
- { "type": "CTA", "durationSec": 2.0 }
- ],
- "captions": [
- { "text": "LA this weekend?", "startSec": 0.3, "endSec": 2.0, "emphasis": "bold" },
- { "text": "Dodgers Friday → Angels Saturday", "startSec": 2.5, "endSec": 4.5, "emphasis": "normal" },
- { "text": "30 min drive between stadiums", "startSec": 5.0, "endSec": 7.0, "emphasis": "highlight" },
- { "text": "2-game weekend locked", "startSec": 7.5, "endSec": 9.5, "emphasis": "normal" },
- { "text": "SportsTime planned it all", "startSec": 10.0, "endSec": 11.5, "emphasis": "bold" }
- ],
- "cta": "Search SportsTime on the App Store",
- "vo": "LA two-game weekend. Planned in seconds.",
- "targetLengthSec": 13
- },
- {
- "id": "V05-NY-01",
- "base": "V05",
- "hook": "NYC this weekend? You can hit 2 games.",
- "scenes": [
- { "type": "HOOK", "durationSec": 2.5 },
- { "type": "MAP", "durationSec": 3.5, "props": { "caption": "NYC → Jersey", "cities": [{ "name": "Yankee Stadium", "x": 48, "y": 35 }, { "name": "MetLife Stadium", "x": 42, "y": 42 }] } },
- { "type": "SCREENREC", "durationSec": 3.5, "props": { "assetKey": "screenrecs/route-generated.mp4", "caption": "Weekend mapped out" } },
- { "type": "CTA", "durationSec": 2.0 }
- ],
- "captions": [
- { "text": "NYC this weekend?", "startSec": 0.3, "endSec": 2.0, "emphasis": "bold" },
- { "text": "Yankees Saturday → Giants Sunday", "startSec": 2.5, "endSec": 4.5, "emphasis": "normal" },
- { "text": "Both games. One weekend.", "startSec": 5.0, "endSec": 7.0, "emphasis": "highlight" },
- { "text": "Route optimized automatically", "startSec": 7.5, "endSec": 9.5, "emphasis": "normal" },
- { "text": "That's the move", "startSec": 10.0, "endSec": 11.5, "emphasis": "bold" }
- ],
- "cta": "Search SportsTime on the App Store",
- "vo": "NYC two-gamer. Hit both without the hassle.",
- "targetLengthSec": 13
- },
- {
- "id": "V05-TX-01",
- "base": "V05",
- "hook": "Texas road trip? Dallas → Houston + games.",
- "scenes": [
- { "type": "HOOK", "durationSec": 2.5 },
- { "type": "MAP", "durationSec": 3.5, "props": { "caption": "Texas Triangle", "cities": [{ "name": "Dallas", "x": 45, "y": 38 }, { "name": "Austin", "x": 42, "y": 58 }, { "name": "Houston", "x": 55, "y": 60 }] } },
- { "type": "SCREENREC", "durationSec": 3.5, "props": { "assetKey": "screenrecs/route-generated.mp4", "caption": "3 cities. 4 games." } },
- { "type": "CTA", "durationSec": 2.0 }
- ],
- "captions": [
- { "text": "Texas road trip?", "startSec": 0.3, "endSec": 2.0, "emphasis": "bold" },
- { "text": "Dallas → Austin → Houston", "startSec": 2.5, "endSec": 4.5, "emphasis": "normal" },
- { "text": "4 games along the route", "startSec": 5.0, "endSec": 7.0, "emphasis": "highlight" },
- { "text": "Cowboys. Longhorns. Astros. Rockets.", "startSec": 7.5, "endSec": 9.5, "emphasis": "normal" },
- { "text": "All planned in one app", "startSec": 10.0, "endSec": 11.5, "emphasis": "bold" }
- ],
- "cta": "Search SportsTime on the App Store",
- "vo": "Texas Triangle. Four games. One route.",
- "targetLengthSec": 13
- },
- {
- "id": "V05-CA-01",
- "base": "V05",
- "hook": "California weekend? SF → Sac → Bay games.",
- "scenes": [
- { "type": "HOOK", "durationSec": 2.5 },
- { "type": "MAP", "durationSec": 3.5, "props": { "caption": "NorCal Run", "cities": [{ "name": "San Francisco", "x": 20, "y": 42 }, { "name": "Sacramento", "x": 30, "y": 35 }, { "name": "Oakland", "x": 22, "y": 44 }] } },
- { "type": "SCREENREC", "durationSec": 3.5, "props": { "assetKey": "screenrecs/route-generated.mp4", "caption": "Bay Area weekend" } },
- { "type": "CTA", "durationSec": 2.0 }
- ],
- "captions": [
- { "text": "California this weekend?", "startSec": 0.3, "endSec": 2.0, "emphasis": "bold" },
- { "text": "SF → Sacramento → back to the Bay", "startSec": 2.5, "endSec": 4.5, "emphasis": "normal" },
- { "text": "Warriors. Kings. Giants.", "startSec": 5.0, "endSec": 7.0, "emphasis": "highlight" },
- { "text": "3 games in one weekend", "startSec": 7.5, "endSec": 9.5, "emphasis": "normal" },
- { "text": "Route mapped automatically", "startSec": 10.0, "endSec": 11.5, "emphasis": "bold" }
- ],
- "cta": "Search SportsTime on the App Store",
- "vo": "NorCal three-game run. SportsTime planned it.",
- "targetLengthSec": 13
- },
- {
- "id": "V08-LA-01",
- "base": "V08",
- "hook": "LA → San Diego drive? Add a game stop.",
- "scenes": [
- { "type": "HOOK", "durationSec": 2.5 },
- { "type": "SCREENREC", "durationSec": 3.5, "props": { "assetKey": "screenrecs/follow-team.mp4", "caption": "Found a game on the way" } },
- { "type": "MAP", "durationSec": 3.5, "props": { "caption": "LA → Anaheim → San Diego", "cities": [{ "name": "LA", "x": 25, "y": 35 }, { "name": "Anaheim", "x": 35, "y": 48 }, { "name": "San Diego", "x": 30, "y": 70 }] } },
- { "type": "CTA", "durationSec": 2.0 }
- ],
- "captions": [
- { "text": "Driving LA to San Diego?", "startSec": 0.3, "endSec": 2.3, "emphasis": "bold" },
- { "text": "There's a game on the way", "startSec": 2.8, "endSec": 4.8, "emphasis": "normal" },
- { "text": "Angels game in Anaheim = perfect pit stop", "startSec": 5.3, "endSec": 7.5, "emphasis": "highlight" },
- { "text": "Then Padres in SD", "startSec": 8.0, "endSec": 9.5, "emphasis": "normal" },
- { "text": "2 games. 1 drive.", "startSec": 10.0, "endSec": 11.5, "emphasis": "bold" }
- ],
- "cta": "Search SportsTime on the App Store",
- "vo": "LA to San Diego. Two games along the way.",
- "targetLengthSec": 13
- },
- {
- "id": "V04-H01",
- "base": "V04",
- "hook": "My friend: 4 stadiums. Me: 27.",
- "scenes": [
- { "type": "HOOK", "durationSec": 2.5 },
- { "type": "FLEX", "durationSec": 3.5, "props": { "stadiumCount": 27, "totalStadiums": 120, "caption": "And counting" } },
- { "type": "SCREENREC", "durationSec": 3.5, "props": { "assetKey": "screenrecs/tracker.mp4", "caption": "Track every stadium" } },
- { "type": "CTA", "durationSec": 2.0 }
- ],
- "captions": [
- { "text": "My friend: 4 stadiums", "startSec": 0.3, "endSec": 1.5, "emphasis": "normal" },
- { "text": "Me: 27 and counting", "startSec": 1.8, "endSec": 3.5, "emphasis": "highlight" },
- { "text": "Every stadium tracked", "startSec": 4.0, "endSec": 6.0, "emphasis": "normal" },
- { "text": "MLB. NFL. NBA. NHL.", "startSec": 6.5, "endSec": 8.0, "emphasis": "bold" },
- { "text": "What's your count?", "startSec": 8.5, "endSec": 10.0, "emphasis": "normal" }
- ],
- "cta": "Search SportsTime on the App Store",
- "vo": "Four stadiums? That's cute.",
- "targetLengthSec": 13
- },
- {
- "id": "V20-H01",
- "base": "V20",
- "hook": "No tracking = no bucket list.",
- "scenes": [
- { "type": "HOOK", "durationSec": 2.5 },
- { "type": "FLEX", "durationSec": 3.5, "props": { "stadiumCount": 15, "totalStadiums": 120, "caption": "Start tracking" } },
- { "type": "SCREENREC", "durationSec": 3.5, "props": { "assetKey": "screenrecs/tracker.mp4", "caption": "Every visit logged" } },
- { "type": "CTA", "durationSec": 2.0 }
- ],
- "captions": [
- { "text": "You've been to how many stadiums?", "startSec": 0.3, "endSec": 2.0, "emphasis": "normal" },
- { "text": "But you're not tracking them?", "startSec": 2.3, "endSec": 4.0, "emphasis": "bold" },
- { "text": "Start your stadium bucket list", "startSec": 4.5, "endSec": 6.5, "emphasis": "highlight" },
- { "text": "Every visit. Every league.", "startSec": 7.0, "endSec": 9.0, "emphasis": "normal" },
- { "text": "How many can you hit?", "startSec": 9.5, "endSec": 11.0, "emphasis": "bold" }
- ],
- "cta": "Search SportsTime on the App Store",
- "vo": "If you're not tracking, it doesn't count.",
- "targetLengthSec": 13
- },
- {
- "id": "V14-H01",
- "base": "V14",
- "hook": "Trying to hit every stadium before 35.",
- "scenes": [
- { "type": "HOOK", "durationSec": 2.5 },
- { "type": "FLEX", "durationSec": 3.5, "props": { "stadiumCount": 42, "totalStadiums": 120, "caption": "42 down, 78 to go" } },
- { "type": "MAP", "durationSec": 3.5, "props": { "caption": "Next trip: Midwest", "cities": [{ "name": "Chicago", "x": 55, "y": 35 }, { "name": "Milwaukee", "x": 53, "y": 30 }, { "name": "Minneapolis", "x": 45, "y": 22 }, { "name": "Kansas City", "x": 42, "y": 45 }] } },
- { "type": "CTA", "durationSec": 2.0 }
- ],
- "captions": [
- { "text": "Every stadium before 35", "startSec": 0.3, "endSec": 2.3, "emphasis": "bold" },
- { "text": "42 down. 78 to go.", "startSec": 2.8, "endSec": 4.5, "emphasis": "normal" },
- { "text": "Planning the next run", "startSec": 5.0, "endSec": 7.0, "emphasis": "highlight" },
- { "text": "Midwest loop: 4 new stadiums", "startSec": 7.5, "endSec": 9.5, "emphasis": "normal" },
- { "text": "The bucket list is real", "startSec": 10.0, "endSec": 11.5, "emphasis": "bold" }
- ],
- "cta": "Search SportsTime on the App Store",
- "vo": "Every stadium before thirty-five. Clock's ticking.",
- "targetLengthSec": 13
- },
- {
- "id": "V04-H02",
- "base": "V04",
- "hook": "Drop your stadium count. I'll wait.",
- "scenes": [
- { "type": "HOOK", "durationSec": 2.5, "props": { "emoji": "👀" } },
- { "type": "FLEX", "durationSec": 3.5, "props": { "stadiumCount": 31, "totalStadiums": 120, "caption": "What's yours?" } },
- { "type": "CTA", "durationSec": 2.0 }
- ],
- "captions": [
- { "text": "Drop your stadium count", "startSec": 0.3, "endSec": 1.8, "emphasis": "bold" },
- { "text": "I'll wait 👀", "startSec": 2.0, "endSec": 3.5, "emphasis": "normal" },
- { "text": "Mine: 31 across 4 leagues", "startSec": 3.8, "endSec": 5.5, "emphasis": "highlight" },
- { "text": "Track yours", "startSec": 5.8, "endSec": 7.0, "emphasis": "bold" }
- ],
- "cta": "Search SportsTime on the App Store",
- "vo": "Drop your count. I'll wait.",
- "targetLengthSec": 12
- },
- {
- "id": "V02-H01",
- "base": "V02",
- "hook": "If you've never done an away-game trip…",
- "scenes": [
- { "type": "HOOK", "durationSec": 2.5 },
- { "type": "SCREENREC", "durationSec": 3.5, "props": { "assetKey": "screenrecs/follow-team.mp4", "caption": "Follow your team on the road" } },
- { "type": "MAP", "durationSec": 3.5, "props": { "caption": "Away game route", "cities": [{ "name": "Home", "x": 35, "y": 40 }, { "name": "Away Game 1", "x": 55, "y": 35 }, { "name": "Away Game 2", "x": 70, "y": 42 }] } },
- { "type": "CTA", "durationSec": 2.0 }
- ],
- "captions": [
- { "text": "Never done an away-game trip?", "startSec": 0.3, "endSec": 2.3, "emphasis": "bold" },
- { "text": "Follow your team on the road", "startSec": 2.8, "endSec": 4.8, "emphasis": "normal" },
- { "text": "SportsTime finds the games + builds the route", "startSec": 5.3, "endSec": 7.5, "emphasis": "highlight" },
- { "text": "New city. Your team. Road trip.", "startSec": 8.0, "endSec": 10.0, "emphasis": "normal" },
- { "text": "Start with one trip", "startSec": 10.5, "endSec": 11.5, "emphasis": "bold" }
- ],
- "cta": "Search SportsTime on the App Store",
- "vo": "If you've never done an away game trip, start here.",
- "targetLengthSec": 13
- },
- {
- "id": "V19-H01",
- "base": "V19",
- "hook": "Hot take: away games are the real fandom.",
- "scenes": [
- { "type": "HOOK", "durationSec": 2.5 },
- { "type": "TEXTPUNCH", "durationSec": 2.0, "props": { "text": "Home games are easy mode.", "variant": "slam" } },
- { "type": "SCREENREC", "durationSec": 3.5, "props": { "assetKey": "screenrecs/follow-team.mp4", "caption": "Follow your team anywhere" } },
- { "type": "MAP", "durationSec": 3.0, "props": { "caption": "Away game road trip", "cities": [{ "name": "Your City", "x": 30, "y": 45 }, { "name": "Rival City", "x": 60, "y": 35 }, { "name": "Another Stop", "x": 75, "y": 50 }] } },
- { "type": "CTA", "durationSec": 2.0 }
- ],
- "captions": [
- { "text": "Hot take incoming 🔥", "startSec": 0.3, "endSec": 2.0, "emphasis": "bold" },
- { "text": "Home games are easy mode", "startSec": 2.5, "endSec": 4.3, "emphasis": "highlight" },
- { "text": "Real fans follow the team on the road", "startSec": 4.8, "endSec": 6.8, "emphasis": "normal" },
- { "text": "Plan the away game trip", "startSec": 7.3, "endSec": 9.0, "emphasis": "normal" },
- { "text": "Route + games + drive times", "startSec": 9.5, "endSec": 11.0, "emphasis": "bold" },
- { "text": "Prove you're a real one", "startSec": 11.5, "endSec": 13.0, "emphasis": "highlight" }
- ],
- "cta": "Search SportsTime on the App Store",
- "vo": "Away games are the real fandom. Prove it.",
- "targetLengthSec": 15
- }
-]
diff --git a/marketing-videos/src/engine/VideoFromConfig.tsx b/marketing-videos/src/engine/VideoFromConfig.tsx
deleted file mode 100644
index 1a10873..0000000
--- a/marketing-videos/src/engine/VideoFromConfig.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import React from "react";
-import { AbsoluteFill, useVideoConfig } from "remotion";
-import { TransitionSeries, linearTiming } from "@remotion/transitions";
-import { fade } from "@remotion/transitions/fade";
-import { slide } from "@remotion/transitions/slide";
-
-import type { VideoConfig, SceneConfig } from "./types";
-import {
- HookCard,
- ChatScene,
- ScreenRecScene,
- MapScene,
- PollScene,
- FlexScene,
- TextPunchScene,
- CTAEndCard,
- KineticCaption,
-} from "./scenes";
-
-type VideoFromConfigProps = {
- config: VideoConfig;
-};
-
-/**
- * Config-driven video renderer.
- *
- * Reads a VideoConfig and renders each scene in order using TransitionSeries.
- * Kinetic captions overlay on top of all scenes.
- */
-export const VideoFromConfig: React.FC
- {/* Simple stadium SVG icon: ellipse base + arch + flag */}
-
-
-
- {/* "SportsTime" wordmark */}
-
- SportsTime
-
-
- {/* Tagline (optional) */}
- {tagline && (
-
- {tagline}
-
- )}
-
- {/* Search bar container */}
-
-
- {/* Search icon (magnifying glass SVG) */}
-
-
- {/* CTA text */}
-
- {ctaText}
-
-
-
- {/* "Available on the App Store" text below search bar */}
-
- Available on the App Store
-
-
-
- );
-};
-
-export const ChatScene: React.FC
- {dots.map((i) => {
- const stagger = i * 0.15 * fps;
- const cycleFrame = (frame + stagger) % cycleDuration;
- const bounceProgress = Math.sin((cycleFrame / cycleDuration) * Math.PI);
- const translateY = interpolate(bounceProgress, [0, 1], [0, -8]);
-
- return (
-
- );
- })}
-
-
- {/* Status bar */}
-
-
- {/* Overlay text pill badge */}
- {overlayText && (
-
-
- 9:41
-
-
-
- {/* Chat header */}
-
- {/* Signal bars */}
-
-
- {[6, 8, 10, 12].map((h, i) => (
-
- ))}
-
- {/* Battery icon */}
-
-
-
-
-
- {/* Group avatar with gradient */}
-
-
- {/* Messages */}
-
-
- {groupSize}
-
-
-
-
-
- {groupName}
-
-
- {groupSize} people
-
-
- {messages.map((msg, index) => {
- const msgDelayFrames = msg.delaySec * fps;
- const msgProgress = spring({
- frame: frame - msgDelayFrames,
- fps,
- config: { damping: 14, stiffness: 200 },
- });
- const msgScale = interpolate(msgProgress, [0, 1], [0.3, 1]);
- const msgOpacity = interpolate(msgProgress, [0, 1], [0, 1]);
-
- if (frame < msgDelayFrames) return null;
-
- const senderColor = msg.isMe ? "#007AFF" : (senderColorMap[msg.sender] || SENDER_COLORS[0]);
-
- return (
-
-
- {/* Sender name (only for non-"me" messages) */}
- {!msg.isMe && (
-
- {msg.sender}
-
- )}
- {/* Message bubble */}
-
- );
- })}
-
- {/* Typing indicator (appears after last message) */}
- {frame >= typingStartFrame && (
-
-
- {msg.text}
-
-
-
-
- )}
-
-
- )}
-
-
- {overlayText}
-
-
-
-
- {caption}
-
-
-
- {/* Stadium icon dots arc */}
-
-
- {Array.from({ length: totalDots }).map((_, i) => {
- // Arrange in a subtle arc
- const angle =
- Math.PI + ((i / (totalDots - 1)) * Math.PI);
- const arcWidth = 180;
- const arcHeight = 30;
- const cx = 200 + Math.cos(angle) * arcWidth;
- const cy = 50 + Math.sin(angle) * arcHeight;
- const isVisited = i < visitedDots;
-
- return (
-
- );
- })}
-
-
- {/* Large counter number */}
-
-
- {displayCount}
-
-
-
- {/* "/ totalStadiums stadiums" subtitle */}
-
- / {totalStadiums} stadiums
-
-
- {/* Progress bar */}
-
-
-
-
- {/* League badges row */}
-
- {leagues.map((league, index) => {
- const badgeDelay = badgesBaseDelay + index * badgeStaggerFrames;
- const badgeProgress = spring({
- frame: frame - badgeDelay,
- fps,
- config: theme.animation.snappy,
- });
- const badgeScale = interpolate(
- badgeProgress,
- [0, 1],
- [0.3, 1]
- );
- const badgeOpacity = interpolate(
- badgeProgress,
- [0, 1],
- [0, 1]
- );
-
- return (
-
-
-
- {league}
-
-
- );
- })}
-
- {/* Optional emoji */}
- {emoji && (
- = ({ captions }) => {
- const frame = useCurrentFrame();
- const { fps } = useVideoConfig();
-
- // Find the currently active caption
- const currentSec = frame / fps;
- const activeCaptions = captions.filter(
- (c) => currentSec >= c.startSec && currentSec < c.endSec
- );
-
- if (activeCaptions.length === 0) return null;
-
- const caption = activeCaptions[activeCaptions.length - 1];
- const captionStartFrame = caption.startSec * fps;
- const captionEndFrame = caption.endSec * fps;
- const localFrame = frame - captionStartFrame;
-
- // Entrance spring
- const enterProgress = spring({
- frame: localFrame,
- fps,
- config: { damping: 14, stiffness: 200 },
- });
-
- const scale = interpolate(enterProgress, [0, 1], [0.7, 1]);
- const enterOpacity = interpolate(enterProgress, [0, 1], [0, 1]);
-
- // Exit fade (last 5 frames before endSec)
- const exitOpacity = interpolate(
- frame,
- [captionEndFrame - 5, captionEndFrame],
- [1, 0],
- { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
- );
-
- const opacity = Math.min(enterOpacity, exitOpacity);
-
- const isHighlight = caption.emphasis === "highlight";
- const isBold = caption.emphasis === "bold" || isHighlight;
-
- return (
-
-
- );
-};
diff --git a/marketing-videos/src/engine/scenes/MapScene.tsx b/marketing-videos/src/engine/scenes/MapScene.tsx
deleted file mode 100644
index b616569..0000000
--- a/marketing-videos/src/engine/scenes/MapScene.tsx
+++ /dev/null
@@ -1,402 +0,0 @@
-import React from "react";
-import {
- AbsoluteFill,
- useCurrentFrame,
- useVideoConfig,
- spring,
- interpolate,
-} from "remotion";
-import { theme } from "../../components/shared/theme";
-
-type MapCity = {
- name: string;
- x: number; // percentage position 0-100
- y: number; // percentage position 0-100
-};
-
-type MapSceneProps = {
- /** Cities to show on the map */
- cities?: MapCity[];
- /** Caption text at top */
- caption?: string;
- /** Route line color override */
- routeColor?: string;
-};
-
-const DEFAULT_CITIES: MapCity[] = [
- { name: "Dallas", x: 45, y: 55 },
- { name: "Houston", x: 50, y: 70 },
- { name: "San Antonio", x: 40, y: 72 },
-];
-
-export const MapScene: React.FC = ({
- cities = DEFAULT_CITIES,
- caption,
- routeColor = theme.colors.mapLine,
-}) => {
- const frame = useCurrentFrame();
- const { fps, width, height } = useVideoConfig();
-
- // Map area: center 80% of screen
- const mapLeft = width * 0.1;
- const mapTop = height * 0.1;
- const mapWidth = width * 0.8;
- const mapHeight = height * 0.8;
-
- // Convert percentage coords to pixel coords within the map area
- const points = cities.map((city) => ({
- name: city.name,
- px: mapLeft + (city.x / 100) * mapWidth,
- py: mapTop + (city.y / 100) * mapHeight,
- }));
-
- // Timing: each segment takes ~0.5s to draw, staggered
- const segmentDurationFrames = Math.round(0.5 * fps);
-
- // Calculate total path length and per-segment lengths
- const segmentLengths: number[] = [];
- let totalPathLength = 0;
- for (let i = 1; i < points.length; i++) {
- const dx = points[i].px - points[i - 1].px;
- const dy = points[i].py - points[i - 1].py;
- const len = Math.sqrt(dx * dx + dy * dy);
- segmentLengths.push(len);
- totalPathLength += len;
- }
-
- // Build the SVG path d attribute (straight lines between cities)
- const pathD = points
- .map((p, i) => `${i === 0 ? "M" : "L"} ${p.px} ${p.py}`)
- .join(" ");
-
- // Calculate cumulative lengths for each segment start
- const cumulativeLengths: number[] = [0];
- for (let i = 0; i < segmentLengths.length; i++) {
- cumulativeLengths.push(cumulativeLengths[i] + segmentLengths[i]);
- }
-
- // Route draw animation: each segment draws over segmentDurationFrames, staggered
- const getSegmentDrawProgress = (segmentIndex: number): number => {
- const segmentStartFrame = segmentIndex * segmentDurationFrames;
- return interpolate(
- frame,
- [segmentStartFrame, segmentStartFrame + segmentDurationFrames],
- [0, 1],
- { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
- );
- };
-
- // Calculate overall drawn length for strokeDashoffset
- let drawnLength = 0;
- for (let i = 0; i < segmentLengths.length; i++) {
- const segProgress = getSegmentDrawProgress(i);
- drawnLength += segmentLengths[i] * segProgress;
- }
-
- const strokeDashoffset = totalPathLength - drawnLength;
-
- // Determine when each city's route segment completes (for marker appearance)
- // City 0 appears when route starts drawing (frame ~0)
- // City i appears when segment i-1 finishes drawing
- const getCityAppearFrame = (cityIndex: number): number => {
- if (cityIndex === 0) return 0;
- return cityIndex * segmentDurationFrames;
- };
-
- // Traveling dot: appears after entire route is drawn, moves along path
- const routeCompleteFrame =
- (points.length - 1) * segmentDurationFrames;
- const travelDotDelay = routeCompleteFrame + Math.round(fps * 0.3);
- const travelDotDuration = Math.round(fps * 1.5);
-
- const travelDotProgress = interpolate(
- frame,
- [travelDotDelay, travelDotDelay + travelDotDuration],
- [0, 1],
- { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
- );
-
- // Calculate traveling dot position along the path
- const travelDistance = travelDotProgress * totalPathLength;
- let travelDotX = points[0].px;
- let travelDotY = points[0].py;
-
- if (travelDotProgress > 0) {
- let accumulated = 0;
- for (let i = 0; i < segmentLengths.length; i++) {
- if (accumulated + segmentLengths[i] >= travelDistance) {
- const segFraction =
- (travelDistance - accumulated) / segmentLengths[i];
- travelDotX =
- points[i].px + (points[i + 1].px - points[i].px) * segFraction;
- travelDotY =
- points[i].py + (points[i + 1].py - points[i].py) * segFraction;
- break;
- }
- accumulated += segmentLengths[i];
- }
- }
-
- const travelDotOpacity = interpolate(
- travelDotProgress,
- [0, 0.02, 0.98, 1],
- [0, 1, 1, 0],
- { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
- );
-
- // Caption animation
- const captionProgress = caption
- ? spring({
- frame: frame - 5,
- fps,
- config: theme.animation.snappy,
- })
- : 0;
- const captionOpacity = interpolate(captionProgress, [0, 1], [0, 1]);
- const captionTranslateY = interpolate(captionProgress, [0, 1], [-30, 0]);
-
- // Pulse animation for markers (repeating)
- const pulseFrame = frame % Math.round(fps * 1.5);
- const pulseScale = interpolate(
- pulseFrame,
- [0, Math.round(fps * 1.5)],
- [1, 2.5],
- { extrapolateRight: "clamp" }
- );
- const pulseOpacity = interpolate(
- pulseFrame,
- [0, Math.round(fps * 1.5)],
- [0.6, 0],
- { extrapolateRight: "clamp" }
- );
-
- return (
-
- {/* Subtle dark grid pattern */}
-
- );
-};
diff --git a/marketing-videos/src/engine/scenes/PollScene.tsx b/marketing-videos/src/engine/scenes/PollScene.tsx
deleted file mode 100644
index 9d1802f..0000000
--- a/marketing-videos/src/engine/scenes/PollScene.tsx
+++ /dev/null
@@ -1,408 +0,0 @@
-import React from "react";
-import {
- AbsoluteFill,
- useCurrentFrame,
- useVideoConfig,
- spring,
- interpolate,
-} from "remotion";
-import { theme } from "../../components/shared/theme";
-import { GradientBackground } from "../../components/shared/Background";
-
-type PollOption = {
- label: string;
- votes: number;
- emoji?: string;
-};
-
-type PollSceneProps = {
- /** Poll question */
- question?: string;
- /** Poll options with vote counts */
- options?: PollOption[];
- /** Caption text at top */
- caption?: string;
-};
-
-const DEFAULT_QUESTION = "Which trip are we doing?";
-const DEFAULT_OPTIONS: PollOption[] = [
- { label: "Dallas \u2192 Houston", votes: 3, emoji: "\uD83E\uDD20" },
- { label: "NYC \u2192 Boston", votes: 2, emoji: "\uD83D\uDDFD" },
- { label: "LA \u2192 San Diego", votes: 1, emoji: "\uD83C\uDF34" },
-];
-
-const VOTER_NAMES = ["Jake", "Mike", "Sam", "Alex", "Chris"];
-
-const FILL_COLORS = [
- theme.colors.accent,
- "#FF8F5E",
- "#FFB088",
-];
-
-const getFillColor = (index: number): string => {
- if (index < FILL_COLORS.length) return FILL_COLORS[index];
- return FILL_COLORS[FILL_COLORS.length - 1];
-};
-
-export const PollScene: React.FC = ({
- question = DEFAULT_QUESTION,
- options = DEFAULT_OPTIONS,
- caption,
-}) => {
- const frame = useCurrentFrame();
- const { fps } = useVideoConfig();
-
- const maxVotes = Math.max(...options.map((o) => o.votes));
-
- // Card entrance - slides up and fades in
- const cardEntrance = spring({
- frame,
- fps,
- config: theme.animation.snappy,
- });
- const cardTranslateY = interpolate(cardEntrance, [0, 1], [80, 0]);
- const cardOpacity = interpolate(cardEntrance, [0, 1], [0, 1]);
-
- // Caption entrance
- const captionEntrance = spring({
- frame: frame - 3,
- fps,
- config: theme.animation.snappy,
- });
- const captionOpacity = interpolate(captionEntrance, [0, 1], [0, 1]);
- const captionTranslateY = interpolate(captionEntrance, [0, 1], [-20, 0]);
-
- // Question text entrance
- const questionEntrance = spring({
- frame: frame - Math.round(fps * 0.15),
- fps,
- config: theme.animation.snappy,
- });
- const questionOpacity = interpolate(questionEntrance, [0, 1], [0, 1]);
-
- // Bar fill delay base (after card is in)
- const barStartFrame = Math.round(fps * 0.4);
-
- // Calculate when all bars are done filling for the "Poll sent" badge
- const lastBarStartFrame = barStartFrame + (options.length - 1) * Math.round(fps * 0.2);
- const barFillDuration = Math.round(fps * 0.5);
- const allBarsDoneFrame = lastBarStartFrame + barFillDuration + Math.round(fps * 0.3);
-
- // "Poll sent" badge
- const pollSentEntrance = spring({
- frame: frame - allBarsDoneFrame,
- fps,
- config: theme.animation.snappy,
- });
- const pollSentOpacity = interpolate(pollSentEntrance, [0, 1], [0, 1]);
- const pollSentScale = interpolate(pollSentEntrance, [0, 1], [0.5, 1]);
-
- return (
-
-
-
-
- {/* Vote notification pills - bottom right */}
-
- );
-};
diff --git a/marketing-videos/src/engine/scenes/ScreenRecScene.tsx b/marketing-videos/src/engine/scenes/ScreenRecScene.tsx
deleted file mode 100644
index 6fb824d..0000000
--- a/marketing-videos/src/engine/scenes/ScreenRecScene.tsx
+++ /dev/null
@@ -1,318 +0,0 @@
-import React, { useState } from "react";
-import {
- AbsoluteFill,
- useCurrentFrame,
- useVideoConfig,
- spring,
- interpolate,
- Video,
- staticFile,
-} from "remotion";
-import { theme } from "../../components/shared/theme";
-import { GradientBackground } from "../../components/shared/Background";
-
-type ScreenRecSceneProps = {
- /** Asset key for the screen recording, e.g. "screenrecs/date_range.mp4" */
- assetKey?: string;
- /** Caption text overlay at top */
- caption?: string;
- /** Whether to show the phone device frame */
- showFrame?: boolean;
- /** Scale of the phone (default 0.85) */
- phoneScale?: number;
- /** Optional start time offset in seconds for the video */
- videoStartSec?: number;
-};
-
-const Placeholder: React.FC = () => (
-
- {emoji}
-
- )}
-
- {/* Hook text with word-by-word reveal */}
-
- {words.map((word, index) => {
- const wordDelay = index * staggerFrames;
-
- const wordProgress = spring({
- frame: frame - wordDelay,
- fps,
- config: theme.animation.snappy,
- });
-
- const wordOpacity = interpolate(
- frame - wordDelay,
- [0, Math.round(fps * 0.15)],
- [0, 1],
- { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
- );
-
- const wordScale = interpolate(
- wordProgress,
- [0, 1],
- [0.7, 1.0]
- );
-
- const wordTranslateY = interpolate(
- wordProgress,
- [0, 1],
- [40, 0]
- );
-
- return (
-
- {word}
-
- );
- })}
-
-
- {/* Orange underline wipe */}
- 0 ? 1 : 0,
- }}
- />
-
-
-
- );
-};
diff --git a/marketing-videos/src/engine/scenes/KineticCaption.tsx b/marketing-videos/src/engine/scenes/KineticCaption.tsx
deleted file mode 100644
index ebf5b5e..0000000
--- a/marketing-videos/src/engine/scenes/KineticCaption.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from "react";
-import {
- AbsoluteFill,
- useCurrentFrame,
- useVideoConfig,
- spring,
- interpolate,
-} from "remotion";
-import { theme } from "../../components/shared/theme";
-import type { CaptionLine } from "../types";
-
-type KineticCaptionProps = {
- captions: CaptionLine[];
-};
-
-/**
- * Kinetic caption overlay that renders on top of all scenes.
- * Captions appear/disappear based on their startSec/endSec timing.
- * Each caption pops in with a spring and has bold/highlight styling options.
- */
-export const KineticCaption: React.FC
-
- {caption.text}
-
-
-
-
- )}
-
-
- {caption}
-
-
-
-
- )}
-
- {/* Poll card centered vertically */}
-
- {caption}
-
-
- {/* Question */}
-
-
- {/* "Poll sent" badge below the card */}
-
- {question}
-
-
- {/* Options */}
-
- {options.map((option, index) => {
- const staggerDelay = barStartFrame + index * Math.round(fps * 0.2);
-
- const fillProgress = spring({
- frame: frame - staggerDelay,
- fps,
- config: { damping: 30, stiffness: 120 },
- });
-
- const fillWidth = interpolate(
- fillProgress,
- [0, 1],
- [0, (option.votes / maxVotes) * 100]
- );
-
- // Vote count fades in after bar fills
- const voteCountDelay = staggerDelay + Math.round(fps * 0.3);
- const voteCountEntrance = spring({
- frame: frame - voteCountDelay,
- fps,
- config: theme.animation.snappy,
- });
- const voteCountOpacity = interpolate(
- voteCountEntrance,
- [0, 1],
- [0, 1]
- );
-
- const isWinner = option.votes === maxVotes;
- const fillColor = getFillColor(index);
-
- return (
-
- 0.8
- ? `0 0 24px ${fillColor}40`
- : "none",
- }}
- >
- {/* Fill bar */}
-
-
- {/* Label and emoji */}
-
- );
- })}
-
-
-
- {option.emoji && (
- {option.emoji}
- )}
-
- {option.label}
-
-
-
- {/* Vote count */}
-
- {option.votes} {option.votes === 1 ? "vote" : "votes"}
-
-
-
-
- {"\u2713"}
-
- Poll sent
-
-
-
- {VOTER_NAMES.map((name, index) => {
- const notifStartFrame =
- barStartFrame + index * Math.round(fps * 0.3);
- const notifEndFrame = notifStartFrame + Math.round(fps * 1.0);
-
- const enterProgress = spring({
- frame: frame - notifStartFrame,
- fps,
- config: theme.animation.snappy,
- });
-
- const exitProgress = spring({
- frame: frame - notifEndFrame,
- fps,
- config: theme.animation.smooth,
- });
-
- const notifOpacity = interpolate(
- enterProgress,
- [0, 1],
- [0, 1]
- ) * interpolate(exitProgress, [0, 1], [1, 0]);
-
- const notifTranslateX = interpolate(
- enterProgress,
- [0, 1],
- [60, 0]
- );
-
- const notifScale = interpolate(enterProgress, [0, 1], [0.7, 1]);
-
- if (notifOpacity <= 0.01) return null;
-
- return (
-
-
- {name} voted!
-
- );
- })}
-
- {/* Play icon triangle */}
-
-
- Screen Recording
-
-
-);
-
-const ScreenVideo: React.FC<{
- assetKey: string;
- startFromFrame: number;
-}> = ({ assetKey, startFromFrame }) => {
- const [hasError, setHasError] = useState(false);
-
- if (hasError) {
- return