Portal-Verse

A journey through our galaxy, using just HTML and CSS :3

Comment

Inspiration

The idea for Portal-Verse came from a desire to create something visually immersive and futuristic using only HTML and CSS. I wanted to prove that even without JavaScript or external frameworks, it’s possible to build a fully interactive and cinematic experience. Inspired by the idea of cosmic portals, digital galaxies, and the visual depth of sci-fi aesthetics, the project became a creative challenge to test how far CSS could be pushed.

What it does

Portal-Verse is a visual web experience that takes users on a journey through a galactic portal into a CSS-rendered solar system. The user begins at a landing section with a glowing, animated portal surrounded by stars and constellations. Clicking on the portal transitions the user into a system of interactive planets. Each planet can be hovered over to reveal detailed information panels about its characteristics, environment, and visuals. The entire experience is scroll-free, designed purely with transitions, keyframes, and gradients to simulate movement and depth.

How we built it

The project is made entirely with a single HTML file and a single CSS file.

  • HTML defines the structure for the landing portal, transition areas, and planetary sections.
  • CSS handles everything from animations to perspective illusions.
  • Keyframes and transforms simulate rotation, zooms, and motion effects.
  • Layered gradients and blur filters create the galactic background and constellations.
  • Hover effects and transitions bring interactivity to each planet’s information panels. No JavaScript or third-party libraries were used; every visual and motion effect is handcrafted in CSS.

Challenges I ran into

  • Creating natural, randomized constellations without using any script logic.
  • Making smooth portal transitions that feel cinematic while staying lightweight.
  • Keeping animations consistent and responsive across browsers.
  • Managing multiple layers of gradients and effects without lag.
  • Ensuring all text remained visible and readable on a dark galactic background.

Accomplishments that I'm proud of

  • Built an immersive, fully animated experience using only HTML and CSS.
  • Created a functional simulation of a galactic journey with no JavaScript at all.
  • Designed smooth transitions and dynamic visuals that look like interactive art.
  • Managed to maintain performance and visual quality across devices.
  • Brought together creativity, storytelling, and front-end skills into one cohesive concept.

What I learned

  • CSS alone can handle far more complex animations and depth than expected.
  • Proper layering, blending, and timing in CSS can mimic 3D environments effectively.
  • Minimal structure can lead to more innovative design decisions.
  • Simplicity in code can still produce something cinematic if handled with creativity.

Built With

Share this project:

Updates