feat: landing - animate hero

[olarclara]

Closes CSB-1862.

What kind of change does this pull request introduce?

Animates the landing page hero on desktop.

What is the current behavior?

What is the new behavior?

What steps did you take to test this? This is required before we can merge, make sure to test the flow you've updated.

Verified animations on the following browsers:

1. Chrome
2. Safari
3. Firefox

Performance verification on Chrome.

Checklist

• Ready to be merged
  

[linear]

CSB-1862 Hero: Implement the animation and transition

[zehfernandes]

Awesome work @olarclara! Pretty smooth, and the FPS is not dropping below 30. Thanks for all the effort 🎉👏👏

I have two comments that are important to fix:

1. The Sandpack component is flicking on the screen before the hero. We should prioritize the first paint to be the full hero:
   

   flick.mp4

2. If I stop scrolling earlier and edit the code, I can't see my changes. Maybe we can force the swap or force a scrollTo to the position that the editing is fully working.
   

   edit.mp4

[olarclara]

@zehfernandes thank you! the fouc shold be fixed now. I'll take a shot at fixing the latter issue tomorrow, probably in another PR.

hero_fouc_fix.mov

[danilowoz]

Very impressive work @olarclara!

[danilowoz]

It should have been fixed in another PR, so feel free to remove it

[danilowoz]

Love this approach

[olarclara]

it was @marcovincit's idea to define all the variables in a single place, it looks super neat and improves perceived performance 🙌🏽

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

sandpack-theme – ./website/theme

🔍 Inspect: https://vercel.com/codesandbox/sandpack-theme/FhC1Fr6H51sgM435mm1mmVAd33V2
✅ Preview: Failed