{glow && (

)}

); }; export const BenchmarkVideo: React.FC = () => { const frame = useCurrentFrame(); // Background ambient subtle radial shifts const ambientGlowY = interpolate(frame, [0, 359], [30, 60], { extrapolateLeft: "clamp", extrapolateRight: "clamp", }); // ================= SCENE 1: INTRO (0 - 90) ================= const introLogoSpring = spring({ frame, fps: 30, config: { damping: 14, stiffness: 120 }, }); const introTitleSpring = spring({ frame: frame - 6, fps: 30, config: { damping: 14, stiffness: 110 }, }); const introSubtitleSpring = spring({ frame: frame - 18, fps: 30, config: { damping: 15, stiffness: 100 }, }); const introExit = interpolate(frame, [72, 88], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", }); const introOpacity = Math.max(0, 1 - introExit); const introScale = 1 - introExit * 0.08; // ================= SCENE 2: INTERFACE (82 - 275) ================= const uiEnterProgress = spring({ frame: frame - 80, fps: 30, config: { damping: 16, stiffness: 110 }, }); const uiFadeIn = interpolate(frame, [80, 92], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", }); const uiFadeOut = interpolate(frame, [260, 274], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", }); const uiOpacity = uiFadeIn * uiFadeOut; const uiScale = interpolate(uiEnterProgress, [0, 1], [0.94, 1]); // Current Active Pillar // Pillar 1: frames 90 - 150 ("Plan together") // Pillar 2: frames 150 - 210 ("Protect focus time") // Pillar 3: frames 210 - 270 ("See progress") const isPhase1 = frame >= 80 && frame < 150; const isPhase2 = frame >= 150 && frame < 210; const isPhase3 = frame >= 210 && frame < 280; // Phase 1 Card drag transition const cardMoveSpring = spring({ frame: frame - 104, fps: 30, config: { damping: 14, stiffness: 120 }, }); const movingCardX = interpolate(cardMoveSpring, [0, 1], [0, 360]); // Phase 2 Focus Shield expansion const shieldSpring = spring({ frame: frame - 156, fps: 30, config: { damping: 14, stiffness: 110 }, }); const shieldWidth = interpolate(shieldSpring, [0, 1], [30, 100]); const shieldOpacity = interpolate(shieldSpring, [0, 1], [0, 1]); // Phase 3 Metrics fill & bars const metricsSpring = spring({ frame: frame - 215, fps: 30, config: { damping: 15, stiffness: 100 }, }); const focusPercent = Math.round( interpolate(metricsSpring, [0, 1], [24, 94]) ); const bar1 = interpolate(metricsSpring, [0, 1], [0, 58]); const bar2 = interpolate(metricsSpring, [0, 1], [0, 74]); const bar3 = interpolate(metricsSpring, [0, 1], [0, 88]); const bar4 = interpolate(metricsSpring, [0, 1], [0, 96]); // ================= SCENE 3: OUTRO (268 - 360) ================= const outroSpring = spring({ frame: frame - 270, fps: 30, config: { damping: 16, stiffness: 110 }, }); const outroOpacity = interpolate(frame, [270, 284], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", }); const outroScale = interpolate(outroSpring, [0, 1], [0.95, 1]); return (

{/* Ambient background light */}

{/* Background architectural grid pattern */}

{/* ==================== SCENE 1: INTRO ==================== */} {frame < 92 && (

{/* Category pill */}

Next-Gen Team Planning

{/* Brand Logo & Name */}

Relay

{/* Subtitle / Core Hook */}

Make room for focused work

)} {/* ==================== SCENE 2: PRODUCT INTERFACE ==================== */} {frame >= 80 && frame <= 275 && (

{/* Top Interface Bar */}

{/* App Branding */}

Relay / Core Engineering Sprint 42

{/* Feature Tabs (The 3 Requirements) */}

{/* Step 1 */}

Plan together

{/* Step 2 */}

Protect focus time

{/* Step 3 */}

See progress

{/* Team Presence Avatars */}

{["Elena", "Marcus", "Tara"].map((name, i) => (

0 ? -8 : 0, }} > {name[0]}

))} 6 active

{/* Main Working Canvas */}

{/* ================= VIEW 1: PLAN TOGETHER (90 - 150) ================= */} {isPhase1 && (

Collaborative Workspace

Plan together across teams in real-time

Live Sync · 12ms latency

{/* Kanban 3-Column Plan Board */}

{/* Column 1: Backlog */}

PROPOSED FOCUS · 2

Sync Engine Latency Audit

Performance 4h estimate

{/* Column 2: In Sprint (Target for dynamic card) */}

THIS SPRINT · COMMITTED

{/* Moving Card animated across columns */}

High Impact Assigned to Marcus

Unified Workspace Collaboration

Aligned with Product Roadmap

{/* Column 3: Ready to Focus */}

PROTECTED QUEUE · 1

Database Sharding Architecture

Scheduled for Thursday block

)} {/* ================= VIEW 2: PROTECT FOCUS TIME (150 - 210) ================= */} {isPhase2 && (

Calendar Defense

Protect focus time automatically across schedules

Shield Active · 0 Meeting Collisions

{/* Week Schedule Visual Grid */}

{/* Days of week header */}

TIME

MON

TUE (SHIELDED)

WED (SHIELDED)

THU (SHIELDED)

FRI

{/* 09:00 AM Row (Standup condensed) */}

09:00 AM

Team Kickoff

15m Sync

Demo Prep

{/* 10:00 AM - 02:00 PM Massive Protected Focus Block */}

10:00 AM ↓ 02:00 PM

{/* Monday Open slot */}

Open Schedule

{/* Tue-Thu Protected Focus Zone */}

PROTECTED FOCUS BLOCK 4.0 Hours Uninterrupted

Deep Engineering & Architecture Focus

Auto-declines ad-hoc meetings · Slack DND synchronized for 8 team members

{/* Friday Open slot */}

Design Review

)} {/* ================= VIEW 3: SEE PROGRESS (210 - 270) ================= */} {isPhase3 && (

Performance Analytics

See progress in real time as goals finish faster

Sprint on Track · +28% Focus Efficiency

{/* 3 Metric Insight Panels */}

{/* Metric 1: Focus Goal Completion */}

WEEKLY FOCUS TARGET

{focusPercent}%

37.6 hrs of deep focused work logged

{/* Glowing Progress Track */}

{/* Metric 2: Velocity Bar Chart */}

TEAM VELOCITY BOOST

+24%

Faster sprint execution vs baseline

{/* 4 Animated Bars */}

{[bar1, bar2, bar3, bar4].map((heightVal, idx) => (

))}

{/* Metric 3: Live Deliverables list */}

COMPLETED OBJECTIVES

{[ "Core Sync Protocol", "Focus Guard System", "Sprint 42 Deliverables", ].map((item, idx) => (

✓ {item}

))}

)}

)} {/* ==================== SCENE 3: OUTRO (270 - 360) ==================== */} {/* Text reaches final state by frame 292, completely stable through 359 (>= 2 full seconds) */} {frame >= 268 && (

{/* Top Logo Badge */}

Relay

{/* Mandatory Outro Headline */}

Start your next week with Relay

{/* 3 Pillar Summary badges */}

{[ { label: "Plan together", color: palette.secondary }, { label: "Protect focus time", color: palette.accent }, { label: "See progress", color: palette.foreground }, ].map((pillar) => (

{pillar.label}

))}

{/* Call to action button pill */}

Get started — relay.app

)}

); };