How to align the horizon in the clouds example?

Hey, I've been using your animated clouds background as an easter egg on my frameworks site. I have a button that let's you switch between a blank background, a screenshot of the clouds animation, or the live animation.

So I took the screenshot on a Laptop with a small screen where the horizon is somewhat in the middle of the screen.

Now when I switch from background to animated, the animation neatly aligns with the background image when viewed on the same screen. Here's the live example: https://state-less.cloud. Just click on the magic wand icon in the top right two times.

On bigger (widescreen) screens the horizon jumps up and most of the viewport is covered in clouds.

I would like to have it centered, so half the screen is sky and the other half is clouds.

Is there some way I can have the horizon always in the center?