feat: fog animation

[samderanova]

This adds a native CSS fog animation to the landing section. See #27 for more details.

[github-actions]

Deploy preview for irvinehacks-site-2024-sanity ready!

Name	Sanity Studio
Preview	Visit Preview
Commit	05caf20

[github-actions]

Deploy preview for irvinehacks-site-2024 ready!

Name	IrvineHacks 2024 Site
Preview	Visit Preview
Commit	05caf20

[tyleryy]

Fog animation has horizontal overflow.

[tyleryy]

I think it looks good, but just a suggestion that you don't have to take--you can use clouds from react three fiber (ref). And then for the animation you can either move the clouds or the camera. You can also maybe make the fog really faint and have it sit on the whole page like a foggy day. Might pair well with fireflies and theme aesthetically and technically since we are already using WebGL. This is a design aspect and not essential, so how it is now is also good.

[samderanova]

Interesting! The clouds look cool, but I'm not sure if they really match with the current theme. I also just resolved the horizontal overflow by disabling it.

[tyleryy]

Oh the clouds are actually multiple of that component on top each other. So u can just remove the layers and make it flat and then adjust opacity or whatever props are in that component to make it look like fog.

[tyleryy]

Also another idea, in another PR, do u want to make this a whileInView scroll animation? Like user scrolls and the fog separates as the scroll down?

[samderanova]

I don't think that would be good in terms of user experience because if someone want to view the content on the landing screen, they would have to scroll in order to do so and by then, the landing would be out of view.