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

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:

• GitHub Repository: Sayista-Yazdani/corporate-chai

What I Built

Adrak Chai & Samosa is an interactive web experience featuring:

1. 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.

2. 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).

3. Web Speech API & Audio Narration:

   • Real voice speech synthesis with gender-matched voice profiles for each character.

4. 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 (::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.

License

This project is open-source and available under the MIT License.

Built with ♥, HTML5, Pure CSS3, and Vanilla JavaScript for the DEV Community.