+ {[...Array(rows)].map((_, row) =>
+ [...Array(cols)].map((_, col) => {
+ const staggerX = row % 2 === 0 ? 0 : cellSize / 2;
+ return (
+ ![]({staticFile("app-icon.png")})
+ );
+ })
+ )}
+
+
+ );
+ })
+ )}
+
+ ![]({staticFile("phone.png")})
+
+ );
+};
+
+// Scene 1: Hook - "What if understanding yourself took 5 seconds a day?"
+const HookScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const textProgress = spring({ frame, fps, config: { damping: 200 } });
+ const textOpacity = interpolate(textProgress, [0, 1], [0, 1]);
+ const textY = interpolate(textProgress, [0, 1], [50, 0]);
+
+ const secondLineProgress = spring({
+ frame: frame - 15,
+ fps,
+ config: { damping: 200 },
+ });
+ const secondLineOpacity = interpolate(secondLineProgress, [0, 1], [0, 1]);
+
+ return (
+
+ })
+
+
+
+
+
+ What if understanding yourself
+
+
+ took 5 seconds a day?
+
+
+
+
+ {/* Three devices */}
+
+ Log anywhere, anytime
+
+
+ {/* Widget */}
+
+
+ ![]({staticFile("screen2-widget.png")})
+
+
+ {/* Phone */}
+
+
+ Widget
+
+
+
+
+ {/* Watch */}
+
+ App
+
+
+
+
+ ![]({staticFile("watch-frame.png")})
+
+
+ ![]({staticFile("screen2-watch.png")})
+
+
+
+
+ Watch
+
+
+
+
+ {/* Phone with year view */}
+
+ Watch patterns
+
+ emerge +
+ + emerge +
+
+
+ {/* Progress indicator */}
+
+
+
+
+
+
+ {Math.round(fillProgress * 365)} days tracked
+
+
+
+
+ {/* Insight card */}
+
+ AI understands you
+
+
+
+
+
+
+
+ ✨
+
+
+ This Month
+
+
+
+ "You tend to feel better on weekends. Consider bringing more of that
+ weekend energy into your weekdays."
+
+
+
+
+
+
+ Feels
+
+
+ Start today. Understand tomorrow.
+
+
+ {[...Array(rows)].map((_, row) =>
+ [...Array(cols)].map((_, col) => {
+ const staggerX = row % 2 === 0 ? 0 : cellSize / 2;
+ return (
+
+ );
+ })
+ )}
+
+
+ );
+ })
+ )}
+
+
+
+
+
+ Journaling is hard
+
+ {/* Strike-through line */}
+
+
+
+
+ Feels is easy
+
+
+ {/* Tap animation sequence */}
+
+
+
+ 😊
+
+
+ →
+
+
+ ✅
+
+
+ Done!
+
+
+ {/* Left: Other apps */}
+
+
+
+
+ {/* VS */}
+
+
+
+
+
+
+
+ Other apps: 5+ minutes
+
+
+ VS
+
+
+ {/* Right: Feels */}
+
+
+
+ {["😢", "😕", "😐", "😊", "😄"].map((emoji, i) => (
+
+
+ {emoji}
+
+ ))}
+
+ Feels: 5 seconds
+
+
+
+
+ Same insights.
+
+ Fraction of effort. +
+ + Fraction of effort. +
+ Finally, tracking that sticks.
+
+
+
+
+
+
+ Feels
+
+
+ The no-journal journal
+
+
+ {[...Array(rows)].map((_, row) =>
+ [...Array(cols)].map((_, col) => {
+ const staggerX = row % 2 === 0 ? 0 : cellSize / 2;
+ return (
+
+ );
+ })
+ )}
+
+
+ );
+ })
+ )}
+
+
+
+ {/* Heatmap grid */}
+
+ Your Year in Feelings
+
+
+ {[...Array(totalCells)].map((_, i) => {
+ const isFilled = i < filledCells;
+ const moodIndex = Math.floor(Math.random() * 5);
+ const color = isFilled ? MOOD_COLORS[moodIndex] : "rgba(255,255,255,0.1)";
+
+ // Stagger the scale animation
+ const cellDelay = (i / totalCells) * fps * 5;
+ const cellProgress = spring({
+ frame: frame - cellDelay,
+ fps,
+ config: { damping: 15, stiffness: 150 },
+ });
+
+ return (
+
+ );
+ })}
+
+
+ {/* Year label */}
+
+
+
+ 2025
+
+
+
+
+ {/* Share button */}
+
+
+
+ 2025
+
+
+ Year in Review
+
+
+ {/* Mini heatmap */}
+
+ {[...Array(60)].map((_, i) => (
+
+ ))}
+
+
+ {/* Stats */}
+
+
+
+ {/* Feels branding */}
+
+
+
+ 312
+
+ Days Tracked
+
+
+ 😊
+ Top Mood
+
+ ifeel
+
+
+
+
+ 📤
+
+ Share Your Year
+
+
+
+
+
+
+
+ What will YOUR year look like?
+
+
+ {[...Array(rows)].map((_, row) =>
+ [...Array(cols)].map((_, col) => {
+ const staggerX = row % 2 === 0 ? 0 : cellSize / 2;
+ return (
+
+ );
+ })
+ )}
+
+
+ );
+ })
+ )}
+
+
+
+ );
+};
+
+// Scene 1: Morning - Widget tap while coffee
+const MorningScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const widgetProgress = spring({
+ frame,
+ fps,
+ config: { damping: 12, stiffness: 80 },
+ });
+ const widgetScale = interpolate(widgetProgress, [0, 1], [0.8, 1]);
+
+ const labelProgress = spring({
+ frame: frame - 15,
+ fps,
+ config: { damping: 200 },
+ });
+
+ return (
+
+
+
+
+
+
+
+ {/* Widget */}
+
+ 7:30 AM
+
+
+ Morning coffee
+
+
+
+
+
+ {/* Tap indicator */}
+
+
+ ☕
+
+ One tap from home screen
+
+
+
+
+
+ {/* Watch */}
+
+ 12:45 PM
+
+
+ Lunch break
+
+
+
+
+ {/* Label */}
+
+
+
+
+
+
+
+
+
+ ⌚
+
+ Quick glance from your wrist
+
+
+
+
+
+ {/* Phone with lock screen */}
+
+ 6:30 PM
+
+
+ Evening wind-down
+
+
+
+
+ {/* Label */}
+
+
+ 🔔 Gentle reminder on your Lock Screen
+
+
+
+
+
+ {/* Phone with journal */}
+
+ 10:15 PM
+
+
+ Before sleep
+
+
+
+
+ {/* Label */}
+
+ 🌙
+
+ Add a note to remember the day
+
+
+
+
+
+
+
+ Feels
+
+
+ Your mood tracker, wherever you are
+
+
+ {[...Array(rows)].map((_, row) =>
+ [...Array(cols)].map((_, col) => {
+ const staggerX = row % 2 === 0 ? 0 : cellSize / 2;
+ return (
+
+ );
+ })
+ )}
+
+
+ );
+ })
+ )}
+
+
+
+ );
+};
+
+// Scene 1: Rapid theme montage
+const ThemeMontageScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ // Cycle through themes every 0.4 seconds
+ const themeDuration = Math.round(0.4 * fps);
+ const currentThemeIndex = Math.floor(frame / themeDuration) % THEMES.length;
+ const theme = THEMES[currentThemeIndex];
+
+ const titleProgress = spring({ frame, fps, config: { damping: 200 } });
+
+ // Calculate progress within current theme for animation
+ const themeProgress = (frame % themeDuration) / themeDuration;
+
+ return (
+
+
+
+
+
+
+
+ {/* Theme name */}
+
+ Make it yours
+
+
+
+
+ {/* Mood icons row */}
+
+ {theme.name}
+
+
+ {["😢", "😕", "😐", "😊", "😄"].map((emoji, i) => (
+
+
+ {emoji}
+
+ ))}
+
+
+
+ {/* Phone with theme picker */}
+
+ 12 thoughtful themes
+
+
+ Light, dark, and everything in between
+
+
+
+
+
+
+ {/* Icon set display */}
+
+ Choose your icons
+
+
+
+
+ {/* Label */}
+
+ {iconSet.map((icon, i) => (
+
+
+ {icon}
+
+ ))}
+
+
+
+ Multiple icon packs to match your style
+
+
+
+
+ {/* Widgets */}
+
+ Custom widgets
+
+
+ {/* Large widget */}
+
+
+ {/* Label */}
+
+
+
+
+ {/* Small widgets */}
+
+
+
+
+ 😊
+
+
+
+ 🔥 15 day streak
+
+
+
+
+
+ Small, medium, and large sizes
+
+
+
+
+
+
+ Feels
+
+
+ 12 themes. Unlimited you.
+
+
+ {[...Array(rows)].map((_, row) =>
+ [...Array(cols)].map((_, col) => {
+ const staggerX = row % 2 === 0 ? 0 : cellSize / 2;
+ return (
+
+ );
+ })
+ )}
+
+
+ );
+ })
+ )}
+
+ {/* Lock icon */}
+
+
+ 🔒
+
+
+
+ Your feelings
+
+ are personal +
+ + are personal +
+
+
+ {/* Data flow visualization */}
+
+ Encrypted & synced
+
+
+ {/* Phone icon */}
+
+
+ {/* Labels */}
+
+ 📱
+ {/* Particles emanating */}
+ {particles.map((p, i) => (
+
+ ))}
+
+
+ {/* Arrow */}
+
+ →
+
+
+ {/* iCloud icon */}
+
+ ☁️
+
+ iCloud
+
+
+
+
+
+ 🔐
+
+ End-to-end encrypted
+
+
+
+ 🔄
+
+ Syncs across devices
+
+
+
+
+
+ {/* Health badge */}
+
+ Works with Apple Health
+
+
+
+
+ {/* Apple Health icon approximation */}
+
+
+ ❤️
+
+
+ Apple Health
+
+
+ Your mood data syncs with State of Mind
+
+
+ {/* Trust badges */}
+
+
+
+ 🔒
+ ☁️
+ ❤️
+
+
+
+
+ Feels
+
+
+ Private. Secure. Yours.
+
+
+ {[...Array(rows)].map((_, row) =>
+ [...Array(cols)].map((_, col) => {
+ const staggerX = row % 2 === 0 ? 0 : cellSize / 2;
+ return (
+
+ );
+ })
+ )}
+
+
+ );
+ })
+ )}
+
+
+
+ {/* Streak counter */}
+
+ Build your streak
+
+
+
+
+ {/* Progress bar */}
+
+ 🔥
+
+
+ {currentCount}
+
+
+ day streak
+
+
+
+
+
+
+
+
+
+ {/* Calendar grid */}
+
+ Watch it grow
+
+
+ {/* Day labels */}
+ {["S", "M", "T", "W", "T", "F", "S"].map((day, i) => (
+
+
+ {day}
+
+ ))}
+
+ {/* Days */}
+ {[...Array(days)].map((_, i) => {
+ const isFilled = i < filledDays;
+ const cellProgress = spring({
+ frame: frame - i * 2,
+ fps,
+ config: { damping: 15, stiffness: 150 },
+ });
+
+ return (
+
+ {i + 1}
+
+ );
+ })}
+
+
+
+ {/* Subtitle */}
+
+
+ 🏆
+
+ 30 Day Streak!
+
+
+ You're on fire!
+
+
+
+
+ Celebrate every milestone
+
+
+
+
+
+ 🔥
+
+
+
+
+ Feels
+
+
+ How long can you go?
+
+
+ {shouldGlitch && (
+ <>
+
+ {children}
+
+
+ {children}
+
+
+ )}
+ {children}
+
+ );
+};
+
+// Scene 1: The Setup - "They took something from you"
+const SetupScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const fadeIn = interpolate(frame, [0, fps * 0.5], [0, 1], {
+ extrapolateRight: "clamp",
+ });
+
+ const textReveal = interpolate(frame, [fps * 0.5, fps * 2], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+
+ const typewriterLength = Math.floor(textReveal * 28);
+ const fullText = "They took something from you";
+ const displayText = fullText.slice(0, typewriterLength);
+
+ // Flicker effect
+ const flicker = frame % 60 < 2 ? 0.3 : 1;
+
+ return (
+
+
+ {displayText}
+
+
+ {/* Blinking cursor */}
+ {typewriterLength < fullText.length && (
+
+ _
+
+ )}
+
+
+ {/* Bottom text */}
+
+
+
+ YOUR EMOTIONS
+
+
+
+
+ {/* Crew grid */}
+
+ ASSEMBLING THE CREW
+
+
+ {crew.map((member, i) => {
+ const delay = i * 8;
+ const memberProgress = spring({
+ frame: frame - delay,
+ fps,
+ config: { damping: 12, stiffness: 100 },
+ });
+
+ return (
+
+
+
+ );
+ })}
+
+ {member.emoji}
+
+
+ {member.name}
+
+
+ {member.role}
+
+
+
+
+ {/* Title */}
+
+ {/* Target markers */}
+
+
+
+
+ {/* Entry point */}
+
+ TARGET
+
+
+ ENTRY POINT
+
+
+
+
+ {/* Steps */}
+
+ THE PLAN
+
+
+ {["DOWNLOAD", "TAP MOOD", "REPEAT"].map((step, i) => (
+
+
+
+ ))}
+
+ {i + 1}
+
+
+ {step}
+
+
+ {moods.map((mood, i) => {
+ const isSelected = i === selectedIndex && frame > fps * 3;
+ const buttonProgress = interpolate(
+ revealProgress,
+ [i * 0.15, i * 0.15 + 0.3],
+ [0, 1],
+ { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+ );
+
+ return (
+
+
+ {/* Approaching finger/cursor */}
+
+ {mood}
+
+ );
+ })}
+
+ 👆
+
+
+ {/* "ACQUIRED" text */}
+ {frame > fps * 3.2 && (
+
+
+ MOOD ACQUIRED
+
+
+ )}
+
+
+
+
+
+
+
+ Feels
+
+
+
+ TAKE BACK YOUR EMOTIONS
+
+ 0.9 ? 1 : 0,
+ pointerEvents: "none",
+ zIndex: 101,
+ }}
+ />
+ {/* Vignette */}
+
+
+ );
+};
+
+// Pixel art mood character
+const MoodSprite: React.FC<{
+ mood: number;
+ x: number;
+ y: number;
+ size?: number;
+ bounce?: boolean;
+}> = ({ mood, x, y, size = 80, bounce = true }) => {
+ const frame = useCurrentFrame();
+ const colors = ["#ef4444", "#f97316", "#fbbf24", "#22c55e", "#10b981"];
+ const faces = [":(", ":/", ":|", ":)", ":D"];
+
+ const bounceY = bounce ? Math.sin(frame * 0.3) * 5 : 0;
+
+ return (
+
+
+ );
+};
+
+// Scene 2: Gameplay - Catching moods
+const GameplayScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps, width, height } = useVideoConfig();
+
+ // Player position (bottom of screen)
+ const playerX = width / 2 - 50 + Math.sin(frame * 0.1) * 200;
+
+ // Falling moods
+ const fallingMoods = [
+ { mood: 4, startX: 200, delay: 0 },
+ { mood: 3, startX: 500, delay: 20 },
+ { mood: 2, startX: 800, delay: 40 },
+ { mood: 4, startX: 350, delay: 60 },
+ { mood: 3, startX: 650, delay: 80 },
+ ];
+
+ // Score counter
+ const score = Math.floor(interpolate(frame, [0, fps * 4], [0, 9999], {
+ extrapolateRight: "clamp",
+ }));
+
+ return (
+
+
+ );
+};
+
+// Scene 3: Power Up - Streak bonus
+const PowerUpScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const powerUpPulse = Math.sin(frame * 0.3) * 0.2 + 1;
+ const rotateSpeed = frame * 3;
+
+ const streakNumber = Math.floor(
+ interpolate(frame, [0, fps * 2], [7, 30], {
+ extrapolateRight: "clamp",
+ easing: Easing.out(Easing.cubic),
+ })
+ );
+
+ return (
+
+
+ );
+};
+
+// Scene 4: High Score - Leaderboard
+const HighScoreScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const scores = [
+ { rank: 1, name: "YOU", score: 99999, isPlayer: true },
+ { rank: 2, name: "PRO", score: 88420, isPlayer: false },
+ { rank: 3, name: "ACE", score: 77350, isPlayer: false },
+ { rank: 4, name: "ZEN", score: 66100, isPlayer: false },
+ { rank: 5, name: "JOY", score: 55000, isPlayer: false },
+ ];
+
+ return (
+
+
+ );
+};
+
+// Scene 5: Game Over - CTA
+const GameOverScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const logoProgress = spring({
+ frame,
+ fps,
+ config: { damping: 10, stiffness: 80 },
+ });
+
+ const blink = frame % 40 < 30;
+
+ return (
+
+
+ );
+};
+
+// Main composition - 20 seconds total
+export const ConceptIRetroArcade: React.FC = () => {
+ const { fps } = useVideoConfig();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/feels-promo/src/ConceptJ-Conspiracy.tsx b/feels-promo/src/ConceptJ-Conspiracy.tsx
new file mode 100644
index 0000000..0d01819
--- /dev/null
+++ b/feels-promo/src/ConceptJ-Conspiracy.tsx
@@ -0,0 +1,609 @@
+import {
+ AbsoluteFill,
+ Img,
+ staticFile,
+ useCurrentFrame,
+ useVideoConfig,
+ interpolate,
+ spring,
+ Sequence,
+ Easing,
+} from "remotion";
+
+// Film grain effect
+const FilmGrain: React.FC<{ intensity?: number }> = ({ intensity = 0.15 }) => {
+ const frame = useCurrentFrame();
+
+ return (
+
+ );
+};
+
+// Redacted text bar
+const Redacted: React.FC<{ width: number }> = ({ width }) => (
+
+);
+
+// Glitch/static overlay
+const StaticOverlay: React.FC<{ active: boolean }> = ({ active }) => {
+ const frame = useCurrentFrame();
+
+ if (!active) return null;
+
+ return (
+
+ );
+};
+
+// Document stamp
+const ClassifiedStamp: React.FC<{ delay?: number }> = ({ delay = 0 }) => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const stampProgress = spring({
+ frame: frame - delay,
+ fps,
+ config: { damping: 8, stiffness: 200 },
+ });
+
+ return (
+
+
+ );
+};
+
+// Scene 2: The Evidence - Redacted documents
+const EvidenceScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const docSlide = interpolate(frame, [0, fps], [100, 0], {
+ extrapolateRight: "clamp",
+ easing: Easing.out(Easing.cubic),
+ });
+
+ return (
+
+
+ );
+};
+
+// Scene 3: The Truth - Revelation
+const TruthScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const revealProgress = interpolate(frame, [0, fps * 2], [0, 1], {
+ extrapolateRight: "clamp",
+ });
+
+ const glitchActive = frame % 45 < 3;
+
+ return (
+
+
+ );
+};
+
+// Scene 4: The Solution - Feels reveal
+const SolutionScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const logoProgress = spring({
+ frame,
+ fps,
+ config: { damping: 12, stiffness: 80 },
+ });
+
+ // Typing effect for tagline
+ const tagline = "Track your truth.";
+ const typedLength = Math.floor(
+ interpolate(frame, [fps * 1.5, fps * 3], [0, tagline.length], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ })
+ );
+
+ return (
+
+
+ );
+};
+
+// Main composition - 20 seconds total
+export const ConceptJConspiracy: React.FC = () => {
+ const { fps } = useVideoConfig();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/feels-promo/src/ConceptK-SportsCenter.tsx b/feels-promo/src/ConceptK-SportsCenter.tsx
new file mode 100644
index 0000000..56ed2ac
--- /dev/null
+++ b/feels-promo/src/ConceptK-SportsCenter.tsx
@@ -0,0 +1,701 @@
+import {
+ AbsoluteFill,
+ Img,
+ staticFile,
+ useCurrentFrame,
+ useVideoConfig,
+ interpolate,
+ spring,
+ Sequence,
+ Easing,
+} from "remotion";
+
+// ESPN-style colors
+const ESPN_RED = "#cc0000";
+const ESPN_DARK = "#1a1a1a";
+const ESPN_YELLOW = "#ffc629";
+
+// Breaking news ticker
+const NewsTicker: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { width } = useVideoConfig();
+
+ const headlines = [
+ "BREAKING: Local user hits 30-day streak, experts baffled",
+ "MOOD ALERT: Wednesday showing signs of improvement league-wide",
+ "TRADE DEADLINE: Bad vibes traded for good vibes in blockbuster deal",
+ "INJURY REPORT: Monday motivation OUT indefinitely",
+ "STATS: Average mood up 15% since app download",
+ ];
+
+ const tickerText = headlines.join(" • ");
+ const tickerWidth = tickerText.length * 14;
+ const offset = (frame * 3) % (tickerWidth + width);
+
+ return (
+
+ {/* Dramatic spotlight */}
+
+
+ {/* Logo slam */}
+
+ );
+};
+
+// Scene 2: Play of the Day - Mood selection replay
+const PlayOfDayScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const replayProgress = interpolate(frame, [fps * 0.5, fps * 3], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+
+ // Slow-mo finger movement
+ const fingerX = interpolate(replayProgress, [0, 0.8, 1], [0, 200, 200]);
+ const fingerY = interpolate(replayProgress, [0, 0.8, 0.9, 1], [100, 0, -20, 0]);
+
+ // Impact flash
+ const impactFlash = replayProgress > 0.85 && replayProgress < 0.95;
+
+ return (
+
+ {/* "PLAY OF THE DAY" banner */}
+
+ );
+};
+
+// Scene 3: Stats breakdown
+const StatsScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const stats = [
+ { label: "DAYS TRACKED", value: 127, color: "#10b981" },
+ { label: "CURRENT STREAK", value: 23, color: ESPN_YELLOW },
+ { label: "BEST STREAK", value: 45, color: ESPN_RED },
+ { label: "MOOD AVERAGE", value: "4.2", color: "#3b82f6" },
+ ];
+
+ return (
+
+ {/* Stats title */}
+
+ );
+};
+
+// Scene 4: CTA - "Download to join the league"
+const CTAScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const logoProgress = spring({
+ frame,
+ fps,
+ config: { damping: 10, stiffness: 80 },
+ });
+
+ return (
+
+ {/* Dramatic background */}
+
+
+ {/* App icon */}
+
+ );
+};
+
+// Main composition - 20 seconds total
+export const ConceptKSportsCenter: React.FC = () => {
+ const { fps } = useVideoConfig();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/feels-promo/src/ConceptL-Musical.tsx b/feels-promo/src/ConceptL-Musical.tsx
new file mode 100644
index 0000000..f24e1c5
--- /dev/null
+++ b/feels-promo/src/ConceptL-Musical.tsx
@@ -0,0 +1,724 @@
+import {
+ AbsoluteFill,
+ Img,
+ staticFile,
+ useCurrentFrame,
+ useVideoConfig,
+ interpolate,
+ spring,
+ Sequence,
+ Easing,
+} from "remotion";
+
+// Stage curtain component
+const Curtain: React.FC<{ side: "left" | "right"; open: number }> = ({
+ side,
+ open,
+}) => {
+ const offset = interpolate(open, [0, 1], [0, 100]);
+
+ return (
+
+ {/* Stage floor */}
+
+
+ {/* Spotlight */}
+
+ );
+};
+
+// Scene 2: "The Feelings Song" - Dancing mood emojis
+const FeelingSongScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps, width, height } = useVideoConfig();
+
+ const emojis = [
+ { emoji: "😢", color: "#3b82f6", name: "SADNESS" },
+ { emoji: "😤", color: "#ef4444", name: "ANGER" },
+ { emoji: "😊", color: "#10b981", name: "JOY" },
+ { emoji: "😰", color: "#8b5cf6", name: "ANXIETY" },
+ { emoji: "🥰", color: "#ec4899", name: "LOVE" },
+ ];
+
+ // Choreographed positions
+ const getPosition = (index: number, progress: number) => {
+ const centerX = width / 2;
+ const baseY = height * 0.5;
+
+ // Dance formation - V shape to line to circle
+ const phase = Math.floor(progress * 3) % 3;
+
+ if (phase === 0) {
+ // V formation
+ const vX = centerX + (index - 2) * 150;
+ const vY = baseY + Math.abs(index - 2) * 80;
+ return { x: vX - 50, y: vY };
+ } else if (phase === 1) {
+ // Line formation
+ const lineX = centerX + (index - 2) * 180;
+ return { x: lineX - 50, y: baseY };
+ } else {
+ // Circle formation
+ const angle = (index / 5) * Math.PI * 2 + progress * 2;
+ const radius = 250;
+ return {
+ x: centerX + Math.cos(angle) * radius - 50,
+ y: baseY + Math.sin(angle) * radius * 0.5,
+ };
+ }
+ };
+
+ const danceProgress = interpolate(frame, [0, fps * 5], [0, 1], {
+ extrapolateRight: "clamp",
+ });
+
+ return (
+
+ {/* Stage floor with reflection */}
+
+
+ {/* Multiple spotlights */}
+ {emojis.map((e, i) => {
+ const pos = getPosition(i, danceProgress);
+ return (
+
+ );
+};
+
+// Scene 3: Solo number - Joy takes center stage
+const SoloNumberScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps, width, height } = useVideoConfig();
+
+ const spotlightPulse = Math.sin(frame * 0.1) * 0.2 + 0.8;
+
+ // Joy's dramatic entrance
+ const joyEnter = spring({
+ frame,
+ fps,
+ config: { damping: 12, stiffness: 60 },
+ });
+
+ const joyY = interpolate(joyEnter, [0, 1], [height, height * 0.4]);
+
+ // Star burst behind Joy
+ const starRotation = frame * 0.5;
+
+ return (
+
+ {/* Dramatic backdrop */}
+
+
+ {/* Star burst */}
+
+ );
+};
+
+// Scene 4: Finale - All together + app reveal
+const FinaleScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps, width, height } = useVideoConfig();
+
+ const emojis = ["😢", "😕", "😐", "🙂", "😊"];
+
+ const logoProgress = spring({
+ frame: frame - fps * 1,
+ fps,
+ config: { damping: 10, stiffness: 80 },
+ });
+
+ // Confetti
+ const confettiColors = ["#ff6b6b", "#feca57", "#48dbfb", "#ff9ff3", "#1dd1a1"];
+
+ return (
+
+ {/* Grand finale lighting */}
+
+
+ {/* Line of emojis at top */}
+
+ );
+};
+
+// Main composition - 25 seconds total
+export const ConceptLMusical: React.FC = () => {
+ const { fps } = useVideoConfig();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/feels-promo/src/Root.tsx b/feels-promo/src/Root.tsx
index 86ab3a0..7eff48b 100644
--- a/feels-promo/src/Root.tsx
+++ b/feels-promo/src/Root.tsx
@@ -1,23 +1,166 @@
import { Composition } from "remotion";
import { FeelsPromoV1 } from "./FeelsPromo";
+import { ConceptASelfAwareness } from "./ConceptA-SelfAwareness";
+import { ConceptBNoJournalJournal } from "./ConceptB-NoJournalJournal";
+import { ConceptCYearInFeelings } from "./ConceptC-YearInFeelings";
+import { ConceptDAlwaysThere } from "./ConceptD-AlwaysThere";
+import { ConceptEMakeItYours } from "./ConceptE-MakeItYours";
+import { ConceptFPrivacyFirst } from "./ConceptF-PrivacyFirst";
+import { ConceptGStreakEffect } from "./ConceptG-StreakEffect";
+// Wild concepts
+import { ConceptHMoodHeist } from "./ConceptH-MoodHeist";
+import { ConceptIRetroArcade } from "./ConceptI-RetroArcade";
+import { ConceptJConspiracy } from "./ConceptJ-Conspiracy";
+import { ConceptKSportsCenter } from "./ConceptK-SportsCenter";
+import { ConceptLMusical } from "./ConceptL-Musical";
export const RemotionRoot: React.FC = () => {
const fps = 30;
- const sceneDuration = 3.5 * fps; // 3.5 seconds per scene
- const transitionDuration = Math.round(0.6 * fps); // 0.6 second transitions
- const outroDuration = Math.round(2.5 * fps);
- // Calculate total duration accounting for transition overlaps
- // 7 scenes + outro - 7 transitions
- const totalDuration =
+ // V1 calculations
+ const sceneDuration = 3.5 * fps;
+ const transitionDuration = Math.round(0.6 * fps);
+ const outroDuration = Math.round(2.5 * fps);
+ const v1TotalDuration =
sceneDuration * 7 + outroDuration - transitionDuration * 7;
return (
<>
+ {/* ═══════════════════════════════════════════════════════════════
+ ORIGINAL PROMO
+ ═══════════════════════════════════════════════════════════════ */}
+
+ {faces[mood]}
+
+
+ );
+};
+
+// Scene 1: Insert Coin
+const InsertCoinScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const blink = frame % 30 < 20;
+
+ const titleDrop = spring({
+ frame,
+ fps,
+ config: { damping: 8, stiffness: 100 },
+ });
+
+ return (
+
+
+
+ {/* Mood characters parade */}
+
+ FEELS
+
+
+ THE GAME
+
+
+ {[0, 1, 2, 3, 4].map((mood, i) => {
+ const delay = i * 5;
+ const appearProgress = spring({
+ frame: frame - delay - 15,
+ fps,
+ config: { damping: 12 },
+ });
+ return (
+
+
+ {/* Insert Coin */}
+
+
+ );
+ })}
+
+
+
+ {/* Credits */}
+
+ INSERT COIN
+
+
+
+
+ © 2025 FEELS CORP
+
+
+
+
+ {/* Falling moods */}
+ {fallingMoods.map((item, i) => {
+ const fallProgress = interpolate(
+ frame - item.delay,
+ [0, fps * 2],
+ [0, 1],
+ { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+ );
+ const y = interpolate(fallProgress, [0, 1], [-100, height - 300]);
+
+ return (
+
+ SCORE: {score.toString().padStart(5, "0")}
+
+
+ ♥♥♥
+
+
+ STREAK: 7
+
+
+
+
+ {/* Ground */}
+
+ 🧺
+
+
+ {/* Ground pattern */}
+ {[...Array(20)].map((_, i) => (
+
+ ))}
+
+
+ {/* "CATCH THE GOOD VIBES" */}
+
+
+
+ CATCH THE GOOD VIBES!
+
+
+ {[...Array(12)].map((_, i) => (
+
+ ))}
+
+
+ {/* Power up text */}
+
+
+
+ {/* Giant streak number */}
+
+ POWER UP!
+
+
+
+
+ {/* Bonus items floating */}
+ {["🔥", "⭐", "💎", "🏆"].map((emoji, i) => {
+ const angle = (frame * 2 + i * 90) * (Math.PI / 180);
+ const radius = 300;
+ const x = Math.cos(angle) * radius;
+ const y = Math.sin(angle) * radius * 0.5;
+
+ return (
+
+ {streakNumber}
+
+
+ DAY STREAK!
+
+
+ {emoji}
+
+ );
+ })}
+
+ {/* XP bonus */}
+
+
+
+ +500 XP BONUS!
+
+
+
+
+ {/* Leaderboard */}
+
+ HIGH SCORES
+
+
+ {scores.map((entry, i) => {
+ const delay = i * 8;
+ const rowProgress = spring({
+ frame: frame - delay,
+ fps,
+ config: { damping: 12 },
+ });
+
+ return (
+
+
+ {/* New high score flash */}
+
+
+ );
+ })}
+
+ {entry.rank}.
+
+
+ {entry.name}
+
+
+ {entry.score.toLocaleString()}
+
+ {entry.isPlayer && (
+ 👑
+ )}
+
+
+
+ ★ NEW HIGH SCORE ★
+
+
+
+
+
+ {/* Title */}
+
+
+
+
+ {/* Press Start */}
+
+ FEELS
+
+
+ LEVEL UP YOUR MOOD
+
+
+
+
+ {/* Download prompt */}
+
+ PRESS START
+
+
+
+
+ DOWNLOAD NOW ON APP STORE
+
+
+
+ );
+};
+
+// Scene 1: The Hook - "They don't want you to know"
+const HookScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const staticActive = frame < fps * 0.5 || (frame > fps * 2 && frame < fps * 2.3);
+
+ const textOpacity = interpolate(frame, [fps * 0.5, fps * 1], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+
+ const zoomIn = interpolate(frame, [0, fps * 4], [1, 1.1], {
+ extrapolateRight: "clamp",
+ });
+
+ return (
+
+ CLASSIFIED
+
+
+
+
+ {/* Timestamp */}
+
+ WHAT IF EVERYTHING YOU KNEW
+
+
+ WAS A LIE?
+
+
+ DOC-7X-{frame.toString().padStart(4, "0")}
+
+
+ {/* Header */}
+
+
+ {/* Red strings connecting */}
+
+
+ {/* Narration text */}
+
+ INTERNAL MEMO - RESTRICTED ACCESS
+
+
+ {/* Body text with redactions */}
+
+ Subject: Emotional Awareness Initiative
+
+
+ The
+
+ Recommendation: Continue suppression of
+
+ {/* Classified stamp */}
+ +
+ The
+
+ Recommendation: Continue suppression of
+
+
+ "They don't want you to understand yourself."
+
+
+
+
+ {/* Bottom text */}
+
+ THE TRUTH IS
+
+
+
+ YOUR EMOTIONS
+
+
+
+ MATTER
+
+
+
+
+ And there's an app that knows it.
+
+
+
+
+
+ {/* App name */}
+
+
+
+
+ {/* "Wake up" text */}
+
+ Feels
+
+
+ {/* Typed tagline */}
+
+ {tagline.slice(0, typedLength)}
+ |
+
+
+
+
+ {/* File number */}
+
+ WAKE UP. DOWNLOAD NOW.
+
+
+ CASE CLOSED
+
+
+
+ );
+};
+
+// Score bug / mood tracker
+const MoodScoreBug: React.FC<{ mood: string; score: number; streak: number }> = ({
+ mood,
+ score,
+ streak,
+}) => {
+ return (
+
+
+ FEELS CENTER
+
+
+
+ {tickerText}
+
+
+
+ );
+};
+
+// Scene 1: Opening - "Welcome to Feels Center"
+const OpeningScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const logoSlam = spring({
+ frame,
+ fps,
+ config: { damping: 8, stiffness: 150 },
+ });
+
+ const textReveal = interpolate(frame, [fps * 0.5, fps * 1.5], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+
+ return (
+
+
+ TODAY
+ {mood}
+
+
+ SCORE
+
+ {score}
+
+
+
+ STREAK
+
+ {streak}🔥
+
+
+
+
+ {/* Subtitle */}
+
+ FEELS
+
+
+ CENTER
+
+
+
+
+ {/* ESPN-style corner graphics */}
+
+ YOUR EMOTIONAL HIGHLIGHTS
+
+
+ LIVE
+
+
+
+
+
+
+ {/* Replay frame */}
+
+
+ 🏆 PLAY OF THE DAY
+
+
+
+ {/* Mood buttons */}
+
+
+ {/* Slow-mo indicator */}
+
+ {["😢", "😕", "😐", "🙂", "😊"].map((emoji, i) => {
+ const isTarget = i === 4;
+ const isSelected = isTarget && replayProgress > 0.85;
+
+ return (
+
+
+ {/* Slow-mo finger */}
+
+ {emoji}
+
+ );
+ })}
+
+ 👆
+
+
+ {/* Impact lines */}
+ {impactFlash && (
+ <>
+ {[...Array(8)].map((_, i) => (
+
+ ))}
+
+ )}
+
+
+
+ {/* Commentary */}
+
+ SLOW-MO REPLAY
+
+ 🎬
+ 0.9 ? 1 : 0,
+ }}
+ >
+
+
+
+ "WHAT A SELECTION! ABSOLUTELY CLINICAL!"
+
+
+
+
+ {/* Stats grid */}
+
+ 📊 SEASON STATS
+
+
+ {stats.map((stat, i) => {
+ const delay = i * 8;
+ const statProgress = spring({
+ frame: frame - delay,
+ fps,
+ config: { damping: 12 },
+ });
+
+ const countUp = Math.floor(
+ interpolate(statProgress, [0, 1], [0, typeof stat.value === "number" ? stat.value : parseFloat(stat.value)])
+ );
+
+ return (
+
+
+
+
+ );
+ })}
+
+ {stat.label}
+
+
+ {typeof stat.value === "number" ? countUp : stat.value}
+
+
+
+
+
+ {/* CTA text */}
+
+
+
+
+ {/* ESPN-style "Download" button */}
+
+ Feels
+
+
+ JOIN THE LEAGUE
+
+
+
+
+ {/* "THIS HAS BEEN" outro */}
+
+
+ DOWNLOAD NOW
+
+
+
+
+
+ This has been FEELS CENTER. Track responsibly.
+
+
+ {/* Curtain folds */}
+ {[...Array(8)].map((_, i) => (
+
+ ))}
+
+ );
+};
+
+// Spotlight effect
+const Spotlight: React.FC<{
+ x: number;
+ y: number;
+ size?: number;
+ color?: string;
+ intensity?: number;
+}> = ({ x, y, size = 400, color = "#fff", intensity = 0.6 }) => (
+
+);
+
+// Dancing emoji character
+const DancingEmoji: React.FC<{
+ emoji: string;
+ x: number;
+ y: number;
+ size?: number;
+ delay?: number;
+ danceStyle?: "bounce" | "spin" | "sway";
+}> = ({ emoji, x, y, size = 100, delay = 0, danceStyle = "bounce" }) => {
+ const frame = useCurrentFrame();
+ const localFrame = frame - delay;
+
+ let transform = "";
+
+ switch (danceStyle) {
+ case "bounce":
+ const bounceY = Math.abs(Math.sin(localFrame * 0.2)) * 30;
+ transform = `translateY(${-bounceY}px)`;
+ break;
+ case "spin":
+ transform = `rotate(${localFrame * 5}deg)`;
+ break;
+ case "sway":
+ const swayX = Math.sin(localFrame * 0.15) * 20;
+ const swayRotate = Math.sin(localFrame * 0.15) * 10;
+ transform = `translateX(${swayX}px) rotate(${swayRotate}deg)`;
+ break;
+ }
+
+ return (
+
+ {emoji}
+
+ );
+};
+
+// Stage lights at top
+const StageLights: React.FC = () => {
+ const frame = useCurrentFrame();
+
+ const colors = ["#ff6b6b", "#feca57", "#48dbfb", "#ff9ff3", "#1dd1a1"];
+
+ return (
+
+ {colors.map((color, i) => {
+ const pulse = Math.sin(frame * 0.1 + i) * 0.3 + 0.7;
+ return (
+
+ );
+};
+
+// Scene 1: Curtain Rise - "Welcome to the show"
+const CurtainRiseScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const curtainOpen = interpolate(frame, [fps * 1, fps * 3], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ easing: Easing.out(Easing.cubic),
+ });
+
+ const titleProgress = spring({
+ frame: frame - fps * 2,
+ fps,
+ config: { damping: 12, stiffness: 80 },
+ });
+
+ return (
+
+
+
+ );
+ })}
+
+
+
+
+ Welcome to
+
+
+ FEELS
+
+
+ The Musical
+
+
+
+
+ {/* Dancing emojis */}
+ {emojis.map((e, i) => {
+ const pos = getPosition(i, danceProgress);
+ const delay = i * 3;
+
+ return (
+
+ ♪ EVERYBODY FEEL! ♪
+
+
+ {note}
+
+ );
+ })}
+
+
+ {[...Array(12)].map((_, i) => (
+
+ ))}
+
+
+ {/* Giant spotlight on Joy */}
+
+ 😊
+
+
+ {/* Lyric text */}
+
+
+
+
+ "One tap is all it takes..."
+
+
+ "To know how your heart feels today!"
+
+
+ {emojis.map((emoji, i) => {
+ const delay = i * 3;
+ const emojiProgress = spring({
+ frame: frame - delay,
+ fps,
+ config: { damping: 12 },
+ });
+
+ return (
+
+
+ {/* App icon center stage */}
+
+ {emoji}
+
+ );
+ })}
+
+
+
+
+ {/* App name */}
+
+
+
+
+ {/* Confetti */}
+ {[...Array(40)].map((_, i) => {
+ const seed = i * 137.5;
+ const x = (Math.sin(seed) * 0.5 + 0.5) * width;
+ const fallProgress = interpolate(
+ frame,
+ [fps * 1 + i * 2, fps * 5],
+ [0, 1],
+ { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+ );
+ const y = interpolate(fallProgress, [0, 1], [-50, height + 50]);
+
+ return (
+
+ );
+ })}
+
+
+ Feels
+
+
+ ♪ Download Today ♪
+
+