An Evening in the Monsoon Season - Rain, Tea, and Samosas

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art

Inspiration

Nothing says comfort like a piping hot cup of cutting chai on a rainy monsoon afternoon in India. Listening to the pitter-patter of raindrops against the window while soft, slow music plays in the background, paired with a plate of crisp pakodas, sizzling samosas and a hot cup of tea (adrak wali chai (Ginger Tea ) —it’s pure bliss.

I wanted to capture that nostalgic, warm atmospheric vibe entirely using HTML and CSS. From the rich gradient of brewed tea and gentle ripples in the cup to the soft wisps of steam rising against the rainy backdrop, this is a tribute to India's favorite monsoon ritual!

Demo

Codepen:

Journey

Building this piece was all about mastering fine visual details and CSS animations:

Layering & Shapes: Creating the teacup, saucer, and interior liquid surface using carefully placed border-radius, box-shadow, and radial-gradient properties to achieve realistic depth and lighting.

Steam Wisps: I created subtle steam animation keyframes (@keyframes steamRise) using soft radial gradients and CSS filter: blur() to give the steam a naturally diffused look as it dissipates into the air.

Surface Ripples: Adding delicate, looping CSS animations to simulate gentle ripples on the tea's surface.

What I Learned & What's Next

Fine-tuning the animation timing and keyframe delays was key to making the steam and ripples feel natural rather than mechanical. Next, I’d love to add interactive elements—like hover effects that react to cursor movement or toggleable light/dark themes!

Building this project evolved from a pure CSS art experiment into a full-fledged React application! Here are a few key insights from the process:

• Fine-Tuning Animations: Adjusting animation timing and keyframe delays was critical for making the rising steam and subtle surface ripples feel natural rather than mechanical.
• Audio Integration & State Management: Implementing ambient sound effects (like soothing rain and background tunes) required managing React state effectively to ensure smooth audio playback and control toggles.
• User Customization: Adding a dedicated settings panel gave users control over sound, themes, and interactive elements to create their ideal cozy environment.

🔗 Live Links & Project Code

• 🚀 Live Demo: Chai & Samosa Monsoon Experience
• 📂 GitHub Repository: gaurav101/chai-samosa-monsoon