Reflections of Monet

Introduction

Reflections of Monet is an interactive web art project that reimagines Claude Monet's Water Lilies series into a meditative, immersive scrolling experience. Users interact with a dreamlike environment through subtle movements, ripples, soundscapes, and layered visuals — inviting them to explore the sensation of being enveloped in Monet's paintings.

Concept

Monet's Water Lilies have always drawn me into their quiet, atmospheric world. Experiencing them at scale in exhibitions like MoMA made me feel weightless, adrift in a reflective dreamscape. I wanted to translate this sensation into a web-based space: an experience where users don't just look at the art but sink into it — becoming part of Monet's vision of light, color, and water.

This project focuses on:

The fluidity and softness of Monet's brushstrokes.
A sense of being submerged and weightless.
Dynamic interaction with light, water, and sound.
Symbolic storytelling through the blooming of water lilies as a metaphor for rebirth and enlightenment.

End-to-End Demo

WHEN WAS THIS?

March 2025 (1 week)

WHAT DID I DO?

I designed and developed this interactive, immersive web experience, translating the serene and contemplative qualities of Monet's Water Lilies into an intuitive and meditative digital journey.

My responsibilities include:

Interactive Canvas Animation — Built complex animations and visual effects using JavaScript and HTML5 Canvas, including ripple effects and floating objects with user interaction.
Audio-Visual Integration — Implemented scroll-based system coordinating multiple videos, audio tracks, and visual transitions using Web Audio API and HTML5 video.
Performance Optimization — Engineered efficient rendering techniques for canvas animations with optimized image handling and pixel manipulation.
Custom Physics System — Developed physics engine for floating objects with collision detection and smooth transitions using JavaScript mathematics.
Responsive Design — Created fully responsive experience adapting to different screen sizes while maintaining consistent performance and visuals.

User Experience Flow

Scene 1: The Invitation

The journey begins with a zoomed-in cropped section of a Monet painting. A floating lotus is centered on screen, with cursor hover effects hinting at its interactivity.

Scene 2: Surface Exploration

Clicking the lotus transitions to a tranquil pond with floating lilies. Gentle cursor movements create ripples, accompanied by soft ambient sounds of birds and trickling water. Three faint outlines at the bottom left suggest collectible elements, with the drifting lotus ready to fill the first slot.

Scene 3: Submersion

As users scroll downward, they experience the sensation of sinking beneath the water's surface. The background transitions from light pastels to deeper water tones, while the audio deepens to match the descent.

Scene 4: The Search

Users find themselves in a murky, immersive underwater space filled with floating lotus images. The challenge is to find the "real" lotus among the fakes to fill the second slot, with subtle animations mimicking water currents to enhance the dreamlike atmosphere.

Scene 5: The Depths

At the deepest layer, schools of fish swim by as Monet's quotes drift through the space. The final lotus reveals itself only on hover, encouraging users to explore and engage with the text and environment.

Scene 6: Emergence & Reflection

Upon completing the lotus collection, the screen pixelates and prompts users to scroll outwards, revealing Monet's Bridge over a Pond of Water Lilies. This final transition connects their journey back to the source artwork, with a restart lotus floating at the bottom for replaying the experience.

Tools & Frameworks

HTML5 Canvas for complex animations and ripple effects
Web Audio API for immersive soundscapes and audio transitions
Custom JavaScript physics engine for floating object interactions
Optimized rendering techniques for smooth performance
Responsive design with Bootstrap for cross-device compatibility