Animated first screen that loads fast on a phone

Task. A headphone brand (invented for this demo) wants a first screen people remember, but live effects usually make a site heavy and slow on phones.

Solution. A living gradient and a liquid-metal logo on the first screen, followed by ordinary fast sections. Visitors first see an image of the same frame, and the effect's code loads after the page. On weak phones, with data saver on or with reduced motion, the effect code isn't loaded at all.

Measured on a phone profile over slow 4G: the main content appears in 0.8 s with the effect and without it. The page is 79 KB before load, and the effect adds 79 KB after. Adding this to a new site costs 120 USD, or 180 USD on an existing one.

Live demo: https://flowlab-dev.github.io/demo/wow-hero/