Fashion editorial about a boy and a girl who arranged to meet up at the London Bridge, the narrative is being unfolded in the form of Whatsapp chat. The project is to complement a feature for Inner Magazine (Hong Kong), which comprises of 7 landscape 16x9 image that altogether forms a panoramic picture.

A Panoramic Conversation Between Strangers

London Bridge is an interactive editorial based on an imagined encounter between two Hong Kong strangers — Lee and Ruby — who meet in the middle of London Bridge to return a lost train card. The piece is adapted from a photo series originally published in INNER Magazine, and the full panoramic image can be viewed on Instagram.

The project reinterprets the static panorama as a narrative interface: the viewer navigates not by scrolling or swiping, but by typing. The selected interface is Whatsapp, as it imagines how the two characters in the story arrange to meet with each other. Each keystroke triggers fragments of dialogue to appear, gradually revealing the conversation between Lee and Ruby. As the exchange unfolds, the narrative overlays on top of the panoramic image, an echo of digital intimacy emerging in a public, physical space.

💻 Technical Implementation

- Frontend Framework: Built in React, enabling static deployment and fine control over transitions.

- Chat Interface:
A replica of WhatsApp’s UI created with Tailwind and Framer Motion. Message bubbles animate sequentially on key press, simulating live typing.

- Typing Trigger:
Global keyboard event listeners (window.addEventListener('keydown', handler)) drive the conversation’s pace — each keystroke corresponds to one message reveal.

- State Management:
Chat progress and active character are tracked via useState and useRef, allowing conditional rendering of who’s “speaking” next (Lee or Ruby).

- Contextual Attachments:
At key dialogue points, small inline images (such as screenshots, receipts, or maps) are revealed using the same chat UI, expanding the conversation beyond text.

🪞 Conceptual Frame

At its core, London Bridge (Lee & Ruby) explores how digital communication systems translate emotional distance. The WhatsApp replica, a vessel of mundane connection becomes a space where memory, misinterpretation, and intimacy cohabit.

By merging editorial photography, panoramic storytelling, and chat simulation, the work subverts both the photo essay and the messaging app:

• The image becomes a timeline.
• The chat becomes a cinematic script.
• The keyboard becomes a trigger for empathy.

The piece proposes that in a mediated world, the act of typing can be a form of touch or an interface gesture that bridges two strangers, if only for a moment.

The application should be ideally hosted in a client-based app (e.g, React JS) due to its interactivity, but it is using Next JS currently because I need to host it on my personal website.