"Stars are returning— Restore the night sky with NightLens."
"Stars are fading— When 'Nox' takes over the Metro City."

Inspiration The night sky is half of our planet's heritage, yet urban "Luma" (artificial light) has turned the stars into a rare luxury. I built NightLens: Luma vs Nox as a cinematic simulation to move beyond static charts and boring data. My goal was to create a tactile, immersive experience where users can feel the immediate visual impact of light pollution—gamifying the battle to restore "Nox" (the natural night).

Project Overview NightLens solves the problem of "Environmental Blindness"—the reality that most city dwellers have forgotten the true beauty of a star-filled sky. It is a cinematic simulation designed to gamify light pollution awareness, turning a complex environmental issue into a visual tug-of-war between artificial glow and celestial clarity.

Building with MeDo I structured my development process by focusing on State-Driven Logic. Instead of requesting static pages, I used multi-turn prompts to define a "Global Light Variable" that dictates the entire app's behavior.

Logic Mapping: I instructed MeDo to treat "Luma" (urban light) and "Nox" (starlight) as opposing forces on a mathematical scale of 0% to 100%.

Iterative Debugging: When light levels initially reset during environment switches, I worked with MeDo to refine the backend logic so that pollution levels persisted across different UI views.

The Most Impressive Feature The standout feature is the Reactive Storytelling Engine. MeDo successfully translated my natural language prompts into a conditional UI that "talks back" to the user based on their actions.

The Highlight: Successfully reducing Luma triggers a rewarding notification: "You restored the night sky 🌌". Conversely, if Luma dominates, a cinematic warning appears: "The stars are disappearing 😈".

Technical Execution MeDo acted as a full-stack orchestrator, generating a responsive React.js frontend and a Node.js logic layer. It implemented a custom CSS-driven atmospheric glow system that accurately mimics real-world light scattering, making the "Luma" haze feel thick and realistic.

The Legend of Luma vs. Nox In this simulation, the environment is shaped by two powerful opposing forces:

Luma (The Intruder): Represents artificial light and urban glow. While it brings convenience, its excess creates a "haze" that suffocates our view of the cosmos.

Nox (The Celestial): Represents the true, dark night and the infinite beauty of the stars—the natural state we strive to restore.

What it Does NightLens is a cinematic simulator that gives you control over the atmospheric balance:

Three Realms: Toggle between Metro City, Small Town, and Village to observe different base levels of Luma.

Dynamic Visibility: Use the "Reduce Lights" mechanic to weaken Luma and allow Nox to shine through.

Cinematic Aesthetic: Features a high-contrast, "Pixar-inspired" dark theme with soft, shifting glow effects.

Challenges & Accomplishments State Persistence: The hardest part was ensuring that light levels remained consistent when moving between environments. I iterated with MeDo to treat light pollution as a global variable, creating a seamless world-building experience.

Bidirectional Feedback: I am most proud of creating an interface that feels alive. Seeing the "Stars are returning ✨" toast message for the first time made the app feel like it had its own personality.

What's Next Real-World Sync: Integrating GPS-based data to show users their actual local light pollution levels.

Constellation Reveal: Adding a feature where specific constellations only appear once 85% visibility is reached.

Soundscapes: Implementing procedural "Night Ambience" (city traffic vs. crickets) that reacts to current light levels.