Thanks for highlighting that. Prettier was actually the culprit because of the non-JS `^` operator. Fixed it.
Trust me, you don't want to see the source code right now. But I'll do another article and possibly open-source a library of it.
That will be one of the goals of one of my next articles. But it cannot be implemented like Apple does (with a delay on switch between dark and light). What is possible though is to get an average of the current image…
It is a simple React + Motion + Tailwind + Vanilla SVG here. But it was just a first try, lots of things are still unoptimized. I'll try to do better in a next article.
I considered WebGL, and I agree—a shader is more performant for real-time effects. But WebGL comes with drawbacks: - You need JS code running before anything shows up. - Shaders can’t directly manipulate the DOM render.…
I did a quick performance fix, should be a bit better, at least on Chrome. (Safari stills seems to be a bit slow to render SVGs) Anyway, I did not expect this blog post to be on HN, so still things to improve on it.
I used React with vanilla SVG and Motion to animate.
Haha, I’m the author of the post. I planned to fix the performance issues before posting here (since I knew HN would be quick to point that out), but somebody posted it first. You’re absolutely right — it’s pretty slow…
Thanks for highlighting that. Prettier was actually the culprit because of the non-JS `^` operator. Fixed it.
Trust me, you don't want to see the source code right now. But I'll do another article and possibly open-source a library of it.
That will be one of the goals of one of my next articles. But it cannot be implemented like Apple does (with a delay on switch between dark and light). What is possible though is to get an average of the current image…
It is a simple React + Motion + Tailwind + Vanilla SVG here. But it was just a first try, lots of things are still unoptimized. I'll try to do better in a next article.
I considered WebGL, and I agree—a shader is more performant for real-time effects. But WebGL comes with drawbacks: - You need JS code running before anything shows up. - Shaders can’t directly manipulate the DOM render.…
I did a quick performance fix, should be a bit better, at least on Chrome. (Safari stills seems to be a bit slow to render SVGs) Anyway, I did not expect this blog post to be on HN, so still things to improve on it.
I used React with vanilla SVG and Motion to animate.
Haha, I’m the author of the post. I planned to fix the performance issues before posting here (since I knew HN would be quick to point that out), but somebody posted it first. You’re absolutely right — it’s pretty slow…