← NotesInterface
Keeping the animation cheap
Notes on the hero canvas, and what I cut to stop it costing anything.
The field behind the hero is one canvas. The first version was three layers and a particle system, and it dropped frames on my phone.
What I cut
- Multiple canvases. Everything draws to one element now.
- Uncapped device pixel ratio. It is clamped to 2, which is the difference between 1.4 million pixels and 5.6 million on a laptop.
- Drawing while off screen. An IntersectionObserver stops the loop, and a visibilitychange listener stops it when the tab is hidden.
What I kept
The parts that carry information: hover states that reveal metadata, a cursor that names what a click does, a rail that tracks where you are in the page. Everything that was only decorative got deleted, and the page is faster for it.
One thing I did not expect: theming the canvas was more work than the animation. Canvas cannot read CSS variables, so it resolves them once and listens for the theme attribute changing.