Adrak Chai & Samosa — Comfort Food Edition (Corporate Tech Office Tea Break)

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art. In an Indian tech office, no product release, critical bug fix, or late-night deployment is complete without a 5-minute pantry chai break. A steaming clay Kulhad of Ginger Adrak Chai paired with crisp Garma-Garam Samosas is the ultimate comfort food that powers developers through endless coding sprints. This authentic workplace culture and rich street-food nostalgia inspired me to build a pure-CSS interactive art and corporate pantry scene. Live Interactive Demo: Corporate Chai & Samosa Experience CodePen Embed: codepen.io GitHub Repository: Sayista-Yazdani/corporate-chai What I Built Adrak Chai & Samosa is an interactive web experience featuring: Pure CSS Hero Artwork: Handcrafted clay-textured Kulhad Chai cup with a shimmering tea surface, malai rim, and layered rising steam animations. Golden-brown samosas with crisp crimped edges, served on a traditional plate alongside mint and tamarind chutneys. Interactive Corporate Pantry Corner: Fully detailed tea kitchen equipped with a glowing gas stove, boiling tea saucepan with foam, spice jars (Adrak, Elaichi, Chai Patti), and stacked clay cups. 4 Distinct Characters: Rohan (Frontend Dev), Amit (Tech Lead), Priya (Product Manager), and Kaka (Pantry Specialist). Web Speech API & Audio Narration: Real voice speech synthesis with gender-matched voice profiles for each character. Character Gaze & Mouth Choreography: Characters automatically look toward whoever is currently speaking with dynamic gaze shifting, listening poses, and animated mouth movements. CSS Artwork: Built entirely with CSS gradient meshes, polygon shapes, keyframe animations, and layered pseudo-elements (::before / ::after). Audio Engine: Powered by native window.speechSynthesis with dynamic voice selection and text cleaning. State Management: Reactive data-speaker HTML attributes driving multi-character gaze direction and speech bubble triggers. Pure Vanilla Engineering: Built with 100% clean HTML5, CSS3, and Vanilla JavaScript — zero external framework dependencies or external UI libraries. This project is open-source and available under the MIT License. Built with ♥, HTML5, Pure CSS3, and Vanilla JavaScript for the DEV Community.