// Scroll-driven intro scenes — original compositions // Scene 1: Globe with cat on Belgium function SceneGlobe({ progress, theme }) { const rot = progress * 20; // slight rotation const stroke = theme === 'dark' ? '#f4f1e8' : '#0a0a0a'; return ( {/* globe */} {/* continents — abstract blobs */} {/* Africa/Europe */} {/* Asia bulge */} {/* Americas */} {/* Belgium marker (small dot on Europe) */} {/* meridians */} {/* oversized cat perched on Belgium */} {/* floating text fragments */} ONE CAT. ONE PLANET. ONE MISSION. ); } // Scene 2: Running across the globe function SceneRun({ progress, theme }) { const stroke = theme === 'dark' ? '#f4f1e8' : '#0a0a0a'; const t = progress; // 0..1 across arc // Arc from Belgium (left side) to Seoul (right side) over globe curve const x = 150 + t * 900; const y = 400 - Math.sin(t * Math.PI) * 180; const angle = Math.cos(t * Math.PI) * -25; return ( {/* globe bg — pushed down, cat runs across top */} {/* path/trail */} {/* Belgium dot */} BRUSSELS {/* Seoul dot */} 0.8 ? '#f7d046' : '#ff2e4d'}/> SEOUL {/* running cat */} {/* motion lines */} {/* km counter */} DIST_TRAVELED {Math.round(t * 8950).toLocaleString()} KM ); } // Scene 3: Plunge toward city function SceneDive({ progress, theme }) { const stroke = theme === 'dark' ? '#f4f1e8' : '#0a0a0a'; const bg = theme === 'dark' ? '#050505' : '#ede8dc'; const catY = 100 + progress * 500; const catScale = 0.6 + progress * 1.2; return ( {/* speed lines radiating */} {Array.from({length: 30}).map((_, i) => { const a = (i / 30) * Math.PI * 2; const r1 = 200 + progress * 300; const r2 = 500 + progress * 400; return ; })} {/* distant city glow */} {/* diving cat */} ALT {Math.round(12000 * (1 - progress)).toLocaleString()} M DESCENDING · SEOUL ); } // Scene 4: City blocks assembling like puzzle function SceneAssemble({ progress, theme }) { const stroke = theme === 'dark' ? '#f4f1e8' : '#0a0a0a'; const bg = theme === 'dark' ? '#0a0a0a' : '#ede8dc'; // blocks scatter from random offsets, converge at progress = 1 const blocks = [ { x: 200, y: 500, w: 80, h: 120, dx: -400, dy: -200, r: 25 }, { x: 300, y: 500, w: 60, h: 200, dx: 300, dy: -400, r: -40 }, { x: 380, y: 500, w: 100, h: 150, dx: -200, dy: 300, r: 15 }, { x: 500, y: 500, w: 70, h: 250, dx: 400, dy: -300, r: -30 }, { x: 590, y: 500, w: 90, h: 180, dx: -500, dy: -150, r: 35 }, { x: 700, y: 500, w: 80, h: 220, dx: 200, dy: 400, r: 20 }, { x: 800, y: 500, w: 60, h: 140, dx: 500, dy: 200, r: -45 }, { x: 880, y: 500, w: 100, h: 170, dx: -350, dy: -450, r: 25 }, ]; return ( {/* ground line */} {blocks.map((b, i) => { const p = Math.min(1, Math.max(0, (progress - i * 0.04) * 1.4)); const ex = 1 - p; const tx = b.x + b.dx * ex; const ty = b.y - b.h + b.dy * ex; const rot = b.r * ex; return ( {/* windows */} {Array.from({length: Math.floor(b.h / 25)}).map((_, j) => ( ))} {Array.from({length: Math.floor(b.h / 25)}).map((_, j) => ( ))} ); })} {/* diving cat still mid-air, smaller */} CITY_ASSEMBLE SEOUL.EXE {Math.round(progress * 100)}% LOADED ); } // Scene 5: Approaching/entering the building (Layer41) function SceneBuilding({ progress, theme }) { const stroke = theme === 'dark' ? '#f4f1e8' : '#0a0a0a'; const bg = theme === 'dark' ? '#0a0a0a' : '#ede8dc'; const zoom = 1 + progress * 8; // rapid zoom into door return ( {/* building facade — industrial */} {/* grid of windows */} {Array.from({length: 6}).map((_, row) => ( Array.from({length: 8}).map((_, col) => ( )) ))} {/* door — rectangle with glow, centered */} LAYER41 {/* graffiti tag on wall */} CHANOIRS {/* vignette darkening as we zoom */} ); } Object.assign(window, { SceneGlobe, SceneRun, SceneDive, SceneAssemble, SceneBuilding });