My intuition was that most of the (transferred) 11MB would be images, but no! Of course it's JavaScript bundles: https://i.imgur.com/QoM0Mz5.png
I'm guessing most of that code is used for other things on the website/landing page (SPA without bundle splitting per page), and the same stuff is loaded for every page, since the code for building that would be trivial compared to the multiple large bundles like they're shipping right now.
Which kind of makes me think, what is the smallest amount of JS one could write to 100% replicate this page? Would <1KB be enough? Bonus points if it could be implemented with CSS only, under 1KB.
It reacts with the visibility state, so no JS seems impossible. [ADDED:] Besides from the obvious mouse interaction, [/ADDED] everything else should be implementable in CSS I believe.
How would you implement that scrolling background? Particularly the mouse interaction, where it scrolls with a dynamic speed ( depending on how far to the side the mouse it) and even has some smooth damping when you stop scrolling.
And what part uses the visibility state? The grayscale seems to be triggered by focus which I think would be doable with CSS
Ah, I forgot that (everything except for the interaction should be okay, though). For the visibility state however, checking for focus is insufficient because you can have elements focused without the document being visible.
I'm guessing most of that code is used for other things on the website/landing page (SPA without bundle splitting per page), and the same stuff is loaded for every page, since the code for building that would be trivial compared to the multiple large bundles like they're shipping right now.
Which kind of makes me think, what is the smallest amount of JS one could write to 100% replicate this page? Would <1KB be enough? Bonus points if it could be implemented with CSS only, under 1KB.