// Main composition: orchestrates the full ~52s video.
//
// Stage is 1920×1080. We treat the canvas as a "world" and use a CSS transform
// on a wrapper to fake a camera (translate + scale + rotate). Each scene is
// positioned absolutely at known world coordinates; the camera target is a
// time-driven function that lerps between key shots.
const STAGE_W = 1920;
const STAGE_H = 1080;
const DURATION = 58;
// World coordinates for the two pages laid out in space, then a third "diagram"
// staging area below them. Camera will pan/zoom across these.
const WORLD = {
// Pages laid horizontally, large 760×560 each
badPagePos: { x: 200, y: 380 }, // top-left of bad page in world coords
goodPagePos: { x: 1180, y: 380 }, // top-left of good page in world coords
// Diagram lives in its own region offscreen-bottom; we'll cut to it in scene 5
};
// Camera state at key times: each entry { t, x, y, scale } where (x,y) is the
// world-point that should appear at the *center* of the viewport.
//
// Camera lerps with easeInOutCubic between adjacent keys.
const CAMERA_KEYS = [
// Cold open: pull back from very-zoomed center
{ t: 0.0, x: 960, y: 660, scale: 1.4, rot: 0 },
{ t: 4.5, x: 960, y: 660, scale: 0.92, rot: 0 },
// Title card: stay centered, no movement
{ t: 6.5, x: 960, y: 660, scale: 0.92, rot: 0 },
{ t: 11.5, x: 960, y: 660, scale: 0.95, rot: 0 },
// Dolly into bad page
{ t: 13.0, x: 580, y: 660, scale: 1.20, rot: -1 },
{ t: 22.5, x: 580, y: 660, scale: 1.30, rot: -1 },
// Pan across to good page
{ t: 25.5, x: 1560, y: 660, scale: 1.18, rot: 1 },
// Slow Ken-Burns over good page while letters land
{ t: 39.0, x: 1560, y: 660, scale: 1.32, rot: 1 },
// Pull way back — both pages diminish, prep diagram
{ t: 41.5, x: 1070, y: 660, scale: 0.55, rot: 0 },
// Cut to diagram region (we'll fade pages out)
{ t: 43.5, x: 960, y: 540, scale: 1.0, rot: 0 },
{ t: 50.0, x: 960, y: 540, scale: 1.05, rot: 0 },
{ t: 58.0, x: 960, y: 540, scale: 1.05, rot: 0 },
];
function lerpCamera(t) {
const keys = CAMERA_KEYS;
if (t <= keys[0].t) return keys[0];
if (t >= keys[keys.length - 1].t) return keys[keys.length - 1];
for (let i = 0; i < keys.length - 1; i++) {
const a = keys[i], b = keys[i + 1];
if (t >= a.t && t <= b.t) {
const local = (t - a.t) / (b.t - a.t);
const eased = Easing.easeInOutCubic(local);
return {
x: a.x + (b.x - a.x) * eased,
y: a.y + (b.y - a.y) * eased,
scale: a.scale + (b.scale - a.scale) * eased,
rot: a.rot + (b.rot - a.rot) * eased,
};
}
}
return keys[keys.length - 1];
}
// ── Scene wrapper that updates the data-screen-label with current timestamp ──
function TimestampLabel() {
const time = useTime();
const sec = Math.floor(time);
React.useEffect(() => {
const root = document.querySelector('[data-video-root]');
if (root) root.setAttribute('data-screen-label', `t=${sec}s`);
}, [sec]);
return null;
}
// ── Title cards (cold open + close) ─────────────────────────────────────────
function ColdOpenLabel({ sprite }) {
const t = sprite.localTime;
const op = clamp((t - 0.5) / 0.6, 0, 1) - clamp((t - 4.0) / 0.5, 0, 1);
return (
);
}
// ── The Camera + scene container ────────────────────────────────────────────
function CameraWorld({ children }) {
const time = useTime();
const cam = lerpCamera(time);
// Map world (x,y,scale) so that world-point (cam.x, cam.y) lands at viewport
// center (STAGE_W/2, STAGE_H/2).
const tx = STAGE_W / 2 - cam.x * cam.scale;
const ty = STAGE_H / 2 - cam.y * cam.scale;
return (
{children}
);
}
// Scene 5+ (diagram): rendered as overlay above world; pages dim out.
function DiagramOverlay({ sprite }) {
return (
{(s) => }
);
}
// Background grid that lives inside the world at the page-stage region
function PageStageBackdrop() {
return (
);
}
// SERP chip floating above the two pages — gives narrative context
function SerpChip() {
return (
best protein powder for runnersSERP
);
}
// ── Main composition ────────────────────────────────────────────────────────
function Composition() {
return (
<>
{/* === Pages live inside the camera world === */}
{(sceneSprite) => {
// Scene-wide fade out of the world before diagram cuts in
const time = useTime();
const fade = clamp((42.0 - time) / 1.0, 0, 1);
return (
30}
showLetterChips={time > 31}
letterTime={Math.max(0, time - 31)}
/>
)}
);
}}
{/* === Title card (lives in viewport, not world) === */}
{(s) => {
// Dim the world during the title card so type pops
const t = s.localTime;
const op = clamp(t / 0.6, 0, 1) - clamp((t - 4.0) / 0.6, 0, 1);
return (
<>
);
}}
{/* Cold open caption */}
{(s) => }
{/* Act label: the bad page */}
{(s) => (
Anonymous. Unverifiable.}
subtitle="No author, no dates, no sources. Google can't tell who's accountable for this — and neither can the reader."
color="#E5484D"
/>
)}
{/* Act label: the good page */}
{(s) => (
Same topic. Different signals.}
subtitle="A real person. A real track record. Sources cited. Schema wired up. Now watch where Google's framework lands."
color="#0071E3"
/>
)}
{/* Mini caption while letters arrive */}
{(s) => {
const t = s.localTime;
const op = clamp(t / 0.5, 0, 1) - clamp((t - 8.5) / 0.5, 0, 1);
return (
The framework
Experience. Expertise. Authoritativeness. Trust.
);
}}
{/* === Diagram scene === */}
{(s) => }
{/* Subtle vignette across the whole stage for editorial feel */}
);
}
Object.assign(window, { Composition, DURATION, STAGE_W, STAGE_H });