Inspiration
Infinity and creation are whispered by every star, nebula, and cosmic pattern in the night sky, which has always been a source of wonder. This fascination inspired the book Layers of the Universe. I aimed to create a cinematic, immersive visual experience by fusing technology and creativity with the concept of "the universe within us."
What it does
Using HTML, CSS, and inventive video layering, Layers of the Universe is a parallax-based narrative experience. From the Cosmos to Infinity, each layer reveals a new dimension as the user scrolls, fusing sound, motion, and emotion. Each scroll is like traveling through the invisible chapters of space, where the laws of physics and imagination collide.
How we built it
Cinematic depth with HTML5 video segments.
The parallax effect is produced using CSS3 animations and gradients.
Overlays of glitter, particles, and gradients create magical visual effects.
Personalized scroll transitions to ensure smooth layer transitions.
Canva for creating, modifying, and color-grading videos that adhere to the cosmic style.
Challenges we ran into
The difficulties we encountered
enhancing video scaling to guarantee that every clip fills the screen without any edges.
achieving a clean, lightweight experience with smooth parallax movement without the use of JavaScript.
preserving clarity and responsiveness on a range of screen sizes.
adjusting brightness and color gradients to create a magical yet authentic ambiance.
Accomplishments that we're proud of
used only front-end design to create a scroll-reactive cinematic experience.
produced a shimmering, lifelike, and emotionally stirring parallax effect.
The theme of cosmic evolution is reflected in the seamless transitions between visual layers.
blended technology and art to create a single, story-driven experience.
What we learned
CSS by itself has the potential to be a potent storytelling tool.
Users' perceptions of the story are influenced by even the smallest design elements, such as gradients, glow, and shadows.
When logic and imagination work together, creativity blossoms—the code turned into a canvas.
What's next for Layers of the Universe
With sound design, floating 3D elements, and clickable constellations that provide brief poetic insights about each layer of the universe, my next goal is to develop the project into an interactive website that allows users to dynamically explore cosmic layers.
Log in or sign up for Devpost to join the conversation.