WebGL without killing performance
You can ship a beautiful animated hero and still hit a 100 Lighthouse score. Here is the budget I work within.
Motion sells, but jank loses. The goal is a hero that feels alive without stealing the milliseconds that decide whether a visitor stays.
Progressive enhancement, always
The content renders first as plain server-side HTML. The WebGL layer hydrates on top of it, so the page is readable and indexable long before a single shader compiles.
Respect the device
Cap the pixel ratio, pause the render loop off-screen, and honor prefers-reduced-motion. A phone on battery should never run the same loop as a desktop GPU.
- Clamp devicePixelRatio to 2.
- Stop rendering when the canvas leaves the viewport.
- Provide a static fallback for reduced-motion users.
Performance is a feature. A 100 score with motion intact is a design constraint, not a trade-off.
Related posts
Building a CRM clients actually use
Most CRMs fail not because of missing features, but because they model someone else’s workflow. Here is how I model the real one first.
Predicate pushdown, explained simply
How moving filters closer to storage turned a 90-second query into an 8-second one — without buying a single extra server.
ERP modules that share one ledger
The difference between an ERP and four spreadsheets in a trench coat is a single shared ledger. Here is why that matters.