Post

This is awesome.

I don't think I'm a UI expert, but the browser gives us plenty of tools to look into the performance of the web. Profiling this page it looks to me like it's able to do a lot of the work on the GPU, which will be more efficient but it's still lots of work being done compared to your average page.

This profile was taken with me circling my mouse around the buttons. A bunch of GPU work being done, and then some animations being triggered any time I accidentally went _over_ a button. The red tags on some of them is attempts to animate box-shadow, which can't be composited (is more expensive).

Everything works smoothly at 20x CPU throttling but given a lot of work happens on the GPU that's not surprising. Frustrating we still can't throttle the GPU to properly emulate lower-end devices, but here we are. Given how cool this is, it doesn't look egregiously expensive to me.

Is there a depthmap of the button somewhere? How does the lighting model work?