diff --git a/plugin/contents/ui/dancer.html b/plugin/contents/ui/dancer.html index 7d48c8b..9ff70fa 100644 --- a/plugin/contents/ui/dancer.html +++ b/plugin/contents/ui/dancer.html @@ -255,6 +255,22 @@ html, body { ROBOT WRAPPER 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 { position: absolute; left: 50%; @@ -749,6 +765,11 @@ html, body {
+ +