[experiment] feat: refactor Hero component to use WebGL background#2246
[experiment] feat: refactor Hero component to use WebGL background#2246bjohansebas wants to merge 7 commits intoredesignfrom
Conversation
✅ Deploy Preview for expressjscom-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
I’ve tried a similar approach before using SVG with a continuous raf loop, and it ended up being quite heavy on the main thread especially for background animations.
A few concerns with this approach, continuous WebGL/canvas animation for a background is hurting performance, particularly on mobile and lower-end devices. There’s an initial blank state before the canvas renders, which is causing background blank visual flash. Replicating the current video background with code is time-consuming and hard to match visually (my main reason to skip svg implementation).
In general, these techniques are better suited for interactive elements, not passive backgrounds. For a quick check, just open the preview and monitor GPU usage you’ll likely notice the difference immediately. I’d recommend sticking with the current 1st load image then show video based approach ensures measurable performance gains.
|
@bjohansebas the visual effect looks nice to me! Still, I see that there's a drop in performance/increased GPU cost. Also, I see there's no way to play/pause the animation. |
3 participants
No description provided.