feat(ui): setup screen mouse parallax effect

[peps]

This adds a parallax effect to the setup section that reacts to the user's mouse. This adds a cool 3D effect and something to play around with while the setup screen is loading.

I also downsized and optimized the setup section images, so the performance impact and bundle size should be reduced.

Video demo:

https://www.loom.com/share/d40c35bb063245379a843328eeaa6a71?sid=82795738-c99e-49c7-93b4-9cbc8add0c81

[shanimal08]

yeeet very cool!

[brianp]

I'm going to need someone to profile this. @shanimal08

[shanimal08]

I'm going to need someone to profile this. @shanimal08

it should be all good, using useMotionValue not useState, i was thinking this one goes in first and i can double check after updating my PR?

[brianp]

@peps I'm going to leave this PR open because it's nice. The front end is currently eating a lot of memory in different places. This UX effect almost doubles memory usage during the setup screen. It does at least release the memory when we go to the main screen (where other things do not), but for now a doubling in memory isn't worth the UI benefit. If we can shrink the existing footprint I'll reconsider putting this in.

[peps]

@brianp I've made a few performance improvements.

• Combined the 2 useMotionValue calls into 1 object
• Moved some arrays and objects outside of the component so they don't calculate on every re-render
• throttle the mouse movement by limiting it with requestAnimationFrame. So the mouse position is calculated at 60fps and doesn't trigger more times then needed.

It's strange that you're seeing double the memory usage. That shouldn't be the case. I heavily optimized the images on the setup screen so it should take up less memory than the previous build. Maybe the previous images are cached in memory?