// scenes.jsx — TBGF Business Exit Trajectory Framework hero video scenes // 45 seconds total, 1920x1080. Paper-document feel: slow fades, gentle slides. const COLOURS = { bone: '#FAF8F2', azure: '#1CB4CC', navy: '#0A2E36', blue: '#006FBA', mint: '#ADEBB3', slate: '#6E7E85', slate900:'#0A2E36', rule: 'rgba(10, 46, 54, 0.14)', }; const FONT = { display: '"Poppins", system-ui, sans-serif', body: '"Poppins", system-ui, sans-serif', editorial: '"Roboto Slab", Georgia, serif', mono: 'ui-monospace, "JetBrains Mono", monospace', }; // ──────────────────────────────────────────────────────────────────────────── // Shared helpers function fadeIn(localTime, start, dur = 0.6, ease = Easing.easeOutCubic) { const t = clamp((localTime - start) / dur, 0, 1); return ease(t); } function fadeOut(localTime, start, dur = 0.6, ease = Easing.easeInCubic) { const t = clamp((localTime - start) / dur, 0, 1); return 1 - ease(t); } function band(localTime, inStart, inDur, outStart, outDur) { // returns 0..1 opacity envelope if (localTime < inStart) return 0; if (localTime < inStart + inDur) return fadeIn(localTime, inStart, inDur); if (localTime < outStart) return 1; if (localTime < outStart + outDur) return fadeOut(localTime, outStart, outDur); return 0; } // Lightweight typography token function H1({ children, style }) { return (
{children}
); } function H2({ children, style }) { return (
{children}
); } function Body({ children, style }) { return (
{children}
); } function Eyebrow({ children, style }) { return (
{children}
); } // ──────────────────────────────────────────────────────────────────────────── // SCENE 1 — THE HOOK (0–5s) // Bone canvas. "You'll sell your business one day." then "The question is, ready or not?" function SceneHook() { return ( {({ localTime }) => { // Line 1: in 0.6→1.6, hold, fade with whole scene 4.5→5 const o1 = band(localTime, 0.6, 1.0, 4.5, 0.5); const ty1 = (1 - clamp((localTime - 0.6) / 1.0, 0, 1)) * 12; // Line 2: in 2.0→3.0, hold, fade 4.5→5 const o2 = band(localTime, 2.0, 1.0, 4.5, 0.5); const ty2 = (1 - clamp((localTime - 2.0) / 1.0, 0, 1)) * 12; // Tiny ornamental rule slides in between lines const ruleW = clamp((localTime - 1.6) / 0.6, 0, 1) * 64; const ruleO = band(localTime, 1.6, 0.6, 4.5, 0.5); return (

You’ll sell your business one day.

The question is, ready or not?

); }} ); } // ──────────────────────────────────────────────────────────────────────────── // SCENE 2 — THE GAP (5–15s) // Horizontal timeline with two markers and the gap between them. function SceneGap() { return ( {({ localTime }) => { const lt = localTime; // 0..10 // Line draws 0.4→1.6 (left to right) const lineP = clamp((lt - 0.4) / 1.2, 0, 1); const lineEase = Easing.easeInOutCubic(lineP); // Marker A appears 1.6→2.2 const aO = band(lt, 1.6, 0.6, 9.2, 0.6); const aS = 0.85 + 0.15 * Easing.easeOutCubic(clamp((lt - 1.6) / 0.6, 0, 1)); // Marker B appears 2.8→3.4 const bO = band(lt, 2.8, 0.6, 9.2, 0.6); const bS = 0.85 + 0.15 * Easing.easeOutCubic(clamp((lt - 2.8) / 0.6, 0, 1)); // Gap band highlights 4.0→4.8 const gapO = band(lt, 4.0, 0.8, 9.2, 0.6) * 0.85; // Caption 5.0→6.0, hold, fade 9.2→9.8 const capO = band(lt, 5.0, 1.0, 9.2, 0.6); const capTY = (1 - clamp((lt - 5.0) / 1.0, 0, 1)) * 10; // Eyebrow const ebO = band(lt, 0.2, 0.6, 9.2, 0.6); // Coordinates const cx = 1920 / 2; const lineY = 480; const lineLeft = 280; const lineRight = 1920 - 280; const lineFullW = lineRight - lineLeft; const aX = lineLeft + lineFullW * 0.22; const bX = lineLeft + lineFullW * 0.78; return (
{/* Eyebrow */}
The Gap
{/* Timeline */} {/* Base rule (light) */} {/* Drawn rule (navy) */} {/* Tick marks at endpoints */} {/* Gap highlight band between A and B */} {/* Gap rule emphasis */} {/* Marker A dot */} {/* Marker B dot */} {/* Gap label centred */} THE GAP {/* Marker A label */}
Owner says
2 years out
{/* Marker B label */}
Buyer says
5 years from buyable
{/* Caption */}
Most owners discover the gap too late.
); }} ); } // ──────────────────────────────────────────────────────────────────────────── // SCENE 3 — THE FRAMEWORK (15–30s) // Five-stage diagram, left to right. Then "Built by three specialists" + names. const STAGES = [ 'Entry', 'Insights Assessment', 'Diagnostic Report', 'Program & Specialist Consulting', 'Sale-Ready', ]; function SceneFramework() { return ( {({ localTime }) => { const lt = localTime; // 0..15 // Eyebrow + title const ebO = band(lt, 0.2, 0.6, 14.0, 1.0); const titleO = band(lt, 0.5, 0.8, 14.0, 1.0); // Stages reveal sequentially const stageStart = 1.6; const stagePer = 1.1; const stageOpacities = STAGES.map((_, i) => { const s = stageStart + i * stagePer; return { o: band(lt, s, 0.6, 14.0, 1.0), highlight: clamp(1 - (lt - (s + 0.4)) / 0.9, 0, 1) * clamp((lt - s) / 0.3, 0, 1), connOpacity: i === 0 ? 0 : band(lt, s - 0.15, 0.5, 14.0, 1.0), }; }); // Specialists overlay: appears 8.5 → fade out with scene const specsO = band(lt, 8.5, 1.0, 14.0, 1.0); // Layout for stages (5 cards, centred row) const cardW = 296; const cardH = 200; const gap = 24; const totalW = 5 * cardW + 4 * gap; const rowLeft = (1920 - totalW) / 2; const rowTop = 360; return (
{/* Header */}
The Framework

