kubeio

3 ms·

1. 1.▲
   by kubeio 1y ago

   Thanks for highlighting that. Prettier was actually the culprit because of the non-JS `^` operator. Fixed it.
2. 2.▲
   by kubeio 1y ago

   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.
3. 3.▲
   by kubeio 1y ago

   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 behind the object and
4. 4.▲
   by kubeio 1y ago

   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.
5. 5.▲
   by kubeio 1y ago

   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. To make refraction w
6. 6.▲
   by kubeio 1y ago

   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.
7. 7.▲
   by kubeio 1y ago

   I used React with vanilla SVG and Motion to animate.
8. 8.▲
   by kubeio 1y ago

   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 right now and needs o