Blurred album cover as lyrics background

[SunsetTechuila]

What do you think? I'm not sure if it is better than it was

Just PoC, noting more

[SunsetTechuila]

[SunsetTechuila]

https://github.com/SunsetTechuila/spicetify-bloom/tree/lyrics-test - test version
Will be waiting for response

[nimsandu]

@SunsetTechuila Well that looks good.
But my personal belief is that lyrics page is better when it's readability is higher and more cleaner. If someone needs a better lyrics page then it can be fulfilled by lyrics extension and full screen extension.
So what I believe is that we should keep the original lyrics page cleaner for users who are focused in readability rather than stunning ui.

Please note that this is my personal opinion and all bloomers' beliefs are welcome. Only those suggestions will be considered rather than mine

[SunsetTechuila]

Sometimes it is even more readable than the original:

Try the test version please when you have time

[nimsandu]

@SunsetTechuila Sure, ill test it out asap.
Thanks

[nimsandu]

@SunsetTechuila i have tested your implementation and i immediately started to love it.
i have few suggestions regarding your work.
can we change

• background blend mode form darken to color-burn this improve the readability with light color album arts
• change saturation from 0.8 to 2 this makes background more pleasant while blend mode is set to color-burn

preview 1

this is the original view

this is the new look

preview 2

this is the original view

this is the new look

preview 3

this is the original view

this is the new look

@SunsetTechuila what do you think?

[SunsetTechuila]

Glad to hear that you liked it, so I'll do the optimization and animations and let you know when I'm done.
About your suggestions - they are really cool, a bit less saturation and contrast and would be perfect, thanks

[nimsandu]

Glad to hear that you liked it, so I'll do the optimization and animations and let you know when I'm done.

About your suggestions - they are really cool, a bit less saturation and contrast and will be perfect, thanks

Roger that

[SunsetTechuila]

Ah, so color-burn itself causes excessive contrast, this is the algorithm. I can suggest to change background-color to #808080 instead . Apple Music has about the same brightness threshold (50% brightness on hsb)

[SunsetTechuila]

or we could just add brightness(0.7) to filters, I have no idea how to make bright colors darker keeping the saturation

[SunsetTechuila]

We definitely can't use color-burn because it makes artwork too dark sometimes, play this album. I tried to add contrast(0.9), but it still looks bad.
It is really hard to find universal solution

[SunsetTechuila]

and I question - what will be better in your opinion - keep the backdrop scrollable or make it fixed?

[SunsetTechuila]

made it fixed btw

[SunsetTechuila]

@nimsandu I've fixed lags, but I'm pretty sure I did everything stupid. If you know someone who can rewrite my code, please ask him. It works fine, but still

[nimsandu]

@SunsetTechuila I don't see anything stupid btw

[SunsetTechuila]

The backdrop is inserted before the os-padding element, so it is always visible, which is why I added visibility changing. It doesn't look like good design

[SunsetTechuila]

I rewrote the code using a separate MutationObserver for the right player bar panel, but the rest is unchanged

[SunsetTechuila]

If you have any ideas how to make backdrop sticky inside lyrics container - tell me please

[nimsandu]

and I question - what will be better in your opinion - keep the backdrop scrollable or make it fixed?

Fixed is better ig

[SunsetTechuila]

@nimsandu branch has been updated - new animations, some fixes and improvements

[SunsetTechuila]

Unless I jump out the window out of anger that nothing is working, of course)

[nimsandu]

Don't jump out from the window unless you can survive😂!
We need you.
Seriously don't panic or miss your personal works. Take your time. It all yours.

[SunsetTechuila]

I felt it kinda crispy.

try now

[SunsetTechuila]

Yeah, it seems that the animations for lyrics have been completed. Whew 🫠
Now it's time for animations for the lyrics backdrop

[SunsetTechuila]

Now it's time for animations for the lyrics backdrop

Test variant added

[SunsetTechuila]

@nimsandu please test the current version

[nimsandu]

no matter what i do i keep getting this other than your creation! still couldn't understand why!

[SunsetTechuila]

Did you edit user.css too?

[nimsandu]

yes i did.

[nimsandu]

ill start over and check again asap

[SunsetTechuila]

maybe wrong branch then? You need https://github.com/SunsetTechuila/spicetify-bloom/tree/lyrics-test

[nimsandu]

@SunsetTechuila it works!
i mean its a w[o^(10^100)]w!
the transition is brilliant!
everything works fine!

[nimsandu]

@SunsetTechuila what you think about this configs

lyrics-lyricsContent-lyric:active { transform: scale(0.97); transition: transform 50ms cubic-bezier(1, 0.04, 1, 1) 0s; }
.lyrics-lyricsContent-lyric:active::after { transform: scale(1); transition: transform 50ms cubic-bezier(0.22, -0.02, 0.34, 0.91) 0s; }
.lyrics-lyricsContent-highlight, .C3pBU1DsOUJJOAv89ZFT { color: rgba(255, 255, 255, 0.75) !important; }
.lyrics-lyricsContent-highlight.previous, .lyrics-lyricsContent-lyric.previous { animation: 450ms cubic-bezier(0.88, -0.01, 0.46, 1.04) 0s 1 normal forwards running lyric-previous; }
.lyrics-lyricsContent-unsynced, .lyrics-lyricsContent-active, .lyrics-lyricsContent-lyric:hover { color: rgb(255, 255, 255) !important; }
.lyrics-lyricsContent-active { animation: 400ms cubic-bezier(0.6, 0.19, 0.63, 0.95) 0s 1 normal forwards running lyric-active; }

[SunsetTechuila]

the click animation is sharp and the acceleration of the lyric-previous and lyric-active animations at the end is unnecessary for my taste, sorry

[nimsandu]

@SunsetTechuila it's all right. cuz it's all yours!

[nimsandu]

love your work!

[SunsetTechuila]

so I can make PR?

[nimsandu]

yap.
everything looks good!
waiting for the pr.
it was a nice project with you.
now it's time to for it to bloom.
thanks @SunsetTechuila !

[nimsandu]

#213 merged successfully!
enjoy new lyrics style while blooming!
credit @SunsetTechuila !