🪐

Cosmic Wormhole Login

A login page suspended inside a cosmic wormhole tunnel with swirling star streams, nebula gas clouds, and a gravitational lens effect around the form.

logincosmicwormholespacecanvasinteractiveui

Cosmic Wormhole Login Page

The Cosmic Wormhole Login suspends a glassmorphism login card inside a swirling cosmic tunnel. 500 individually animated star particles stream through a wormhole corridor, while nebula gas clouds and perspective tunnel rings create extraordinary depth.

Wormhole Star Tunnel

Each of the 500 stars has unique orbital parameters — angle, radius, speed, and color hue — creating a convincing faster-than-light wormhole effect. Stars leave colored trails as they accelerate toward the viewer, with depth-based brightness scaling.

3D Card Interaction

The login card responds to mouse movement with full perspective 3D tilting (rotateX/rotateY), creating a holographic floating effect. Three concentric orbital rings surround the card (normal, dashed reverse, and outer), adding celestial motion to the composition.

Frequently Asked Questions

How is the wormhole tunnel created?

Stars orbit in 3D space with a z-depth system. As z decreases, perspective scaling increases, projecting stars outward from the center — creating the classic tunnel rush effect.

Can I change the color scheme?

The current palette uses deep purples and blues (HSL 240-300). Adjusting the star hue range and nebula colors allows you to create tunnels in any cosmic palette.

Does the card float animation interfere with the mouse tilt?

No. The floating animation uses CSS translateY while mouse tilt uses CSS rotateX/rotateY, so they compose seamlessly without conflict.

Related Animations

Built by

Lawanya Chaudhari - Software Developer

Lawanya Chaudhari

Software Developer

I'm a Software Developer specializing in Angular, JavaScript, and TypeScript. I have a strong passion for building performant, user-friendly applications and developer tools that enhance productivity.

Code is like humor. When you have to explain it, it’s bad.