Disconnected Reality

Experience the world without connection and discover the power of digital access.

Comment

Inspiration

We were inspired by the harsh reality that billions of people still face today—living without stable internet access. During global crises like the pandemic, this digital divide became more visible than ever. We wanted to create something that doesn’t just tell people about this issue—but makes them feel it.

What it does

Disconnected Reality is an interactive, story-driven web experience that simulates the emotional and functional impact of losing internet access. As users navigate a mysterious world filled with secrets, puzzles, and animated characters, the experience gradually deteriorates—mirroring a real-life internet blackout. With subtle console messages, visual glitches, and system breakdowns, users are taken on a journey from connectivity to complete disconnection.

How we built it

We built the entire experience using just HTML, CSS, and JavaScript—no libraries, no engines, no shortcuts. We implemented: A parallax stardust environment Collision-based triggers to unlock hidden events Console and source-code secrets for curious users Timed blackout progression with glitch effects All handcrafted from scratch to maintain creative control and raw impact.

Challenges we ran into

Building a smooth and immersive experience without game engines Creating collision detection purely in JavaScript Designing a subtle but powerful progression from normal to blackout Balancing design, emotion, and performance on all browsers Hiding secrets in ways that are clever, not frustrating

Accomplishments that we're proud of

Developed a deeply immersive and emotional simulation using only front-end tech Created a rich, haunting visual aesthetic Designed meaningful puzzles, NPCs, and hidden content Achieved real-time interactions and timed glitches from scratch Delivered a strong social good message through design, not just words especially for young children

What we learned

The power of simplicity when paired with storytelling Advanced JavaScript logic for timed events and collision detection New creative uses for HTML comments and developer console How to guide user emotion through visuals, pacing, and environment That games and simulations can drive real social conversations

What's next for Disconnected Reality

Add branching paths representing different real-world blackout scenarios Introduce voiceovers or ambient audio for deeper immersion Make it mobile responsive and accessible Partner with educators and nonprofits to use it as a teaching tool Translate the experience into multiple languages Release the code open-source to grow the message and community

Built With

Share this project:

Updates