Add animated 3D banner

[ffeltrinelli]

Replace the existing static hero banner with an animated 3D banner using three.js and related libraries.

[ffeltrinelli]

Hi @worldtiki @nikos912000 ! These days I was having a look at three.js, which is a nice JS library to make 3D graphics on a web browser.

I'm thinking it could be a nice touch to replace the static image-based hero banner we have on the website with a 3D animation. This is a starting point: https://codesandbox.io/s/github/ffeltrinelli/expedia-3d-banner

What do you think about this idea? Suggestions?

[ffeltrinelli]

I've added a couple of animated 3D stars, to recall the idea of GitHub starred projects :-)

[worldtiki]

Would these be replacing the hero images of each individual project?

[ffeltrinelli]

My idea was to replace the hero banner on top of the home page:

[ffeltrinelli]

We could also add a water effect and make the text go up and down in the water, like the cube in this example :-D https://threejs.org/examples/webgl_shaders_ocean.html

[worldtiki]

Ok. But lets try to keep the animations subtle.

[ffeltrinelli]

Yes, I see what you mean 👍

[ffeltrinelli]

This is the result of my work so far:

https://user-images.githubusercontent.com/44259532/187042369-9790b74a-15a3-4ff0-82db-1a1610f14630.mp4

Let me know what you think about it!

I have to double check a couple of things:

1. The CPU usage is a bit high, I'll check ways to reduce it. One way is to run the animation for few seconds, then just stop it.
2. The text in the banner is not responsive: it doesn't adapt to the screen width, I've just made it short enough to fit into small devices. I'll check ways to improve this.