Need Fluid Animations Refine !!!

[Kouki002]

Ok So For MacBook And Other Laptop Who Has 120hz Refresh Rate (Even 60hz Too) Display The Lyrics Animation Feel Leggy ! Its Beautiful And Leggy At Same Time 🥲 You Know How Annoying That You Find Great Thing That Its So Amazing But Not Well Refine ( Its So Annoying Its Such A Great Extension But Legs Smoothness 🫥) Please Refine This Extension As Soon As Possible And Bring The Great Experience Out Of It !!! I'm Developer Too If You Need Any Suggestion Or Help Let Me Know !!!

[surfbryce]

@Kouki002 It's already planned and is the next focus after the patch (see: https://github.com/surfbryce/beautiful-lyrics/issues/32).

I haven't provided updates since then on that exact issue, but I did solve the filter issue by using a custom GLSL shader function.

It's not higher priority than the Lyric service patches and home page breaking bugs since it doesn't affect everybody equally (most people it performs fine, others not so much). So the changes won't be made until June.

Btw, if you are a developer, I hope you can see how annoying it would be to manage your type of posts on a publicly hosted repository. Please do not just copy and paste and recreate your issue because I flagged yours as a duplicate (which it was). If you needed more clarification you could have simply mentioned me within the same issue and I could have responded there. Do not do this again, for the sake of everybody in the Issues tab.

[Kouki002]

so how you gonna plan to refine it and how gonna make it smoooother can you please tell me maybe i can help you with or atleast give you some tips

[surfbryce]

@Kouki002 It's basically already laid out in #32 and the code already written for it, I just need to apply the CSS again for it and then the additional filter.

It's not really difficult so I'll be doing the implementation myself. The current drag in performance was due to my initial misunderstanding over a year ago of how CSS transformations are applied. I thought that the blur filter would've been applied prior to scale, but instead it is applied after. So you end up with an image scaled up to 50% of the screen real estate that is then blurred. Rather than blurring then scaling up to that size.

The new implementation is rather simple, we just take the cover-art, pre-blur it, apply the GLSL filter to match the color filters from the Browser Renderer, and then cache this as a Resource URL and use this instead. Now we aren't blurring the image every frame and losing performance due to Spotify not utilizing GPU rendering; and instead, we are now utilizing Image instancing and doing no additional filter effects.

Still rendering images, but that itself is extremely fast, it's just the additional effects at the moment.

[Kouki002]

if you are using CSS that means you can use js too that means you can implement GSAP Too Aren't GSAP Or Anime.js Animation Will be more Fluid ?

[surfbryce]

@Kouki002 Two things:

1. JavaScript isn’t faster than CSS, CSS is processed on the Browser side, most effects will simply be faster there because it’s not interpolated. We have these motion graphic libraries so we don’t have to write all the keyframes out in CSS, and instead can control animation state and etc.
2. I don’t think you understand what GSAP or Anime.js do, they cannot do this effect because that’s not what they are for, it is mean for motion graphics and animation, like my heart like/unlike animations for example.The “fluid background” can only be done through a shader, or, in my case, can be simulated using blurred images (without having to use a shader)

[Kouki002]

ohhh i seee that browser side point its valid i got it !!! I Also Like CSS Its Easy and fun ! an yes GSAP Can Do That effect But Its Way Harder Than CSS I Mean As You Mention That You Don't Have To Make Every Keyframe Its Harder With GSAP And Any JS But Its Work Well With Windows Software If They Use It Spotify Windows Software But Whatever !!! You Are Doing Good Job !!! When Is You Next Patch Is Releasing ?