Five stages from where you are to sale-ready.

{/* Connector line behind cards */} {STAGES.slice(0, -1).map((_, i) => { const x1 = rowLeft + (i + 1) * cardW + i * gap; const x2 = x1 + gap; const y = rowTop + cardH / 2; const o = stageOpacities[i + 1].connOpacity; return ( ); })} {/* Cards */} {STAGES.map((label, i) => { const left = rowLeft + i * (cardW + gap); const { o, highlight } = stageOpacities[i]; const ty = (1 - o) * 14; const isFinal = i === STAGES.length - 1; return (
0.01 ? `0 0 0 ${4 * highlight}px rgba(28, 180, 204, ${0.18 * highlight})` : 'none', }}>
STAGE 0{i + 1}
{label}
{isFinal && (
)}
); })} {/* Specialists overlay */}
Built by three specialists.
{[ { name: 'Lyndon Smith', role: 'Operations & Codification' }, { name: 'Joshua Leyenhorst, CPA', role: 'Financials & Tax' }, { name: 'Rob Julien', role: 'Valuation & Exit' }, ].map((p, i) => { const np = band(lt, 9.0 + i * 0.4, 0.6, 14.0, 1.0); return (
{p.name}
{p.role}
); })}
); }} ); } // ──────────────────────────────────────────────────────────────────────────── // SCENE 4 — THE PAYOFF (30–40s) // Five service pillars stack in, then the closing line. const PILLARS = [ 'Systems & Operations', 'Financials & Tax', 'Valuation & Exit', 'Human Capital', 'Sales & Marketing', ]; function ScenePayoff() { return ( {({ localTime }) => { const lt = localTime; // 0..10 const ebO = band(lt, 0.2, 0.6, 9.2, 0.8); const pillarBase = 0.8; const pillarPer = 0.85; // Closing line 5.6 → 9.2 const closeO = band(lt, 5.6, 1.0, 9.2, 0.8); const closeTY = (1 - clamp((lt - 5.6) / 1.0, 0, 1)) * 12; const listLeft = 280; const listTop = 260; const rowH = 78; return (
The Payoff
{/* Pillars list */}
{PILLARS.map((p, i) => { const s = pillarBase + i * pillarPer; const o = band(lt, s, 0.5, 9.2, 0.8); const tx = (1 - clamp((lt - s) / 0.5, 0, 1)) * 24; return (
0{i + 1}
{p}
); })}
{/* Closing line, right-aligned column */}
Codify what makes your business work.
Make yourself redundant.
Then sell from a position of strength.
); }} ); } // ──────────────────────────────────────────────────────────────────────────── // SCENE 5 — THE CLOSE (40–45s) // Logo, "Ready. Aim. Fire.", URL. End on bone-white for clean loop. function SceneClose() { return ( {({ localTime }) => { const lt = localTime; // 0..5 // Logo fades in 0.4 → 1.4 const logoO = band(lt, 0.4, 1.0, 4.4, 0.6); // "Ready. Aim. Fire." reveals word by word const r1 = band(lt, 1.6, 0.5, 4.4, 0.6); const r2 = band(lt, 2.1, 0.5, 4.4, 0.6); const r3 = band(lt, 2.6, 0.5, 4.4, 0.6); // URL 3.2 → 3.9 const urlO = band(lt, 3.2, 0.7, 4.4, 0.6); // Subtle azure underline rule from 1.2 const ruleW = clamp((lt - 1.2) / 0.8, 0, 1) * 120; const ruleO = band(lt, 1.2, 0.8, 4.4, 0.6); return (
{/* TBGF wordmark (placeholder) */}
THE BUSINESS GROWTH FACTOR
{/* Rule */}
{/* Ready. Aim. Fire. */}
Ready. Aim. Fire.
{/* URL */}
business-exit-trajectory.thebusinessgrowthfactor.com
); }} ); } // ──────────────────────────────────────────────────────────────────────────── // Subtle paper-texture overlay — flat noise feel, very faint function PaperGrain() { return (
\")", }} /> ); } // Tiny scene-ticker, top-right — discreet brand tag function CornerTag() { return (
TBGF / BUSINESS EXIT TRAJECTORY
); } function Timecode() { const time = useTime(); const total = 45; return (
{String(Math.floor(time)).padStart(2, '0')} / {total}s
); } // ──────────────────────────────────────────────────────────────────────────── // Root scene container function HeroVideo() { return ( {/* Persistent chrome */} ); } window.HeroVideo = HeroVideo;