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

feat: fade meteors at horizon using mask-image on #meteorLayer

Browse source 
Meteors now dissolve as they approach the horizon line (fade from
50% to 60% viewport height) via CSS mask-image on their container.
Also fixed spawnMeteor appending to #meteorLayer instead of .scene.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ltadeu6 2026-06-07 10:21:56 -03:00
parent 238c56eba4
commit fd4ba05d1e
No known key found for this signature in database
GPG key ID: FB9FDAB6B6F3418D
1 changed files with 12 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -121,6 +121,14 @@ html, body {
transform-origin: top center;
animation: meteorFall linear forwards;
}
#meteorLayer {
position: absolute;
inset: 0;
pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 60%);
mask-image: linear-gradient(to bottom, black 50%, transparent 60%);
}
@keyframes meteorFall {
0% { opacity: 0; transform: rotate(var(--rot)) translateY(0); }
5% { opacity: 1; }
@ -745,6 +753,9 @@ html, body {
<!-- Horizon glow -->
<div class="horizon"></div>
<!-- Meteor layer (masked at horizon) -->
<div id="meteorLayer"></div>
<!-- ===================== ROBOT ===================== -->
<div class="robot-wrap">
<div class="beat-wrap">
@ -919,7 +930,7 @@ function spawnMeteor() {
animation-duration:${dur}s;
animation-name:meteorFall;
`;
document.querySelector('.scene').appendChild(el);
document.getElementById('meteorLayer').appendChild(el);
setTimeout(() => el.remove(), dur * 1000);
}