/* global React, TOD, bodyXY, Celestial, ClockDial */ // ==================================================================== // Background treatments + faithful mini-port chrome. // Directions: Aether Wash · Celestial Accent · AETHER SKY (the lead — // parchment floats on a living time-of-day sky, its torn deckle edges and // corners revealing the atmosphere behind: the background-of-the-background). // ==================================================================== // ---------- shared light layers (Aether Wash) ---------- // modes: // 'full-dark' — original: a temperature gradient that multiplies (darkens // the page toward the cool/warm tone). Used by wash/celestial. // 'edge' — temperature pulled to the border; interior stays clean. // 'full-color' — full-coverage tint toward the slot's HUE (not toward black): // the whole page takes on the time colour, ink stays readable. function WashLayers({ t, strength = 1, mode = 'full-dark' }) { const s = t.washStrength * strength; const [gx] = bodyXY(t, 100, 100); if (mode === 'full-color') { return ( {/* colourise the whole page toward the time hue (preserves texture) */}
{/* sun / moon glow */}
{/* faint hue-deepening toward the edges (no black) */}
); } const edge = mode === 'edge'; const temp = edge ? { background: `radial-gradient(125% 115% at 50% 44%, transparent 52%, ${t.washBot} 100%)`, mixBlendMode: t.blend, opacity: s } : { background: `linear-gradient(to top, ${t.washBot}, ${t.washTop})`, mixBlendMode: t.blend, opacity: s }; return (
{/* edge lift — torn corners catch the time hue */}
); } // ---------- the living sky behind the sheet (Aether Sky) ---------- function SkyBacking({ t, w, h }) { const [bx, by] = bodyXY(t, w, h * 0.74, 20); return (
{/* cloud / weather texture */}
{/* stars at night */} {t.stars && Array.from({ length: 40 }).map((_, i) => { const sx = (i * 67 % 100), sy = (i * 41 % 92); return ; })} {/* the sun / moon */}
{/* horizon haze */}
); } // drifting accent motes function Motes({ t }) { return ( {[14, 30, 47, 63, 80, 91].map((x, i) => ( ))} ); } // corner stamped celestial sigil function Sigil({ t, size = 72 }) { const r = size / 2, cx = r, cy = r; return ( {t.body === 'moon' ? : {Array.from({ length: 12 }).map((_, i) => { const a = i / 12 * Math.PI * 2; return ; })} } ); } // ==================================================================== // Chrome — the recognizable Sky Hearth port UI (shared by every treatment). // ==================================================================== const ELEM_GLYPH = { Fire: '△', Earth: '□', Ice: '◊', Holy: '✦', Lightning: '╱', Wind: '≋', Water: '~', Nature: '✿' }; function Chrome({ t, acc, tinted, inset = 0 }) { return (
{/* header */}
Hearth Census
SKYHEARTH PORT TIER III
Day 04 · {t.label}
{/* slot caption */}
{t.label.toUpperCase()} SLOT · ON-TIME {t.pair[0].toUpperCase()} · {t.pair[1].toUpperCase()}
{/* element chips */}
{['Fire', 'Ice', 'Lightning', 'Water', 'Earth', 'Holy', 'Wind', 'Nature'].map(name => { const lit = t.pair.includes(name); return (
{ELEM_GLYPH[name]} {name}
); })}
{/* footer */}
{t.poem} LAUNCH ▸
); } // the torn parchment sheet, masked so its deckle edges reveal the sky behind function TornSheet({ children, inset = 8, washChild }) { return (
{washChild} {/* age splotches, clipped to the sheet */}
{children}
); } // Which corner lifts to show more sky — aligned to where each slot's sun/moon // sits, so the open corner nestles the celestial body (intentional + cute). const REVEAL_CORNER = { night: 'tl', morning: 'bl', afternoon: 'tr', evening: 'br' }; function insetFor(corner) { const B = 30, S = 11; // big gap / small gap, in px (top right bottom left) return { tl: `${B}px ${S}px ${S}px ${B}px`, tr: `${B}px ${B}px ${S}px ${S}px`, bl: `${S}px ${S}px ${B}px ${B}px`, br: `${S}px ${B}px ${B}px ${S}px`, }[corner]; } // ==================================================================== // MiniPort // ==================================================================== function MiniPort({ todKey, treatment, w = 560, h = 360, offset = 14, tilt = 0, wash = 0.78, washMode = 'edge' }) { const t = TOD[todKey]; const tinted = treatment === 'celestial' || treatment === 'aethersky'; const acc = tinted ? t.accent : 'var(--stamp-amber)'; // ---- AETHER SKY: sheet floats on the living time-of-day sky ---- if (treatment === 'aethersky') { const ins = (offset && typeof offset === 'object') ? `${offset.top}px ${offset.right}px ${offset.bottom}px ${offset.left}px` : offset; const inner = ( } /> ); return (
{tilt ?
{inner}
: inner}
); } // ---- WASH / CELESTIAL: light & accents on a full-bleed sheet ---- const showWash = treatment === 'wash' || treatment === 'celestial'; const washStrength = treatment === 'celestial' ? 0.34 : 1; return (
{showWash && } {treatment === 'celestial' && }
); } Object.assign(window, { MiniPort }); // ==================================================================== // AetherSky — LIVE background for the real #canvas. Crossfades the four // day-slots (sky backing + torn-masked parchment + full-colour wash) as // the day ticks. Rendered behind the UI (zIndex 0, pointer-events none). // Baked from the v4 study: margin 14/14/2/2, full-colour wash @ 0.78. // ==================================================================== function AetherSky({ slotIdx, offset, wash = 0.78, washMode = 'full-color', w = 1440, h = 900 }) { const off = offset || { top: 14, right: 14, bottom: 2, left: 2 }; const ins = `${off.top}px ${off.right}px ${off.bottom}px ${off.left}px`; // Per-slot wash scale — Night's cool wash reads heaviest, so soften it ~40%. const WASH_SCALE = { night: 0.6, morning: 1, afternoon: 1, evening: 1 }; return (
{TOD_ORDER.map((k, i) => { const t = TOD[k]; const on = i === slotIdx; return (
} />
); })}
); } Object.assign(window, { AetherSky });