feat: add classic synthwave sun at horizon
280px circle with repeating stripe overlay (13px gap / 4px band), yellow→orange→magenta→purple gradient, positioned half-buried at the horizon so the floor grid renders over the lower half and the fog floats in front. Atmospheric halo via ::after pseudo-element. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
b3acbeb78d
commit
d822b1c669
1 changed files with 48 additions and 0 deletions
|
|
@ -724,6 +724,51 @@ html, body {
|
||||||
50% { transform: rotate(5deg); }
|
50% { transform: rotate(5deg); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
SYNTHWAVE SUN
|
||||||
|
============================================================ */
|
||||||
|
.synthwave-sun {
|
||||||
|
position: absolute;
|
||||||
|
width: 280px;
|
||||||
|
height: 280px;
|
||||||
|
border-radius: 50%;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 41.5%;
|
||||||
|
transform: translateX(-50%) translateY(50%);
|
||||||
|
background:
|
||||||
|
repeating-linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
transparent 0px,
|
||||||
|
transparent 13px,
|
||||||
|
#000814 13px,
|
||||||
|
#000814 17px
|
||||||
|
),
|
||||||
|
linear-gradient(to bottom,
|
||||||
|
#fff9cc 0%,
|
||||||
|
#ffcc00 20%,
|
||||||
|
#ff7700 45%,
|
||||||
|
#ff1166 70%,
|
||||||
|
#aa00ee 100%
|
||||||
|
);
|
||||||
|
box-shadow:
|
||||||
|
0 0 50px rgba(255,120, 0, 0.7),
|
||||||
|
0 0 120px rgba(255, 20,100, 0.45),
|
||||||
|
0 0 220px rgba(150, 0,255, 0.25);
|
||||||
|
}
|
||||||
|
/* atmospheric halo above the sun */
|
||||||
|
.synthwave-sun::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: -35%;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(ellipse at 50% 60%,
|
||||||
|
rgba(255,100, 0, 0.18) 0%,
|
||||||
|
rgba(255, 0,120, 0.12) 40%,
|
||||||
|
transparent 70%);
|
||||||
|
filter: blur(18px);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* ============================================================
|
/* ============================================================
|
||||||
FOG — synthwave atmospheric haze rising above horizon
|
FOG — synthwave atmospheric haze rising above horizon
|
||||||
============================================================ */
|
============================================================ */
|
||||||
|
|
@ -773,6 +818,9 @@ html, body {
|
||||||
<!-- Twinkling starfield -->
|
<!-- Twinkling starfield -->
|
||||||
<canvas id="starfield"></canvas>
|
<canvas id="starfield"></canvas>
|
||||||
|
|
||||||
|
<!-- Synthwave sun — sits behind floor grid and horizon -->
|
||||||
|
<div class="synthwave-sun"></div>
|
||||||
|
|
||||||
<!-- Retrowave grid floor -->
|
<!-- Retrowave grid floor -->
|
||||||
<canvas id="floorCanvas"></canvas>
|
<canvas id="floorCanvas"></canvas>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue