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

perf: reduce fog from 5 to 3 wisps, blur 60px→45px

Browse source 
Fewer compositing layers speeds up WebEngine initialization after deploy.
will-change hint lets the browser pre-promote layers before animation starts.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ltadeu6 2026-06-07 13:29:32 -03:00
parent bf2a10a111
commit b3acbeb78d
No known key found for this signature in database
GPG key ID: FB9FDAB6B6F3418D
1 changed files with 5 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -739,13 +739,12 @@ html, body {
position: absolute; position: absolute;
bottom: -10px; bottom: -10px;
border-radius: 50%; border-radius: 50%;
filter: blur(60px); filter: blur(45px);
will-change: transform, opacity;
} }
.fog-w1 { width: 70%; height: 140px; left: -8%; animation: fogDrift1 9s ease-in-out infinite alternate; } .fog-w1 { width: 75%; height: 140px; left: -8%; animation: fogDrift1 9s ease-in-out infinite alternate; }
.fog-w2 { width: 55%; height: 115px; left: 22%; animation: fogDrift2 13s ease-in-out infinite alternate; animation-delay: -4s; } .fog-w2 { width: 60%; height: 120px; left: 25%; animation: fogDrift2 13s ease-in-out infinite alternate; animation-delay: -4s; }
.fog-w3 { width: 48%; height: 105px; left: 52%; animation: fogDrift3 8s ease-in-out infinite alternate; animation-delay: -2s; } .fog-w3 { width: 55%; height: 110px; left: 48%; animation: fogDrift3 8s ease-in-out infinite alternate; animation-delay: -2s; }
.fog-w4 { width: 42%; height: 95px; left: 36%; animation: fogDrift1 15s ease-in-out infinite alternate; animation-delay: -8s; }
.fog-w5 { width: 52%; height: 125px; left: 8%; animation: fogDrift2 11s ease-in-out infinite alternate; animation-delay: -5s; }
@keyframes fogDrift1 { @keyframes fogDrift1 {
from { transform: translateY(0) scaleX(1); opacity: 0.32; } from { transform: translateY(0) scaleX(1); opacity: 0.32; }
@ -785,8 +784,6 @@ html, body {
<div class="fog-wisp fog-w1"></div> <div class="fog-wisp fog-w1"></div>
<div class="fog-wisp fog-w2"></div> <div class="fog-wisp fog-w2"></div>
<div class="fog-wisp fog-w3"></div> <div class="fog-wisp fog-w3"></div>
<div class="fog-wisp fog-w4"></div>
<div class="fog-wisp fog-w5"></div>
</div> </div>
<!-- Meteor layer (masked at horizon) --> <!-- Meteor layer (masked at horizon) -->