remove lyrics blur animation

This commit is contained in:
jeffvli
2026-07-10 10:16:14 -07:00
parent 5cfb80f75b
commit 7c1893f7f5
4 changed files with 13 additions and 32 deletions
@@ -10,10 +10,7 @@
opacity: var(--lyric-opacity); opacity: var(--lyric-opacity);
transform: scale(var(--lyric-scale)); transform: scale(var(--lyric-scale));
transform-origin: var(--lyric-scale-origin) center; transform-origin: var(--lyric-scale-origin) center;
transition: transition: transform 0.166s var(--karaoke-anim-delay, 0s);
filter calc(var(--karaoke-line-duration, 1s) / 3) 0.4s,
opacity calc(var(--karaoke-line-duration, 1s) / 2) 0.166s,
transform 0.166s var(--karaoke-anim-delay, 0s);
will-change: transform; will-change: transform;
} }
@@ -21,7 +18,6 @@
.karaoke-line:global(.lyrics-line-animating), .karaoke-line:global(.lyrics-line-animating),
.karaoke-line:global(.lyrics-line-pre-animating) { .karaoke-line:global(.lyrics-line-pre-animating) {
opacity: 1 !important; opacity: 1 !important;
filter: blur(0);
transform: scale(1); transform: scale(1);
} }
@@ -7,10 +7,7 @@
opacity: var(--lyric-opacity); opacity: var(--lyric-opacity);
transform: scale(var(--lyric-scale)); transform: scale(var(--lyric-scale));
transform-origin: var(--lyric-scale-origin) center; transform-origin: var(--lyric-scale-origin) center;
transition: transition: transform 0.166s var(--karaoke-anim-delay, 0s);
filter calc(var(--karaoke-line-duration, 1s) / 3) 0.4s,
opacity calc(var(--karaoke-line-duration, 1s) / 2) 0.166s,
transform 0.166s var(--karaoke-anim-delay, 0s);
will-change: transform; will-change: transform;
} }
@@ -19,7 +16,6 @@
.lyric-line:global(.lyrics-line-pre-animating), .lyric-line:global(.lyrics-line-pre-animating),
.lyric-line:global(.active) { .lyric-line:global(.active) {
opacity: 1 !important; opacity: 1 !important;
filter: blur(0);
transform: scale(1); transform: scale(1);
} }
@@ -11,36 +11,32 @@
initial-value: 0; initial-value: 0;
} }
/* Container-level line context blur/fade (karaoke sync only) */ /* Past (sung) lines stay fully visible */
.synchronized-karaoke-lyrics:has(.lyrics-line-active) .synchronized-karaoke-lyrics:has(.lyrics-line-active)
:is(.karaoke-line, .lyric-line):not( :is(.karaoke-line, .lyric-line):not(
.lyrics-line-active, .lyrics-line-active,
.lyrics-line-active ~ :is(.karaoke-line, .lyric-line) .lyrics-line-active ~ :is(.karaoke-line, .lyric-line)
) { ) {
opacity: var(--lyric-opacity, 0.3); opacity: 1;
filter: blur(2.5px); filter: none;
} }
.synchronized-karaoke-lyrics :is(.karaoke-line, .lyric-line).lyrics-line-active { .synchronized-karaoke-lyrics :is(.karaoke-line, .lyric-line).lyrics-line-active {
opacity: 1 !important; opacity: 1 !important;
filter: blur(0);
} }
.synchronized-karaoke-lyrics:has(.lyrics-line-active) .synchronized-karaoke-lyrics:has(.lyrics-line-active)
:is(.karaoke-line, .lyric-line).lyrics-line-active :is(.karaoke-line, .lyric-line).lyrics-line-active
~ :is(.karaoke-line, .lyric-line) { ~ :is(.karaoke-line, .lyric-line) {
opacity: var(--lyric-opacity, 0.3); opacity: var(--lyric-opacity, 0.3);
filter: blur(0);
} }
.synchronized-karaoke-lyrics :is(.karaoke-line, .lyric-line).lyrics-line-animating { .synchronized-karaoke-lyrics :is(.karaoke-line, .lyric-line).lyrics-line-animating {
opacity: 1 !important; opacity: 1 !important;
filter: blur(0) !important;
} }
.synchronized-karaoke-lyrics :is(.karaoke-line, .lyric-line):hover { .synchronized-karaoke-lyrics :is(.karaoke-line, .lyric-line):hover {
opacity: 1 !important; opacity: 1 !important;
filter: blur(0) !important;
} }
/* Word highlight via stacked text twin + gradient swipe */ /* Word highlight via stacked text twin + gradient swipe */
@@ -148,7 +144,11 @@
} }
.karaoke-word.sung .karaoke-word-highlight { .karaoke-word.sung .karaoke-word-highlight {
opacity: 0; opacity: 1;
transition: none;
--lyric-transition-amount-start: 1.4;
--lyric-transition-amount-end: 1.5;
} }
.karaoke-word ruby { .karaoke-word ruby {
@@ -1,33 +1,22 @@
/* Container-level line context blur/fade (line-sync only) */ /* Past (sung) lines stay fully visible */
.synchronized-lyrics .lyric-line {
transition:
filter 0.2s ease,
opacity 0.2s ease,
transform 0.2s ease;
}
.synchronized-lyrics:has(.lyrics-line-active) .synchronized-lyrics:has(.lyrics-line-active)
.lyric-line:not(.lyrics-line-active, .lyrics-line-active ~ .lyric-line) { .lyric-line:not(.lyrics-line-active, .lyrics-line-active ~ .lyric-line) {
opacity: var(--lyric-opacity, 0.3); opacity: 1;
filter: blur(2.5px); filter: none;
} }
.synchronized-lyrics .lyric-line.lyrics-line-active { .synchronized-lyrics .lyric-line.lyrics-line-active {
opacity: 1 !important; opacity: 1 !important;
filter: blur(0);
} }
.synchronized-lyrics:has(.lyrics-line-active) .lyric-line.lyrics-line-active ~ .lyric-line { .synchronized-lyrics:has(.lyrics-line-active) .lyric-line.lyrics-line-active ~ .lyric-line {
opacity: var(--lyric-opacity, 0.3); opacity: var(--lyric-opacity, 0.3);
filter: blur(0);
} }
.synchronized-lyrics .lyric-line.lyrics-line-animating { .synchronized-lyrics .lyric-line.lyrics-line-animating {
opacity: 1 !important; opacity: 1 !important;
filter: blur(0) !important;
} }
.synchronized-lyrics .lyric-line:hover { .synchronized-lyrics .lyric-line:hover {
opacity: 1 !important; opacity: 1 !important;
filter: blur(0) !important;
} }