DEV Community

Cover image for ☕ Hot Tea & Crispy Samosa – Interactive Comfort Food Experience
Bhavnish
Bhavnish

Posted on

☕ Hot Tea & Crispy Samosa – Interactive Comfort Food Experience

☕ Overview

An interactive frontend web experience showcasing the ultimate Indian comfort food combination: hot tea (chai) and a crispy samosa with spicy chutneys!

🌟 Features

  • Interactive Tea Cup: Take a sip to smoothly lower the liquid level with realistic tilt animations.
  • 🥟 3D Vector Samosa: Dip the samosa into green mint & red tamarind chutneys with smooth 3D motion.
  • 🌶️ Dynamic Chutney Dip Effect: Real-time chutney stain appears on the samosa tip when dipped!
  • 🫖 Refill System: Easily refill the tea cup and reset the samosa with one click.
  • 💨 Vapor/Steam Animations: Custom CSS floating steam effect over hot tea and fresh samosa.

🛠️ Tech Stack

  • HTML5
  • Pure CSS3 (3D Transforms, Custom Keyframe Animations, Radial Gradients, Inline SVGs)
  • Vanilla JavaScript

🔗 Live Demo & CodePen

Direct Link: View CodePen Demo

Top comments (1)

Collapse
 
bhavnish_e35294bf0fd0b2df profile image
Bhavnish

TEA TIME!!!!! ☕