ltadeu6/skeledance
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add classic synthwave sun at horizon

Browse source 
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:
ltadeu6 2026-06-07 13:32:24 -03:00
parent b3acbeb78d
commit d822b1c669
No known key found for this signature in database
GPG key ID: FB9FDAB6B6F3418D
1 changed files with 48 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

48
plugin/contents/ui/dancer.html
View file

@ -724,6 +724,51 @@ html, body {
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
============================================================ */
@ -773,6 +818,9 @@ html, body {
<!-- Twinkling starfield -->
<canvas id="starfield"></canvas>
<!-- Synthwave sun — sits behind floor grid and horizon -->
<div class="synthwave-sun"></div>
<!-- Retrowave grid floor -->
<canvas id="floorCanvas"></canvas>