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 (
-
-
- {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 (
-
-
- );
- })}
-
- {/* Title */}
-
-
- 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 (
-
-
- );
- })}
-
-
- © 2025 FEELS CORP
-
-
- );
-};
-
-// 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 (
-
-
-
- SCORE: {score.toString().padStart(5, "0")}
-
-
- ♥♥♥
-
-
- STREAK: 7
-
-
- {/* Ground pattern */}
- {[...Array(20)].map((_, i) => (
-
- ))}
-
-
- CATCH THE GOOD VIBES!
-
-
- );
-};
-
-// 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 (
-
-
- {[...Array(12)].map((_, i) => (
-
- ))}
-
-
- {streakNumber}
-
-
- DAY STREAK!
-
-
- {emoji}
-
- );
- })}
-
- {/* XP bonus */}
-
-
- );
-};
-
-// 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 (
-
-
- {scores.map((entry, i) => {
- const delay = i * 8;
- const rowProgress = spring({
- frame: frame - delay,
- fps,
- config: { damping: 12 },
- });
-
- return (
-
-
- {entry.rank}.
-
-
- {entry.name}
-
-
- {entry.score.toLocaleString()}
-
- {entry.isPlayer && (
-
👑
- )}
-
- );
- })}
-
-
- ★ NEW HIGH SCORE ★
-
-
- );
-};
-
-// 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 (
-
-
-
-
-
- FEELS
-
-
- LEVEL UP YOUR MOOD
-
-
-
- DOWNLOAD NOW ON APP STORE
-
-
- );
-};
-
-// 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
deleted file mode 100644
index 0d01819..0000000
--- a/feels-promo/src/ConceptJ-Conspiracy.tsx
+++ /dev/null
@@ -1,609 +0,0 @@
-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 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 (
-
-
-
- {/* Ominous text */}
-
-
- WHAT IF EVERYTHING YOU KNEW
-
-
- WAS A LIE?
-
-
- DOC-7X-{frame.toString().padStart(4, "0")}
-
-
- );
-};
-
-// 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 (
-
-
-
- {/* Document */}
-
- {/* Header */}
-
- INTERNAL MEMO - RESTRICTED ACCESS
-
-
- {/* Body text with redactions */}
-
- Subject: Emotional Awareness Initiative
-
-
- {/* Classified stamp */}
-
-
-
-
- {/* Narration text */}
-
-
- "They don't want you to understand yourself."
-
-
- );
-};
-
-// 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 (
-
-
-
- {/* The truth revealed */}
-
-
- THE TRUTH IS
-
-
-
- YOUR EMOTIONS
-
-
-
- MATTER
-
-
-
- And there's an app that knows it.
-
-
- );
-};
-
-// 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 (
-
-
-
- {/* App icon */}
-
-
-
-
- Feels
-
-
- {/* Typed tagline */}
-
- {tagline.slice(0, typedLength)}
- |
-
-
-
- WAKE UP. DOWNLOAD NOW.
-
-
- CASE CLOSED
-
-
- );
-};
-
-// 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
deleted file mode 100644
index 56ed2ac..0000000
--- a/feels-promo/src/ConceptK-SportsCenter.tsx
+++ /dev/null
@@ -1,701 +0,0 @@
-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 (
-
-
-
- FEELS CENTER
-
-
-
- {tickerText}
-
-
- );
-};
-
-// Score bug / mood tracker
-const MoodScoreBug: React.FC<{ mood: string; score: number; streak: number }> = ({
- mood,
- score,
- streak,
-}) => {
- return (
-
-
-
-
-
STREAK
-
- {streak}🔥
-
-
-
- );
-};
-
-// 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 (
-
- {/* Dramatic spotlight */}
-
-
- {/* Logo slam */}
-
-
- FEELS
-
-
- CENTER
-
-
-
- YOUR EMOTIONAL HIGHLIGHTS
-
-
- LIVE
-
-
-
- );
-};
-
-// 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 */}
-
-
-
- 🏆 PLAY OF THE DAY
-
-
-
- {/* Mood buttons */}
-
- {["😢", "😕", "😐", "🙂", "😊"].map((emoji, i) => {
- const isTarget = i === 4;
- const isSelected = isTarget && replayProgress > 0.85;
-
- return (
-
- {emoji}
-
- );
- })}
-
-
- {/* Slow-mo finger */}
-
- 👆
-
-
- {/* Impact lines */}
- {impactFlash && (
- <>
- {[...Array(8)].map((_, i) => (
-
- ))}
-
- )}
-
-
- SLOW-MO REPLAY
-
-
🎬
-
0.9 ? 1 : 0,
- }}
- >
-
- "WHAT A SELECTION! ABSOLUTELY CLINICAL!"
-
-
- );
-};
-
-// 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 */}
-
-
- {/* Stats grid */}
-
- {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}
-
-
- );
- })}
-
- );
-};
-
-// 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 */}
-
-
-
-
- Feels
-
-
- JOIN THE LEAGUE
-
-
-
- This has been FEELS CENTER. Track responsibly.
-
-
- );
-};
-
-// 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
deleted file mode 100644
index f24e1c5..0000000
--- a/feels-promo/src/ConceptL-Musical.tsx
+++ /dev/null
@@ -1,724 +0,0 @@
-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 (
-
- {/* 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 (
-
- {/* Stage floor */}
-
-
- {/* Spotlight */}
-
-
- Welcome to
-
-
- FEELS
-
-
- The Musical
-
-
- );
-};
-
-// 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 (
-
-
- ♪ EVERYBODY FEEL! ♪
-
-
- {note}
-
- );
- })}
-
-
- );
-};
-
-// 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 */}
-
- {[...Array(12)].map((_, i) => (
-
- ))}
-
- 😊
-
-
- {/* Lyric text */}
-
-
- "One tap is all it takes..."
-
-
- "To know how your heart feels today!"
-
-
- );
-};
-
-// 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 */}
-
- {emojis.map((emoji, i) => {
- const delay = i * 3;
- const emojiProgress = spring({
- frame: frame - delay,
- fps,
- config: { damping: 12 },
- });
-
- return (
-
- {emoji}
-
- );
- })}
-
-
-
-
- Feels
-
-
- ♪ Download Today ♪
-
-
- );
- })}
-
-
- );
-};
-
-// Main composition - 25 seconds total
-export const ConceptLMusical: React.FC = () => {
- const { fps } = useVideoConfig();
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
diff --git a/feels-promo/src/FeelsPromo.tsx b/feels-promo/src/FeelsPromo.tsx
deleted file mode 100644
index cb35c3b..0000000
--- a/feels-promo/src/FeelsPromo.tsx
+++ /dev/null
@@ -1,933 +0,0 @@
-import {
- AbsoluteFill,
- Img,
- staticFile,
- useCurrentFrame,
- useVideoConfig,
- interpolate,
- spring,
-} from "remotion";
-import {
- TransitionSeries,
- linearTiming,
-} from "@remotion/transitions";
-import { fade } from "@remotion/transitions/fade";
-
-// Tiled App Icon Background Component
-const TiledIconBackground: React.FC<{ color?: string }> = ({
- color = "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
-}) => {
- const frame = useCurrentFrame();
- const { width, height } = useVideoConfig();
-
- const iconSize = 80;
- const gap = 40;
- const cellSize = iconSize + gap;
-
- const cols = Math.ceil(width / cellSize) + 4;
- const rows = Math.ceil(height / cellSize) + 4;
-
- const offsetX = (frame * 0.3) % cellSize;
- const offsetY = (frame * 0.2) % cellSize;
-
- return (
-
-
- {[...Array(rows)].map((_, row) =>
- [...Array(cols)].map((_, col) => {
- const staggerX = row % 2 === 0 ? 0 : cellSize / 2;
- return (
-
- );
- })
- )}
-
- );
-};
-
-// Reusable Phone Component
-const PhoneFrame: React.FC<{
- mediaSrc: string;
- width?: number;
- rotation?: number;
- style?: React.CSSProperties;
-}> = ({ mediaSrc, width = 460, rotation = 0, style }) => {
- const aspectRatio = 2760 / 1350;
- const height = width * aspectRatio;
-
- return (
-
-
-
-
-
-
- );
-};
-
-// Scene 1: Hero - Your mood. Your journey. Your way.
-const HeroScene: React.FC = () => {
- const frame = useCurrentFrame();
- const { fps } = useVideoConfig();
-
- const titleProgress = spring({ frame, fps, config: { damping: 200 } });
- const titleY = interpolate(titleProgress, [0, 1], [80, 0]);
- const titleOpacity = interpolate(titleProgress, [0, 1], [0, 1]);
-
- const phoneProgress = spring({
- frame: frame - 8,
- fps,
- config: { damping: 12, stiffness: 80 },
- });
- const phoneScale = interpolate(phoneProgress, [0, 1], [0.8, 1]);
- const phoneX = interpolate(phoneProgress, [0, 1], [100, 0]);
-
- return (
-
-
-
- Your mood.
-
-
- );
-};
-
-// Scene 2: Tap. Logged. Done.
-const WidgetWatchScene: React.FC = () => {
- const frame = useCurrentFrame();
- const { fps } = useVideoConfig();
-
- const titleProgress = spring({ frame, fps, config: { damping: 200 } });
- const titleY = interpolate(titleProgress, [0, 1], [60, 0]);
- const titleOpacity = interpolate(titleProgress, [0, 1], [0, 1]);
-
- const widgetProgress = spring({
- frame: frame - 5,
- fps,
- config: { damping: 12, stiffness: 80 },
- });
- const widgetScale = interpolate(widgetProgress, [0, 1], [0.7, 1]);
-
- const watchProgress = spring({
- frame: frame - 12,
- fps,
- config: { damping: 12, stiffness: 80 },
- });
- const watchScale = interpolate(watchProgress, [0, 1], [0.7, 1]);
-
- return (
-
-
-
- Tap.
-
-
- Never miss a day
-
-
-
-
- One-tap widgets
-
-
-
-
-
-
-
-
-
- Wrist ready
-
-
- );
-};
-
-// Scene 3: Reflect & Record
-const JournalScene: React.FC = () => {
- const frame = useCurrentFrame();
- const { fps } = useVideoConfig();
-
- const titleProgress = spring({ frame, fps, config: { damping: 200 } });
- const titleY = interpolate(titleProgress, [0, 1], [60, 0]);
- const titleOpacity = interpolate(titleProgress, [0, 1], [0, 1]);
-
- const phoneProgress = spring({
- frame: frame - 8,
- fps,
- config: { damping: 12, stiffness: 80 },
- });
- const phoneScale = interpolate(phoneProgress, [0, 1], [0.8, 1]);
-
- return (
-
-
-
- Reflect & Record
-
-
- Add notes & photos to remember why
-
-
- );
-};
-
-// Scene 4: Beautiful Insights
-const InsightsScene: React.FC = () => {
- const frame = useCurrentFrame();
- const { fps } = useVideoConfig();
-
- const titleProgress = spring({ frame, fps, config: { damping: 200 } });
- const titleY = interpolate(titleProgress, [0, 1], [60, 0]);
- const titleOpacity = interpolate(titleProgress, [0, 1], [0, 1]);
-
- const phoneProgress = spring({
- frame: frame - 8,
- fps,
- config: { damping: 12, stiffness: 80 },
- });
- const phoneScale = interpolate(phoneProgress, [0, 1], [0.8, 1]);
-
- const badgeProgress = spring({
- frame: frame - 20,
- fps,
- config: { damping: 15, stiffness: 100 },
- });
- const badgeScale = interpolate(badgeProgress, [0, 1], [0, 1]);
-
- return (
-
-
-
- Beautiful
-
-
- ✨
-
- Powered by Apple AI
-
-
-
- );
-};
-
-// Scene 5: Private & Secure
-const PrivacyScene: React.FC = () => {
- const frame = useCurrentFrame();
- const { fps } = useVideoConfig();
-
- const titleProgress = spring({ frame, fps, config: { damping: 200 } });
- const titleY = interpolate(titleProgress, [0, 1], [60, 0]);
- const titleOpacity = interpolate(titleProgress, [0, 1], [0, 1]);
-
- const phoneProgress = spring({
- frame: frame - 8,
- fps,
- config: { damping: 12, stiffness: 80 },
- });
- const phoneScale = interpolate(phoneProgress, [0, 1], [0.8, 1]);
-
- const shieldProgress = spring({
- frame: frame - 15,
- fps,
- config: { damping: 10, stiffness: 100 },
- });
- const shieldScale = interpolate(shieldProgress, [0, 1], [0, 1]);
-
- return (
-
-
-
- Private
-
-
- Syncs with Apple Health • Locked to you
-
-
- 🛡️
-
-
- {/* Phone - right side, much larger */}
-
-
- );
-};
-
-// Scene 6: Complete Customization
-const ThemesScene: React.FC = () => {
- const frame = useCurrentFrame();
- const { fps } = useVideoConfig();
-
- const titleProgress = spring({ frame, fps, config: { damping: 200 } });
- const titleY = interpolate(titleProgress, [0, 1], [60, 0]);
- const titleOpacity = interpolate(titleProgress, [0, 1], [0, 1]);
-
- const phoneProgress = spring({
- frame: frame - 8,
- fps,
- config: { damping: 12, stiffness: 80 },
- });
- const phoneScale = interpolate(phoneProgress, [0, 1], [0.8, 1]);
-
- return (
-
-
-
- Complete
-
-
- Your Style
-
-
- 12 Thoughtful Themes
-
-
- );
-};
-
-// Scene 7: Guidance that gets you
-const NotificationsScene: React.FC = () => {
- const frame = useCurrentFrame();
- const { fps } = useVideoConfig();
-
- const titleProgress = spring({ frame, fps, config: { damping: 200 } });
- const titleY = interpolate(titleProgress, [0, 1], [60, 0]);
- const titleOpacity = interpolate(titleProgress, [0, 1], [0, 1]);
-
- const phoneProgress = spring({
- frame: frame - 8,
- fps,
- config: { damping: 12, stiffness: 80 },
- });
- const phoneScale = interpolate(phoneProgress, [0, 1], [0.8, 1]);
-
- return (
-
-
-
- Guidance that
-
-
- );
-};
-
-// Outro Scene
-const OutroScene: React.FC = () => {
- const frame = useCurrentFrame();
- const { fps } = useVideoConfig();
-
- const logoScale = spring({
- frame,
- fps,
- config: { damping: 10, stiffness: 80 },
- });
-
- const textOpacity = spring({
- frame: frame - 15,
- fps,
- config: { damping: 200 },
- });
-
- const glowIntensity = interpolate(
- Math.sin(frame * 0.1),
- [-1, 1],
- [0.3, 0.6]
- );
-
- return (
-
-
-
-
-
-
- Feels
-
-
- Track your mood. Understand yourself.
-
-
- );
-};
-
-export const FeelsPromoV1: React.FC = () => {
- const { fps } = useVideoConfig();
-
- const sceneDuration = 3.5 * fps;
- const transitionDuration = Math.round(0.6 * fps);
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
diff --git a/feels-promo/src/HelloWorld.tsx b/feels-promo/src/HelloWorld.tsx
deleted file mode 100644
index eb108db..0000000
--- a/feels-promo/src/HelloWorld.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { spring } from "remotion";
-import {
- AbsoluteFill,
- interpolate,
- Sequence,
- useCurrentFrame,
- useVideoConfig,
-} from "remotion";
-import { Logo } from "./HelloWorld/Logo";
-import { Subtitle } from "./HelloWorld/Subtitle";
-import { Title } from "./HelloWorld/Title";
-import { z } from "zod";
-import { zColor } from "@remotion/zod-types";
-
-export const myCompSchema = z.object({
- titleText: z.string(),
- titleColor: zColor(),
- logoColor1: zColor(),
- logoColor2: zColor(),
-});
-
-export const HelloWorld: React.FC
> = ({
- titleText: propOne,
- titleColor: propTwo,
- logoColor1,
- logoColor2,
-}) => {
- const frame = useCurrentFrame();
- const { durationInFrames, fps } = useVideoConfig();
-
- // Animate from 0 to 1 after 25 frames
- const logoTranslationProgress = spring({
- frame: frame - 25,
- fps,
- config: {
- damping: 100,
- },
- });
-
- // Move the logo up by 150 pixels once the transition starts
- const logoTranslation = interpolate(
- logoTranslationProgress,
- [0, 1],
- [0, -150],
- );
-
- // Fade out the animation at the end
- const opacity = interpolate(
- frame,
- [durationInFrames - 25, durationInFrames - 15],
- [1, 0],
- {
- extrapolateLeft: "clamp",
- extrapolateRight: "clamp",
- },
- );
-
- // A is just a absolutely positioned !
- return (
-
-
-
-
- {/* Sequences can shift the time for its children! */}
-
-
- {/* The subtitle will only enter on the 75th frame. */}
-
-
-
-
- );
-};
diff --git a/feels-promo/src/HelloWorld/Arc.tsx b/feels-promo/src/HelloWorld/Arc.tsx
deleted file mode 100644
index e580b47..0000000
--- a/feels-promo/src/HelloWorld/Arc.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useState } from "react";
-import { random, useVideoConfig } from "remotion";
-
-const getCircumferenceOfArc = (rx: number, ry: number) => {
- return Math.PI * 2 * Math.sqrt((rx * rx + ry * ry) / 2);
-};
-
-const rx = 135;
-const ry = 300;
-const cx = 960;
-const cy = 540;
-const arcLength = getCircumferenceOfArc(rx, ry);
-const strokeWidth = 30;
-
-export const Arc: React.FC<{
- progress: number;
- rotation: number;
- rotateProgress: number;
- color1: string;
- color2: string;
-}> = ({ progress, rotation, rotateProgress, color1, color2 }) => {
- const { width, height } = useVideoConfig();
-
- // Each svg Id must be unique to not conflict with each other
- const [gradientId] = useState(() => String(random(null)));
-
- return (
-
-
-
-
-
-
- );
-};
diff --git a/feels-promo/src/HelloWorld/Atom.tsx b/feels-promo/src/HelloWorld/Atom.tsx
deleted file mode 100644
index 5fdb507..0000000
--- a/feels-promo/src/HelloWorld/Atom.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useState } from "react";
-import { random, useVideoConfig } from "remotion";
-
-export const Atom: React.FC<{
- scale: number;
- color1: string;
- color2: string;
-}> = ({ scale, color1, color2 }) => {
- const config = useVideoConfig();
-
- // Each SVG ID must be unique to not conflict with each other
- const [gradientId] = useState(() => String(random(null)));
-
- return (
-
-
-
-
-
-
- );
-};
diff --git a/feels-promo/src/HelloWorld/Logo.tsx b/feels-promo/src/HelloWorld/Logo.tsx
deleted file mode 100644
index 00d369b..0000000
--- a/feels-promo/src/HelloWorld/Logo.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import {
- AbsoluteFill,
- interpolate,
- spring,
- useCurrentFrame,
- useVideoConfig,
-} from "remotion";
-import { Arc } from "./Arc";
-import { Atom } from "./Atom";
-import { z } from "zod";
-import { zColor } from "@remotion/zod-types";
-
-export const myCompSchema2 = z.object({
- logoColor1: zColor(),
- logoColor2: zColor(),
-});
-
-export const Logo: React.FC
> = ({
- logoColor1: color1,
- logoColor2: color2,
-}) => {
- const videoConfig = useVideoConfig();
- const frame = useCurrentFrame();
-
- const development = spring({
- config: {
- damping: 100,
- mass: 0.5,
- },
- fps: videoConfig.fps,
- frame,
- });
-
- const rotationDevelopment = spring({
- config: {
- damping: 100,
- mass: 0.5,
- },
- fps: videoConfig.fps,
- frame,
- });
-
- const scale = spring({
- frame,
- config: {
- mass: 0.5,
- },
- fps: videoConfig.fps,
- });
-
- const logoRotation = interpolate(
- frame,
- [0, videoConfig.durationInFrames],
- [0, 360],
- );
-
- return (
-
-
- );
-};
diff --git a/feels-promo/src/HelloWorld/Subtitle.tsx b/feels-promo/src/HelloWorld/Subtitle.tsx
deleted file mode 100644
index 9ccbe5d..0000000
--- a/feels-promo/src/HelloWorld/Subtitle.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import { interpolate, useCurrentFrame } from "remotion";
-import { COLOR_1, FONT_FAMILY } from "./constants";
-
-const subtitle: React.CSSProperties = {
- fontFamily: FONT_FAMILY,
- fontSize: 40,
- textAlign: "center",
- position: "absolute",
- bottom: 140,
- width: "100%",
-};
-
-const codeStyle: React.CSSProperties = {
- color: COLOR_1,
-};
-
-export const Subtitle: React.FC = () => {
- const frame = useCurrentFrame();
- const opacity = interpolate(frame, [0, 30], [0, 1]);
- return (
-
- Edit src/Root.tsx and save to reload.
-
- );
-};
diff --git a/feels-promo/src/HelloWorld/Title.tsx b/feels-promo/src/HelloWorld/Title.tsx
deleted file mode 100644
index d691214..0000000
--- a/feels-promo/src/HelloWorld/Title.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from "react";
-import { spring, useCurrentFrame, useVideoConfig } from "remotion";
-import { FONT_FAMILY } from "./constants";
-
-const title: React.CSSProperties = {
- fontFamily: FONT_FAMILY,
- fontWeight: "bold",
- fontSize: 100,
- textAlign: "center",
- position: "absolute",
- bottom: 160,
- width: "100%",
-};
-
-const word: React.CSSProperties = {
- marginLeft: 10,
- marginRight: 10,
- display: "inline-block",
-};
-
-export const Title: React.FC<{
- readonly titleText: string;
- readonly titleColor: string;
-}> = ({ titleText, titleColor }) => {
- const videoConfig = useVideoConfig();
- const frame = useCurrentFrame();
-
- const words = titleText.split(" ");
-
- return (
-
- {words.map((t, i) => {
- const delay = i * 5;
-
- const scale = spring({
- fps: videoConfig.fps,
- frame: frame - delay,
- config: {
- damping: 200,
- },
- });
-
- return (
-
- {t}
-
- );
- })}
-
- );
-};
diff --git a/feels-promo/src/HelloWorld/constants.ts b/feels-promo/src/HelloWorld/constants.ts
deleted file mode 100644
index e20c050..0000000
--- a/feels-promo/src/HelloWorld/constants.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// Change any of these to update your video live.
-
-export const COLOR_1 = "#86A8E7";
-
-export const FONT_FAMILY = "SF Pro Text, Helvetica, Arial, sans-serif";
diff --git a/feels-promo/src/LiveActivityAnimation.tsx b/feels-promo/src/LiveActivityAnimation.tsx
deleted file mode 100644
index 9584160..0000000
--- a/feels-promo/src/LiveActivityAnimation.tsx
+++ /dev/null
@@ -1,280 +0,0 @@
-import React from "react";
-import {
- AbsoluteFill,
- interpolate,
- useCurrentFrame,
- useVideoConfig,
- spring,
- Easing,
-} from "remotion";
-
-// Mood colors matching the app
-const MOOD_COLORS = {
- horrible: "#F44336",
- bad: "#FF9800",
- average: "#FFC107",
- good: "#8BC34A",
- great: "#4CAF50",
-};
-
-// Get mood based on progress
-const getMoodForProgress = (progress: number): { name: string; color: string } => {
- if (progress < 0.2) return { name: "Horrible", color: MOOD_COLORS.horrible };
- if (progress < 0.4) return { name: "Bad", color: MOOD_COLORS.bad };
- if (progress < 0.6) return { name: "Average", color: MOOD_COLORS.average };
- if (progress < 0.8) return { name: "Good", color: MOOD_COLORS.good };
- return { name: "Great", color: MOOD_COLORS.great };
-};
-
-// Flame SVG icon
-const FlameIcon: React.FC<{ size: number; color: string }> = ({ size, color }) => (
-
-
-);
-
-export const LiveActivityAnimation: React.FC = () => {
- const frame = useCurrentFrame();
- const { fps, durationInFrames, width, height } = useVideoConfig();
-
- const targetStreak = 365;
-
- // Animation timing
- const animationStartFrame = fps * 1; // Start after 1 second
- const animationEndFrame = durationInFrames - fps * 1; // End 1 second before end
- const animationDuration = animationEndFrame - animationStartFrame;
-
- // Calculate current streak with easing
- const rawProgress = interpolate(
- frame,
- [animationStartFrame, animationEndFrame],
- [0, 1],
- {
- extrapolateLeft: "clamp",
- extrapolateRight: "clamp",
- easing: Easing.out(Easing.cubic),
- }
- );
-
- const currentStreak = Math.round(rawProgress * targetStreak);
- const progressPercent = currentStreak / targetStreak;
- const mood = getMoodForProgress(progressPercent);
-
- // Spring animation for the flame icon
- const flameScale = spring({
- frame: frame % 15, // Pulse every 15 frames
- fps,
- config: {
- damping: 10,
- stiffness: 200,
- mass: 0.5,
- },
- });
-
- const flameScaleValue = interpolate(flameScale, [0, 1], [1, 1.1]);
-
- // Fade in animation
- const fadeIn = interpolate(frame, [0, fps * 0.5], [0, 1], {
- extrapolateRight: "clamp",
- });
-
- return (
-
- {/* Live Activity Card */}
-
-
- {/* Streak Indicator */}
-
-
-
-
- {currentStreak}
-
-
- day streak
-
-
-
- {/* Divider */}
-
-
- {/* Status Section */}
-
- {currentStreak > 0 ? (
- <>
-
- {/* Mood Color Circle */}
-
-
-
- Today's mood
-
-
- {mood.name}
-
-
-
-
- ) : (
-
-
- Start your streak!
-
-
- Tap to log your mood
-
-
- )}
-
-
-
- {/* Progress Bar Section */}
-
- {/* Progress Bar */}
-
-
- {/* Progress Label */}
-
- 0
-
- {currentStreak} / {targetStreak} days
-
- {targetStreak}
-
-
-
- );
-};
diff --git a/feels-promo/src/LiveActivityCard.tsx b/feels-promo/src/LiveActivityCard.tsx
deleted file mode 100644
index f11d9f9..0000000
--- a/feels-promo/src/LiveActivityCard.tsx
+++ /dev/null
@@ -1,261 +0,0 @@
-import { interpolate, useCurrentFrame, useVideoConfig, spring, Easing } from "remotion";
-
-// Mood colors matching the app
-const MOOD_COLORS = {
- horrible: "#F44336",
- bad: "#FF9800",
- average: "#FFC107",
- good: "#8BC34A",
- great: "#4CAF50",
-};
-
-// Get mood based on progress
-const getMoodForProgress = (progress: number): { name: string; color: string } => {
- if (progress < 0.2) return { name: "Horrible", color: MOOD_COLORS.horrible };
- if (progress < 0.4) return { name: "Bad", color: MOOD_COLORS.bad };
- if (progress < 0.6) return { name: "Average", color: MOOD_COLORS.average };
- if (progress < 0.8) return { name: "Good", color: MOOD_COLORS.good };
- return { name: "Great", color: MOOD_COLORS.great };
-};
-
-// Flame SVG icon
-const FlameIcon: React.FC<{ size: number; color: string }> = ({ size, color }) => (
-
-
-);
-
-interface LiveActivityCardProps {
- width: number;
- targetStreak?: number;
- animationSpeed?: number; // multiplier for animation speed
- showProgressBar?: boolean;
-}
-
-export const LiveActivityCard: React.FC = ({
- width,
- targetStreak = 365,
- animationSpeed = 1,
- showProgressBar = false,
-}) => {
- const frame = useCurrentFrame();
- const { fps, durationInFrames } = useVideoConfig();
-
- // Animation timing - use full scene duration
- const animationStartFrame = Math.round(fps * 0.3); // Start after 0.3 seconds
- const animationEndFrame = durationInFrames - Math.round(fps * 0.2);
-
- // Calculate current streak with easing
- const rawProgress = interpolate(
- frame * animationSpeed,
- [animationStartFrame, animationEndFrame],
- [0, 1],
- {
- extrapolateLeft: "clamp",
- extrapolateRight: "clamp",
- easing: Easing.out(Easing.cubic),
- }
- );
-
- const currentStreak = Math.round(rawProgress * targetStreak);
- const progressPercent = currentStreak / targetStreak;
- const mood = getMoodForProgress(progressPercent);
-
- // Spring animation for the flame icon
- const flameScale = spring({
- frame: frame % 15,
- fps,
- config: {
- damping: 10,
- stiffness: 200,
- mass: 0.5,
- },
- });
-
- const flameScaleValue = interpolate(flameScale, [0, 1], [1, 1.1]);
-
- return (
-
-
- {/* Streak Indicator */}
-
-
-
-
- {currentStreak}
-
-
- day streak
-
-
-
- {/* Divider */}
-
-
- {/* Status Section */}
-
- {currentStreak > 0 ? (
-
- {/* Mood Color Circle */}
-
-
-
- Today's mood
-
-
- {mood.name}
-
-
-
- ) : (
-
-
- Start your streak!
-
-
- Tap to log your mood
-
-
- )}
-
-
-
- {/* Progress Bar Section */}
- {showProgressBar && (
-
-
-
- 0
-
- {currentStreak} / {targetStreak} days
-
- {targetStreak}
-
-
- )}
-
HelloWorld out/video.mp4
-
-import { registerRoot } from "remotion";
-import { RemotionRoot } from "./Root";
-
-registerRoot(RemotionRoot);
diff --git a/feels-promo/tsconfig.json b/feels-promo/tsconfig.json
deleted file mode 100644
index 4bdf271..0000000
--- a/feels-promo/tsconfig.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
- "compilerOptions": {
- "target": "ES2018",
- "module": "commonjs",
- "jsx": "react-jsx",
- "strict": true,
- "noEmit": true,
- "lib": ["es2015"],
- "esModuleInterop": true,
- "skipLibCheck": true,
- "forceConsistentCasingInFileNames": true,
- "noUnusedLocals": true
- },
- "exclude": ["remotion.config.ts"]
-}
diff --git a/screens/a.png b/screens/a.png
deleted file mode 100644
index ca145db..0000000
Binary files a/screens/a.png and /dev/null differ
diff --git a/screens/ai_dark.png b/screens/ai_dark.png
deleted file mode 100644
index 5aaddf3..0000000
Binary files a/screens/ai_dark.png and /dev/null differ
diff --git a/screens/aj_light.png b/screens/aj_light.png
deleted file mode 100644
index 5b2b211..0000000
Binary files a/screens/aj_light.png and /dev/null differ
diff --git a/screens/b.mov b/screens/b.mov
deleted file mode 100644
index 5cf8d95..0000000
Binary files a/screens/b.mov and /dev/null differ
diff --git a/screens/c.mov b/screens/c.mov
deleted file mode 100644
index c767492..0000000
Binary files a/screens/c.mov and /dev/null differ
diff --git a/screens/flow.png b/screens/flow.png
deleted file mode 100644
index 907ba96..0000000
Binary files a/screens/flow.png and /dev/null differ
diff --git a/screens/insights_dark.png b/screens/insights_dark.png
deleted file mode 100644
index 0bd7ede..0000000
Binary files a/screens/insights_dark.png and /dev/null differ
diff --git a/screens/insights_light.png b/screens/insights_light.png
deleted file mode 100644
index 195618b..0000000
Binary files a/screens/insights_light.png and /dev/null differ
diff --git a/screens/phone.png b/screens/phone.png
deleted file mode 100644
index bef9811..0000000
Binary files a/screens/phone.png and /dev/null differ
diff --git a/screens/timeline_dark_large_voting.png b/screens/timeline_dark_large_voting.png
deleted file mode 100644
index 5bd7323..0000000
Binary files a/screens/timeline_dark_large_voting.png and /dev/null differ
diff --git a/screens/timeline_dark_medium_voting.png b/screens/timeline_dark_medium_voting.png
deleted file mode 100644
index f6d62cd..0000000
Binary files a/screens/timeline_dark_medium_voting.png and /dev/null differ
diff --git a/screens/timeline_light_large_voting.png b/screens/timeline_light_large_voting.png
deleted file mode 100644
index 07f0d50..0000000
Binary files a/screens/timeline_light_large_voting.png and /dev/null differ
diff --git a/screens/timeline_light_medium_voting.png b/screens/timeline_light_medium_voting.png
deleted file mode 100644
index 114867d..0000000
Binary files a/screens/timeline_light_medium_voting.png and /dev/null differ
diff --git a/screens/voting_dark_large.png b/screens/voting_dark_large.png
deleted file mode 100644
index 3693d16..0000000
Binary files a/screens/voting_dark_large.png and /dev/null differ
diff --git a/screens/voting_header.png b/screens/voting_header.png
deleted file mode 100644
index 1dcfb31..0000000
Binary files a/screens/voting_header.png and /dev/null differ
diff --git a/screens/voting_light_large.png b/screens/voting_light_large.png
deleted file mode 100644
index 318d861..0000000
Binary files a/screens/voting_light_large.png and /dev/null differ
diff --git a/screens/voting_light_medium.png b/screens/voting_light_medium.png
deleted file mode 100644
index eb00496..0000000
Binary files a/screens/voting_light_medium.png and /dev/null differ
diff --git a/screens/voting_light_small.png b/screens/voting_light_small.png
deleted file mode 100644
index 153ed63..0000000
Binary files a/screens/voting_light_small.png and /dev/null differ
diff --git a/screens/watch.png b/screens/watch.png
deleted file mode 100644
index 30117e7..0000000
Binary files a/screens/watch.png and /dev/null differ
diff --git a/screens/watch_voting_light.png b/screens/watch_voting_light.png
deleted file mode 100644
index 2d1a0ec..0000000
Binary files a/screens/watch_voting_light.png and /dev/null differ
- ![]({staticFile("app-icon.png")}){kind=icon}
- );
- })
- )}
- ![]({staticFile("phone.png")})
- ![]({staticFile("screen2-widget.png")})
- ![]({staticFile("screen2-watch.png")})
- ![]({staticFile("watch-frame.png")})
- ![]({staticFile("watch_voting_light.png")})
- ![]({staticFile("watch.png")})
- ![]({staticFile("timeline_light_large_voting.png")})
- ![]({staticFile("timeline_light_medium_voting.png")})
- ![]({staticFile("year/frame_0329.png")})
- ![]({staticFile("insights_light.png")})
- ![]({staticFile("activity/base.png")})
- {/* Previous frame (prevents flash) */}
- {imageIndex > 1 && (
- })
- })
-
- {/* Phone frame overlay */}
- })
-
- {/* Phone frame overlay */}
-