[experiment] feat: refactor Hero component to use WebGL background

[bjohansebas]

No description provided.

[netlify]

✅ Deploy Preview for expressjscom-preview ready!

Name	Link
🔨 Latest commit	524742b
🔍 Latest deploy log	https://app.netlify.com/projects/expressjscom-preview/deploys/69e3d81000b1ef0008fac10d
😎 Deploy Preview	https://deploy-preview-2246--expressjscom-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 99 (🟢 up 3 from production) Accessibility: 100 (🟢 up 13 from production) Best Practices: 100 (no change from production) SEO: 100 (🟢 up 6 from production) PWA: 80 (🟢 up 50 from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[ShubhamOulkar]

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.

[g-francesca]

@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.
I would probably investigate more on how to improve performance with this approach, or stick to the old approach.

[krzysdz]

@bjohansebas changing theme on mobile (and probably with prefers-reduced-motion) does not update the background after today's changes.
With WebGL disabled (e.g. lockdown mode on Apple devices) the fallback is a plain white/black background, but I think it still looks OK.

[bjohansebas]

@krzysdz fixed in #2283