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

feat: add perspective floor reflection of skeleton

Browse source
This commit is contained in:
ltadeu6 2026-06-07 12:36:54 -03:00
parent e4ecfb51c2
commit 8de8923785
No known key found for this signature in database
GPG key ID: FB9FDAB6B6F3418D
1 changed files with 23 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -255,6 +255,22 @@ html, body {
ROBOT WRAPPER ROBOT WRAPPER
120 BPM = 0.5s per beat. All animations key off this tempo. 120 BPM = 0.5s per beat. All animations key off this tempo.
============================================================ */ ============================================================ */
.robot-reflection {
position: absolute;
left: 50%;
bottom: 32%;
transform: translateX(-50%) scaleY(-0.22);
transform-origin: bottom center;
opacity: 0;
transition: opacity 0.8s;
pointer-events: none;
/* mask in original (pre-flip) space: opaque at bottom (feet), transparent at top (head)
after scaleY(-1) this becomes: opaque at top of visible area (feet), transparent lower */
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 100%);
mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 100%);
filter: blur(1.5px) brightness(0.5);
}
.robot-wrap { .robot-wrap {
position: absolute; position: absolute;
left: 50%; left: 50%;
@ -749,6 +765,11 @@ html, body {
<!-- Meteor layer (masked at horizon) --> <!-- Meteor layer (masked at horizon) -->
<div id="meteorLayer"></div> <div id="meteorLayer"></div>
<!-- ===================== REFLEXO ===================== -->
<div class="robot-reflection" id="robotReflection">
<img src="skeleton3.apng" class="skeleton-gif" alt="">
</div>
<!-- ===================== ROBOT ===================== --> <!-- ===================== ROBOT ===================== -->
<div class="robot-wrap"> <div class="robot-wrap">
<div class="beat-wrap"> <div class="beat-wrap">
@ -1086,6 +1107,7 @@ function updateMusic(artist, title) {
const playing = !!(artist || title); const playing = !!(artist || title);
isPlaying = playing; isPlaying = playing;
document.querySelector('.robot-wrap').style.opacity = playing ? '1' : '0'; document.querySelector('.robot-wrap').style.opacity = playing ? '1' : '0';
document.getElementById('robotReflection').style.opacity = playing ? '1' : '0';
document.querySelector('.music-ticker').style.opacity = playing ? '1' : '0'; document.querySelector('.music-ticker').style.opacity = playing ? '1' : '0';
albumArtEl.style.opacity = playing ? '1' : '0'; albumArtEl.style.opacity = playing ? '1' : '0';
if (!playing) vuBars.forEach(b => { b.style.height = '3px'; b.style.opacity = '0.15'; }); if (!playing) vuBars.forEach(b => { b.style.height = '3px'; b.style.opacity = '0.15'; });