Place a rotating globe in center of background on welcome page
Now I'll add a rotating globe canvas in the center of the background. I'll create a second canvas for the wireframe globe effect that sits behind the content.
I've added a rotating wireframe globe to the center of the welcome page background. The globe features red latitude and longitude lines that rotate smoothly, with glowing dots at grid intersections that fade based on depth. It sits on a separate canvas layer between the pixel animation and the content, with a subtle outer glow effect to give it depth. The globe's size is responsive, scaling to 25% of the smaller screen dimension.
Takeaway divs on welcome page and move globe of the earth rotating under the texts that has typing effect.
I've removed the translucent red curved divs from around the title and tagline text on the welcome page - the text now displays directly without any wrapper boxes. I've also repositioned the rotating globe to sit lower on the screen (at 60% of the viewport height) so it appears beneath the typing text, creating a better visual hierarchy with the text above and the globe rotating below it.