This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.
Inspiration 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.
Demo 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.
Journey & Tech Stack Technical Implementation CSS Artwork: Built entirely with CSS gradient meshes, polygon shapes, keyframe animations, and layered pseudo-elements ( / ).
Audio Engine: Powered by native with dynamic voice selection and text cleaning.
State Management: Reactive 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.
License This project is open-source and available under the MIT License.
Built with ♥, HTML5, Pure CSS3, and Vanilla JavaScript for the DEV Community.