Luminescence: A Trace of Calcutta's Night Soul

An interactive temporal lens reconstructing the heritage of the Hooghly riverfront through its shifting urban light—from 1970s mercury blue to 2000s sodium amber.

Comment

Inspiration

A City’s Night-Soul Kolkata is a city of layers. As a student in this city, I have always been fascinated by how light defines our memory of architecture. The "B.B.D. Bagh" district and the Hooghly riverfront look different today than they did forty years ago—not just because of the buildings, but because of the spectral temperature of the air itself. I wanted to build a "temporal lens" that allows a user to peel back the years and see the city through the ghostly, cold blue of the Mercury Vapour era and the nostalgic, warm glow of the Sodium Vapour era.

What it does

Luminescence is an interactive, mobile-first temporal simulator that allows users to experience the evolution of Kolkata’s night-time urban landscape.

How we built it

The project is a high-fidelity interactive prototype developed in Figma.

  1. Visual Reconstruction: Using historical photographic data and climatic profiles of Kolkata, I digitally reconstructed the lighting environment of the riverfront.
  2. Prototyping Logic: I used Smart Animation and On-Drag triggers to create a seamless transition.
  3. Physics of Light: I focused on the specific wavelengths of urban lighting: A. 1970s Era: Mercury Vapour (~435nm - 546nm), producing a high-contrast, cyan-heavy "Noir" aesthetic. B. 2000s Era: High-Pressure Sodium (~589nm), creating the golden-amber glow characteristic of modern nostalgia.

Challenges we ran into

The primary challenge was executing a solo 24-hour design sprint while being completely new to Figma. Learning the software’s prototyping logic, specifically "Smart Animate" and interaction triggers, while simultaneously building the assets was a steep learning curve. Beyond the software, achieving a realistic transition was difficult; I had to ensure that as the slider moved, the architectural reflections in the water reacted precisely to the color shift. Manually adjusting environmental variables to represent the jump from 1970s light temperatures to the 2000s required careful attention to contrast and luminosity to ensure the heritage buildings remained the focal point.

Accomplishments that we're proud of

  1. Building the Project: Building a functional, interactive prototype in under 24 hours while learning the software from scratch. Successfully navigating the transition from a first-time user to deploying advanced features like "Smart Animate."
  2. Atmospheric Accuracy: Successfully recreating the distinct spectral shift between two different eras of urban lighting—moving from the cold cyan of the 1970s to the warm amber of the 2000s—without losing the structural integrity of the historical buildings.
  3. Intuitive Interaction: Designing a seamless "temporal slider" that feels natural on mobile, allowing users to feel like they are physically peeling back the layers of the city's history.
  4. Heritage Preservation: Using modern digital tools to shed light on the architectural significance of the B.B.D. Bagh district, bringing a data-driven focus to Kolkata’s urban evolution.

What we learned

Rapid Prototyping Workflow: I learned how to move quickly from a conceptual idea to a functional UI. Being new to Figma, I discovered how to use components and layering to simulate complex environmental changes without needing heavy code. The Physics of Urban Lighting: I gained a deeper understanding of how different lighting technologies—like Mercury vs. Sodium vapour—affect the visual perception of heritage architecture and how to recreate those spectral temperatures digitally. Interaction Design: I learned the importance of "Smart Animate" and trigger-based logic in creating a user experience that feels intuitive. I realized that even small details, like the speed of a transition, significantly impact the "feel" of a historical reconstruction. Time Management under Pressure: This sprint taught me how to prioritize essential features over minor aesthetic tweaks to meet a hard deadline, ensuring a "Minimum Viable Product" that is both functional and polished.

What's next for Luminescence: A Trace of Calcutta's Night Soul

  1. Expanding the Timeline: I plan to add more "spectral layers" to the prototype, including the pre-electricity era with gas-lit lamps and the modern transition to LED lighting, to create a complete 150-year visual history.
  2. Geographical Scaling: While this prototype focuses on the B.B.D. Bagh and riverfront area, I intend to map other heritage districts of Kolkata, such as North Kolkata's residential lanes and the colonial structures of Park Street. Technical Integration: I want to move beyond a UI prototype and develop this into a web-based application using React or Three.js. This would allow for real-time light simulation and the integration of historical archival data for each building shown.
  3. Educational Outreach: My goal is to collaborate with local heritage foundations to use this tool as a digital medium for architectural education, helping people visualize the "atmospheric history" of the city that is often lost in static photographs.

Built With

  • figma
Share this project:

Updates