// scene.jsx — real laptop photo + real document photos (9s) const sceneColors = { ink: '#1a1815', muted: '#8a8378', accent: 'oklch(62% 0.14 45)', }; // Stage matches 16:9 but laptop photo is 3:2. We'll fill stage with photo. const STAGE_W = 1600, STAGE_H = 900; // The laptop photo (1600x1067) centered in the 1600x900 stage, cropped. // We offset it so the laptop sits near the bottom-center of the stage. const PHOTO_W = 1600; const PHOTO_H = 1067; const PHOTO_X = 0; // left-aligned const PHOTO_Y = -100; // shift up so laptop base visible at bottom // Measured screen rect in the 1600x1067 photo (flood-filled from center): const SCR_L = 506, SCR_T = 286, SCR_R = 1086, SCR_B = 674; const SCREEN_X = PHOTO_X + SCR_L; const SCREEN_Y = PHOTO_Y + SCR_T; const SCREEN_W = SCR_R - SCR_L; // ~627 const SCREEN_H = SCR_B - SCR_T; // ~260 const SLOT_X = SCREEN_X + SCREEN_W / 2; const SLOT_Y = SCREEN_Y + SCREEN_H / 2; // ─── Real document photos ───────────────────────────────────────────────── const DOC_IMAGES = [ 'https://images.unsplash.com/photo-1586281380349-632531db7ed4?w=500&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?w=500&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1455390582262-044cdead277a?w=500&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=500&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1568667256549-094345857637?w=500&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=500&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1516979187457-637abb4f9353?w=500&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1586941962765-d3896cc85ac8?w=500&auto=format&fit=crop&q=80', ]; const DOCS = [ { id: 0, startX: 180, startY: -280, rot: -20, launch: 0.3, land: 1.7, img: 0 }, { id: 1, startX: 1420, startY: -320, rot: 24, launch: 0.8, land: 2.3, img: 1 }, { id: 2, startX: 440, startY: -300, rot: -12, launch: 1.5, land: 3.1, img: 2 }, { id: 3, startX: 1180, startY: -340, rot: 16, launch: 2.2, land: 3.9, img: 3 }, { id: 4, startX: 260, startY: -280, rot: -24, launch: 2.9, land: 4.7, img: 4 }, { id: 5, startX: 1380, startY: -300, rot: 20, launch: 3.6, land: 5.5, img: 5 }, { id: 6, startX: 540, startY: -320, rot: -8, launch: 4.3, land: 6.2, img: 6 }, { id: 7, startX: 1100, startY: -280, rot: 28, launch: 5.0, land: 7.0, img: 7 }, ]; // ─── Laptop photo + UI overlay on screen ─────────────────────────────────── function Laptop() { const t = useTime(); const lit = clamp(t / 0.6, 0, 1); const landed = DOCS.filter(d => t >= d.land).length; const pct = landed / DOCS.length; let pulse = 0; DOCS.forEach(d => { const dt = t - d.land; if (dt >= 0 && dt < 0.55) pulse = Math.max(pulse, (1 - dt / 0.55)); }); const done = t >= 8.2; return (
{/* laptop photo */} {/* screen UI composited over the photo's screen area */}
{/* subtle light bloom from screen */}
); } // ─── Screen UI ───────────────────────────────────────────────────────────── function ScreenUI({ pct, landed, pulse, done, t }) { return (
{/* grid */}
{/* status bar */}
{done ? 'complete' : 'ingesting'}
{String(landed).padStart(2, '0')} / {String(DOCS.length).padStart(2, '0')}
{/* center percent */}
{done ? 'ready' : `${Math.round(pct * 100)}%`}
{done ? 'documents indexed' : 'processing'}
{/* progress bar */}
{/* chips */}
{DOCS.map((d, i) => { const on = t >= d.land; const just = t >= d.land && t < d.land + 0.4; return (
); })}
{/* scan */}
); } // ─── Document sprite ────────────────────────────────────────────────────── function Document({ doc }) { const t = useTime(); const { startX, startY, rot, launch, land, img } = doc; if (t < launch) return null; if (t > land + 0.12) return null; const lc = clamp((t - launch) / (land - launch), 0, 1); const posEase = Easing.easeInCubic(lc); const x = startX + (SLOT_X - startX) * posEase; const y = startY + (SLOT_Y - startY) * posEase; const scale = interpolate([0, 0.5, 0.9, 1], [1, 0.78, 0.22, 0.05], Easing.easeInCubic)(lc); const rotY = interpolate([0, 0.7, 1], [0, 10, 65])(lc); const rotX = interpolate([0, 0.7, 1], [5, 15, -40])(lc); const rotZ = rot * (1 - Easing.easeInQuad(lc)); const opacity = t > land ? 0 : interpolate([0, 0.85, 1], [1, 1, 0])(lc); const W = 200, H = 260; const blur = lc > 0.3 ? (lc - 0.3) * (lc - 0.3) * 6 : 0; return (
); } // ─── Landing burst ──────────────────────────────────────────────────────── function LandingBurst({ doc }) { const t = useTime(); const dt = t - doc.land; if (dt < 0 || dt > 0.7) return null; const p = dt / 0.7; return (
{[0, 1, 2].map(i => { const rp = clamp(p - i * 0.12, 0, 1); if (rp <= 0) return null; const size = 20 + rp * 160; return (
); })}
); } // ─── Motion trail ────────────────────────────────────────────────────────── function Trail({ doc }) { const t = useTime(); const { startX, startY, launch, land } = doc; if (t < launch || t > land) return null; const lc = clamp((t - launch) / (land - launch), 0, 1); if (lc < 0.2) return null; const posEase = Easing.easeInCubic(lc); const x = startX + (SLOT_X - startX) * posEase; const y = startY + (SLOT_Y - startY) * posEase; const dx = SLOT_X - startX; const dy = SLOT_Y - startY; const angle = Math.atan2(dy, dx) * 180 / Math.PI; const len = 80 * lc; return (
); } // ─── Caption ─────────────────────────────────────────────────────────────── function Caption() { const t = useTime(); const opacity = interpolate( [0, 0.6, 7.6, 8.4], [0, 1, 1, 0], Easing.easeInOutCubic )(t); const landedCount = DOCS.filter(d => t >= d.land).length; return (
{String(landedCount).padStart(2, '0')} · {t < 7.4 ? 'feeding documents' : 'indexed'}
{t < 7.4 ? ( <> documents
in , knowledge
out. ) : ( all set. )}
); } // ─── Scene root ──────────────────────────────────────────────────────────── function Scene() { return (
{DOCS.map(d => )} {DOCS.map(d => )} {DOCS.map(d => )}
); } Object.assign(window, { Scene });