// planet.jsx — Earth with NASA Blue Marble texture, moons + space station orbiting // in DIFFERENT inclined planes. Objects pass behind the planet (occluded) on the // far half of their orbit, and in front on the near half. function Planet({ scrollProgress = 0 }) { const scale = 1 - Math.min(scrollProgress * 0.4, 0.4); const opacity = 1 - Math.min(scrollProgress * 1.4, 0.85); const CX = 360, CY = 360, R = 180; // Texture: 2048x1024. Render at 720x360 (2:1) inside the planet circle. const TEX_W = 720, TEX_H = 360; const TEX_TOP = CY - TEX_H / 2; // Ring (the visible band around the planet) const ringTilt = 18; const ringRx = 320, ringRy = 80; // Three orbital tracks. Each has its own (rx, ry, tilt) — so they're DIFFERENT planes. // Convention: orbit ellipse defined around (0,0), then rotated by `tilt` deg. // The "near" half of the orbit (visible in front of the planet) is the BOTTOM half // of the un-tilted ellipse (y > 0 in object coords, which after the tilt becomes // the half closer to the viewer). The "far" half is the TOP (y < 0), which is occluded. // // For each orbit we generate: // • a back path (top half, drawn UNDER the planet body) — gets occluded // • a front path (bottom half, drawn OVER the planet body) // Each path runs from one edge of the orbit to the other, looping continuously // by chaining a back-segment animation and a front-segment animation back to back. // // We achieve this with motion via SVG on the FULL ellipse, but // we render the SAME object twice: once before the planet (back layer) and once // after (front layer). Each instance is clipped so it only shows on its half of // the orbit — using a clipPath that's a rotated rectangle covering exactly that half. const orbits = [ { key: 'station', rx: ringRx, ry: ringRy, tilt: ringTilt, // SAME plane as the ring duration: 22, phase: 0.35, // different start than ring reverse: false, }, { key: 'moon-a', rx: 250, ry: 70, tilt: -28, // different plane duration: 36, phase: 0.0, reverse: false, }, { key: 'moon-b', rx: 305, ry: 35, tilt: 42, // yet another plane (steeper tilt, flatter orbit) duration: 28, phase: 0.6, reverse: true, }, ]; // Build a full-ellipse path centered at (CX,CY) starting at the right vertex. const ellipsePath = (rx, ry) => `M ${CX + rx},${CY} A ${rx},${ry} 0 0 1 ${CX - rx},${CY} A ${rx},${ry} 0 0 1 ${CX + rx},${CY}`; return (
{/* "Outside the earth disc" mask — for FRONT instances of orbital bodies. White everywhere, black inside the planet circle, so the body is hidden wherever it overlaps the earth (the back instance, drawn earlier and covered by the earth body, takes over there visually — but actually we rely on z-order alone for the back side, so the front instance is just clipped out where the planet sits). */} {orbits.map(o => ( ))} {/* Reusable orbital body shapes */} {/* === BACKGROUND LAYERS (behind planet) === */} {/* Outer aura */} {/* Back half of ring */} {/* Orbital bodies — BACK instance (drawn before planet, occluded by it). Each body is rendered TWICE: a back copy (this one) and a front copy (drawn after the planet). Synchronized opacity animations make each copy visible only during its half of the orbit, so the body smoothly passes BEHIND the planet on the back half and IN FRONT on the front half — true 3D depth despite SVG's flat z-order. */} {orbits.map(o => ( ))} {/* === EARTH BODY === */} {/* === FOREGROUND LAYERS (in front of planet) === */} {/* Front half of ring */} {/* Orbital bodies — FRONT instance (drawn after planet, on top of it). Visible only during the front half of the orbit; sibling back instance handles the rear half. No mask — when a body is on the front half AND over the disc, it should pass IN FRONT of the planet. */} {orbits.map(o => ( ))}
); } // One orbital body — uses on a shared orbit path. // Both layer instances ('back' / 'front') of the same orbit run the SAME animation // (same path, duration, begin time) so they're frame-locked. Each layer's clipPath // shows only the appropriate half. Together they look like a single object circling // in 3D, occluded by the planet on the far side. function OrbitingBody({ orbit, layer }) { const { key, duration, phase, reverse, tilt } = orbit; const dur = `${duration}s`; // Use a NEGATIVE begin to start the animation already advanced by `phase * duration`. // Both layers share the same begin so their positions match exactly. const begin = `${-phase * duration}s`; // Reverse direction → use keyPoints/keyTimes to go around the path backwards. const motionProps = reverse ? { keyPoints: '1;0', keyTimes: '0;1', calcMode: 'linear' } : {}; // Depth gating — the body needs to be visible only on the half of the // orbit assigned to this layer. The path's half-cycle boundary (t=0.5) // is the body crossing the planet's silhouette. With a tiny crossfade // around that boundary we avoid a pop when layers swap. For a forward // ellipse traversal (CCW from the right vertex), upper arc = [0,0.5], // lower arc = [0.5,1]. With tilt the upper/lower map to back/front in // the rotated frame; that's still a clean depth split. When the orbit // is `reverse: true` we flip the visibility mapping so back stays back. const FADE = 0.04; // 4% of period crossfade — ~1s on a 22s orbit const buildVisibility = (visibleFirstHalf) => { // first-half visible: 1 → 1 → 0 → 0 → 1 over [0, 0.5−f, 0.5+f, 1−f, 1] // second-half visible: invert. if (visibleFirstHalf) { return { values: '1;1;0;0;1', keyTimes: `0;${0.5 - FADE};${0.5 + FADE};${1 - FADE};1`, }; } return { values: '0;0;1;1;0', keyTimes: `0;${0.5 - FADE};${0.5 + FADE};${1 - FADE};1`, }; }; // Without `reverse`, t=0 is at the right vertex moving up first, so the // first half is the "back" arc. With `reverse`, the body moves DOWN // first → first half is the "front" arc. const backIsFirstHalf = !reverse; const visibleFirstHalf = layer === 'back' ? backIsFirstHalf : !backIsFirstHalf; const vis = buildVisibility(visibleFirstHalf); // Tilt the orbital plane around the planet center so each orbit traces // a different 3D plane. Without this rotate, every ellipse lay flat on // the screen — adding it makes ISS / moons sweep across distinct // inclinations the way real satellites do. return ( ); } window.Planet = Planet;