Add golden-hour veil driven by real sun altitude

New #duskSky layer — purple high up through coral to deep orange at the
horizon — whose opacity is a smoothstepped triangle peaking at +1° sun
altitude and vanishing outside -6°..+8°. It rides above the day sky and
also glows over the stars right after sunset and before sunrise.
Hidden in balada/chuva.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015HtPHsTnDcLVSCiF5FGHZj
This commit is contained in:
vini 2026-07-19 22:02:37 -03:00
parent aa832727da
commit a181614e38
2 changed files with 27 additions and 1 deletions

View file

@ -59,7 +59,7 @@ Pure HTML/CSS/JS, no external dependencies. All visuals are self-contained:
| Milky Way | Per-pixel sampling of `milkyway.jpg` (Gaia photo, full res): `buildMwGrid` caches viewport unit vectors + extinction/glare, `renderMilkyWay` applies only the sidereal rotation (camera azimuth folded into the equatorial→galactic matrix) and stylized "development" (deep blacks, saturation, cool shadows). Decoded texture stays resident (~75 MB) | | Milky Way | Per-pixel sampling of `milkyway.jpg` (Gaia photo, full res): `buildMwGrid` caches viewport unit vectors + extinction/glare, `renderMilkyWay` applies only the sidereal rotation (camera azimuth folded into the equatorial→galactic matrix) and stylized "development" (deep blacks, saturation, cool shadows). Decoded texture stays resident (~75 MB) |
| Moon & planets | Astronomy Engine topocentric ephemerides: Moon with real phase texture + bright-limb angle, 7 planets with magnitude-scaled dots (labels only in constellation mode) | | Moon & planets | Astronomy Engine topocentric ephemerides: Moon with real phase texture + bright-limb angle, 7 planets with magnitude-scaled dots (labels only in constellation mode) |
| Zodiac constellations | Stellarium Modern lines (traces only, no artwork); toggled via `/tmp` file or `C` key | | Zodiac constellations | Stellarium Modern lines (traces only, no artwork); toggled via `/tmp` file or `C` key |
| Day mode | Real sun altitude (Astronomy Engine, follows the timelapse clock) drives `--sun-bottom` (horizon → ~78% at culmination) and a `dia` body class: pink vaporwave `#daySky` with green grass below the horizon, drifting CSS clouds, bright sun disc, golden horizon, stars dimmed to ghosts (0.12), dancer replaced by a grounded gravestone (flattened-ellipse mound/shadow for perspective, no religious symbols). Balada/chuva override day visuals via `:not()` selectors | | Day mode | Real sun altitude (Astronomy Engine, follows the timelapse clock) drives `--sun-bottom` (horizon → ~78% at culmination) and a `dia` body class: pink vaporwave `#daySky` with green grass below the horizon, drifting CSS clouds, bright sun disc, golden horizon, stars dimmed to ghosts (0.12), dancer replaced by a grounded gravestone (CC0 tileset PNG, flattened-ellipse mound/shadow for perspective, no religious symbols). A `#duskSky` golden-hour veil peaks at sun altitude +1° (zero outside 6°..+8°), JS-driven, on both dawn and dusk. Balada/chuva override day visuals via `:not()` selectors |
| Nebula blobs, grid floor, horizon | CSS animations | | Nebula blobs, grid floor, horizon | CSS animations |
| DANCEBOT-9000 robot | Pure CSS (divs + `@keyframes`) | | DANCEBOT-9000 robot | Pure CSS (divs + `@keyframes`) |
| Chest EQ bars & VU meter | JS-driven `requestAnimationFrame` | | Chest EQ bars & VU meter | JS-driven `requestAnimationFrame` |

View file

@ -1158,6 +1158,26 @@ body.chuva #sunChuvaFace { opacity: 1; transition: opacity 5s ease; }
} }
body.dia:not(.balada):not(.chuva) #daySky { opacity: 1; } body.dia:not(.balada):not(.chuva) #daySky { opacity: 1; }
/* Hora dourada: véu de amanhecer/pôr do sol. A opacidade é dirigida por
JS (pico com o sol a ~1° de altitude, zero fora de -6°..+8°), então o
brilho laranja aparece dos dois lados do crepúsculo — inclusive sobre
as estrelas logo depois do pôr do sol. */
#duskSky {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity 8s ease;
background: linear-gradient(to bottom,
rgba(70, 45, 110, 0.00) 0%,
rgba(150, 70, 130, 0.30) 30%,
rgba(232, 108, 88, 0.48) 52%,
rgba(255, 158, 68, 0.80) 66%,
rgba(90, 55, 45, 0.40) 66.1%,
rgba(30, 25, 35, 0.00) 100%);
}
body.balada #duskSky, body.chuva #duskSky { opacity: 0 !important; }
/* Névoa do horizonte (pintada pelo tema via JS) fica discreta de dia /* Névoa do horizonte (pintada pelo tema via JS) fica discreta de dia
para não acinzentar o céu */ para não acinzentar o céu */
.fog-layer { transition: opacity 12s ease; } .fog-layer { transition: opacity 12s ease; }
@ -1359,6 +1379,8 @@ body.dia:not(.balada):not(.chuva) .grave-wrap { opacity: 1; }
<!-- Céu diurno (fade conforme o sol real sobe) --> <!-- Céu diurno (fade conforme o sol real sobe) -->
<div id="daySky"></div> <div id="daySky"></div>
<!-- Hora dourada (opacidade dirigida pela altitude real do sol) -->
<div id="duskSky"></div>
<div class="day-cloud cloud-a"></div> <div class="day-cloud cloud-a"></div>
<div class="day-cloud cloud-b"></div> <div class="day-cloud cloud-b"></div>
<div class="day-cloud cloud-c"></div> <div class="day-cloud cloud-c"></div>
@ -1959,6 +1981,7 @@ function buildMoonPhaseTexture(phase) {
fica pousado no horizonte (34%), como sempre foi. O timelapse fica pousado no horizonte (34%), como sempre foi. O timelapse
acelera o ciclo junto, já que tudo deriva de skyNowMs(). ── */ acelera o ciclo junto, já que tudo deriva de skyNowMs(). ── */
let sunNoonAlt = 60, sunNoonKey = -1; let sunNoonAlt = 60, sunNoonKey = -1;
const duskSkyEl = document.getElementById('duskSky');
function updateDayMode(date, observer, sunAlt) { function updateDayMode(date, observer, sunAlt) {
const dayKey = Math.floor(date.getTime() / 86400000); const dayKey = Math.floor(date.getTime() / 86400000);
if (dayKey !== sunNoonKey) { if (dayKey !== sunNoonKey) {
@ -1971,6 +1994,9 @@ function updateDayMode(date, observer, sunAlt) {
'--sun-bottom', (34 + 44 * climb).toFixed(2) + '%'); '--sun-bottom', (34 + 44 * climb).toFixed(2) + '%');
/* -3°: meio do crepúsculo civil — troca com as transições longas do CSS */ /* -3°: meio do crepúsculo civil — troca com as transições longas do CSS */
document.body.classList.toggle('dia', sunAlt > -3); document.body.classList.toggle('dia', sunAlt > -3);
/* hora dourada: triângulo com pico no sol a +1°, zerando em -6° e +8° */
const dusk = Math.max(0, 1 - Math.abs(sunAlt - 1) / 7);
duskSkyEl.style.opacity = (dusk * dusk * (3 - 2 * dusk)).toFixed(3);
} }
function updateSolarSystem(date, lst, W, H, horizonPx) { function updateSolarSystem(date, lst, W, H, horizonPx) {