feat: welcome Kody :tada:

[jh3y]

Integrates a basis for Parallax hero images.

• Need to throw the sprite image up on Cloudinary. Currently, coming off of CodePen asset hosting.
• Sprite means we can configure lots of items using background-position and some trickery. That way we only need one image request 😎
• Totally can extend this to other hero sections and split up some other images, etc.
• Tweak config to what "feels" best
• Parallax components can be reused and can be passed in as part of HeroComponent.
• ⚠️ This doesn't include gyroscope exploration atm. Can do that in a follow up if it works.

https://user-images.githubusercontent.com/842246/136098525-0b1607b3-1c86-4bdc-a8a1-96cdfa55924a.mp4

[kentcdodds]

Hey @jh3y! This is really awesome! I do have some concerns though...

For one, it won't work well on mobile without the gyroscope thing which won't work without permissions :( I think we would want to disable it for mobile. Also I think we'd want to disable this when the user has configured reduced motion for their browser (like we'll want for the other animations on the site incidentally)

I'm also bugged by how it jumps into position based on where the mouse is. Would it be possible for it to smoothly arrive where it needs to be when the mouse appears on screen?

I think I'd like it to also reduce the amount of moving. I think it should be a bit more subtle.

And here's the big one. It's got some significant performance issues for lower-end devices

Though, thinking about this again, lower-end devices are mostly mobile where this would be disabled anyway so maybe that's fine 🤷‍♂️

[jh3y]

Hey Kent 👋

Let's have a think of what we can do then. I've made an attempt on some changes that I've tested out.

For one, it won't work well on mobile without the gyroscope thing which won't work without permissions :( I think we would want to disable it for mobile.

How are you detecting mobile currently in the repo? One way to do this in the CSS would be to have something like --allow-motion as a CSS custom property that acts as a Boolean coefficient. When @media (hover: none) then we know to disable the transformation and --allow-motion: 0; is effective.

Also I think we'd want to disable this when the user has configured reduced motion for their browser (like we'll want for the other animations on the site incidentally)

The --allow-motion: 0; trick works here too. I had made a note to add this but completely forgot it. Thanks for reminding me.

I'm also bugged by how it jumps into position based on where the mouse is. Would it be possible for it to smoothly arrive where it needs to be when the mouse appears on screen?

This one's tricky. One thing we can try is using transition on the segments, etc. I've added a transition of 0.25s to see how it feels.

I think I'd like it to also reduce the amount of moving. I think it should be a bit more subtle.

For a quick change, I've increased the coefficient values in the Parallax config from 0.5 to 1.5. This results in reduced movements.

And here's the big one. It's got some significant performance issues for lower-end devices

Could be handled by disabling for mobile. I imagine the repaint is causing an issue for some reason but transform updates should be using the GPU 🤔 Less moving parts would maybe improve this. The last resort could be moving the implementation to Canvas but this would take some time to migrate.

[jh3y]

Also, can we add hacktoberfest-accepted label to this PR? 🙏 👀

[jh3y]

The neat thing with this --allow-motion property is that it doesn't need to be binary.

As prefers-reduced-motion is exactly that, we can set the --allow-motion value to be something 0.1 instead of 0 which would mean a very slight movement still.

[jh3y]

No problem. I'll see how the sprites come out using those files. The only thing is that it takes a bunch of time to create the ParallaxItem config for each item as I'll need to map the positions again 👍 I'll get the white one done and we can see how it looks. Then the different colors should be just swapping out Kody.

[jh3y]

Made those changes 🚀

It took a few hours as I needed to create a new sprite with the higher-res images. I've created a new sprite that has all the Kody team colors and the KodyParallax now supports passing in the team color so the right Kody is shown in the parallax effect.

Had to go through all the items and remap the positions and sizes but it's looking about right now 🤞

[jh3y]

Hey @kentcdodds 👋 Awesome! No problem at all. The actual full resolution image is on Cloudinary here. That stitches together all of the full-res versions you gave me 👍 Then Cloudinary supplies the auto quality and format as usual. As long as the image dimensions/arrangement, don't change, it won't break anything 😎

[kentcdodds]

Thanks for this Jhey, but I decided to not go for it