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

fix: eliminate verse-transition flicker by deferring opacity until position is snapped

Browse source 
Also switch lyric lines to word-wrap layout with a translateY inner
container, so long lines wrap instead of being cut with ellipsis.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ltadeu6 2026-06-08 18:09:15 -03:00
parent 4c4b1bbb96
commit 02edf4d9af
No known key found for this signature in database
GPG key ID: FB9FDAB6B6F3418D
1 changed files with 47 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -244,7 +244,7 @@ html, body {
left: 2%;
top: 4%;
width: 38%;
height: 150px; /* 5 visible slots × 30px */
height: 150px;
overflow: hidden;
pointer-events: none;
opacity: 0;
@ -252,19 +252,21 @@ html, body {
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}
.lyric-inner {
position: relative;
will-change: transform;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.lyric-ctx {
position: absolute;
left: 0;
display: block;
width: 100%;
height: 30px;
line-height: 30px;
font-family: 'Courier New', monospace;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
word-break: break-word;
line-height: 1.4;
padding: 4px 0;
transition:
top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.45s ease,
font-size 0.35s ease,
color 0.35s ease,
@ -897,7 +899,7 @@ html, body {
</div>
<!-- Lyrics display — verse karaoke -->
<div class="lyric-display" id="lyricDisplay"></div>
<div class="lyric-display" id="lyricDisplay"><div class="lyric-inner" id="lyricInner"></div></div>
<!-- Scanlines overlay -->
<div class="scanlines"></div>
@ -1173,24 +1175,22 @@ function applyTheme(rgb) {
const albumArtEl = document.getElementById('albumArt');
const fogWisps = document.querySelectorAll('.fog-wisp');
const lyricDisplay = document.getElementById('lyricDisplay');
const lyricInner = document.getElementById('lyricInner');
let lastArtUrl = '';
/* ── verse display ── */
const SLOT_H = 30;
const CENTER_PX = 60; // top of the active slot within the 150px container
const ACTIVE_SHADOW =
'0 0 18px var(--theme-color,rgba(0,200,255,0.85)),' +
'0 0 6px var(--theme-color,rgba(0,200,255,0.5)),' +
'0 2px 10px rgba(0,0,0,0.95)';
const VERSE_STYLES = [
{ opacity:'0.2', fontSize:'clamp(11px,0.85vw,13px)', color:'#777', shadow:'' }, // dist -2
{ opacity:'0.48', fontSize:'clamp(13px,1.0vw,15px)', color:'#bbb', shadow:'' }, // dist -1
{ opacity:'1', fontSize:'clamp(16px,1.3vw,18px)', color:'#fff', shadow: ACTIVE_SHADOW }, // dist 0
{ opacity:'0.48', fontSize:'clamp(13px,1.0vw,15px)', color:'#bbb', shadow:'' }, // dist +1
{ opacity:'0.2', fontSize:'clamp(11px,0.85vw,13px)', color:'#777', shadow:'' }, // dist +2
{ opacity:'0.2', fontSize:'clamp(11px,0.85vw,13px)', color:'#777', shadow:'' },
{ opacity:'0.48', fontSize:'clamp(13px,1.0vw,15px)', color:'#bbb', shadow:'' },
{ opacity:'1', fontSize:'clamp(16px,1.3vw,18px)', color:'#fff', shadow: ACTIVE_SHADOW },
{ opacity:'0.48', fontSize:'clamp(13px,1.0vw,15px)', color:'#bbb', shadow:'' },
{ opacity:'0.2', fontSize:'clamp(11px,0.85vw,13px)', color:'#777', shadow:'' },
];
let verseEls = [];
@ -1198,38 +1198,46 @@ let currentVerseKey = '';
let currentVerseActive = -1;
function applyVerseStyle(el, dist) {
if (dist < -2 || dist > 2) {
el.style.opacity = '0'; el.style.fontSize = 'clamp(11px,0.85vw,13px)';
el.style.color = '#777'; el.style.textShadow = ''; return;
}
const p = VERSE_STYLES[dist + 2];
const p = VERSE_STYLES[dist + 2] || { opacity:'0', fontSize:'clamp(11px,0.85vw,13px)', color:'#777', shadow:'' };
el.style.opacity = p.opacity;
el.style.fontSize = p.fontSize;
el.style.color = p.color;
el.style.textShadow = p.shadow;
}
function positionVerseEls(verse_active) {
verseEls.forEach((el, i) => {
const dist = i - verse_active;
el.style.top = (CENTER_PX + dist * SLOT_H) + 'px';
applyVerseStyle(el, dist);
});
function centerActive(verse_active) {
const activeEl = verseEls[verse_active];
if (!activeEl) return;
const y = lyricDisplay.offsetHeight / 2 - activeEl.offsetHeight / 2 - activeEl.offsetTop;
lyricInner.style.transform = `translateY(${y}px)`;
}
function buildVerse(verse_lines, verse_active) {
lyricDisplay.innerHTML = '';
function positionVerseEls(verse_active) {
verseEls.forEach((el, i) => applyVerseStyle(el, i - verse_active));
centerActive(verse_active);
}
function buildVerse(verse_lines, verse_active, onReady) {
lyricInner.innerHTML = '';
lyricInner.style.transition = 'none';
lyricInner.style.transform = 'translateY(0)';
verseEls = verse_lines.map(text => {
const el = document.createElement('div');
el.className = 'lyric-ctx';
el.textContent = text;
el.style.transition = 'none';
lyricDisplay.appendChild(el);
lyricInner.appendChild(el);
return el;
});
positionVerseEls(verse_active);
verseEls.forEach((el, i) => applyVerseStyle(el, i - verse_active));
requestAnimationFrame(() => requestAnimationFrame(() => {
lyricInner.style.transition = 'none';
centerActive(verse_active);
verseEls.forEach(el => { el.style.transition = ''; });
requestAnimationFrame(() => {
lyricInner.style.transition = '';
if (onReady) onReady();
});
}));
}
@ -1248,12 +1256,14 @@ function updateLyricVerse(verse_lines, verse_active) {
if (lyricDisplay.style.opacity === '1') {
lyricDisplay.style.opacity = '0';
setTimeout(() => {
buildVerse(verse_lines, verse_active);
lyricDisplay.style.opacity = '1';
buildVerse(verse_lines, verse_active, () => {
lyricDisplay.style.opacity = '1';
});
}, 500);
} else {
buildVerse(verse_lines, verse_active);
lyricDisplay.style.opacity = '1';
buildVerse(verse_lines, verse_active, () => {
lyricDisplay.style.opacity = '1';
});
}
} else if (verse_active !== currentVerseActive) {
currentVerseActive = verse_active;