From fd4ba05d1e05556ed667f25c740965e94b6fb0c9 Mon Sep 17 00:00:00 2001
From: ltadeu6 <ltadeu6@protonmail.com>
Date: Sun, 7 Jun 2026 10:21:56 -0300
Subject: [PATCH] feat: fade meteors at horizon using mask-image on
 #meteorLayer

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>
---
 plugin/contents/ui/dancer.html | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/plugin/contents/ui/dancer.html b/plugin/contents/ui/dancer.html
index cf53be8..0d9faff 100644
--- a/plugin/contents/ui/dancer.html
+++ b/plugin/contents/ui/dancer.html
@@ -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);
 }