An energy hero — a first-screen animation in WebGL

The constraints are those of any first screen: the copy stays real text (search engines and screen readers read it), the button stays a real button, the animation plays once and does not get in the way of reading, and without WebGL or with reduced motion the block shows the final frame straight away. And two scenes: a desktop one from a 1200×493 mockup and a phone one from a 320×620 mockup, where the mark sits under the button and the stream of words runs upwards.

In this version the client's mark is replaced with ours — the letter g: the engine bakes its fill maps from any SVG, so the mark is swapped by a file.

The work

• the scene is ten phases on a timeline: start, ignition, charge, pulse, wave with the words, hold, gather, stream, button impact and dissolve. The phases run in a chain, each with a duration and an offset from the end of the previous one; a negative offset makes them overlap. Every frame is a function of time, so the scene can be stopped at any moment and scrubbed back and forth;
• the energy is born in a hot core inside the mark and fills it along its shape: the front follows the geodesic distance inside the outline rather than a circular wipe. A worker bakes the maps from the mark's mask. The fill was first worked out as a separate engine on a placeholder — a triangle with a triangle cut out of it: on a ring it is obvious at once whether the front really follows the shape — and it went into the scene in a square around the mark, with rotation, charging and a colour for the dormant mark;
• the pulse is a single ring from the mark across the whole block, decelerating, with sparks on its front. Each word lights up exactly when the front reaches it: the letters flare, glints run over them, and the markers to the left of the words light a yellow dot;
• the words break loose and fly to the button like comets along a curved lane — behind the mark rather than across it. On the way they dissolve into a cloud of particles that lags and loosens, and the markers scatter into sparks;
• the button is an HTML element. The wave fills it with a yellow circle centred on the mark — the same radius as the front on the canvas, so the fill edge on the button matches the light around it. Before the fill, energy shimmers inside; after the impact a halo and an occasional blink remain;
• at the end the live mark dissolves into the static copy from the mockup with its soft yellow shadow — the frame after the animation matches the mockup;
• the site build is a single script with no dependencies plus a stylesheet: the scene starts when at least a third of the block is visible and the tab is active; crossing the 960 px width swaps the scene, and the animation is not shown a second time.

The result

The header of this page is the same scene at full screen, the way it sits as a website's first screen: a real headline, description and Discuss a project button on the left — the button leads to the contacts at the bottom of the page — and the mark with the words on the right. The animation lives on top of ordinary markup and does not touch it: the copy and the button stay HTML, while a transparent canvas draws the light, the wave and the particles. The mockup layout is centred on a screen of any proportions, and a phone gets its own scene from the second mockup.

Below is the lab the scene was put together in, on the card from the original mockup: all ten phases with offset and duration, speed, loop, freeze frame and Scene moment, which stops the scene at any fraction of a second — and over a hundred parameters of the fill, the wave, the words, the stream and the button.