Interactive Atay Ceremony

December 10, 2025

Currently developing an immersive digital experience that teaches users the traditional Moroccan tea ceremony (Atay) through gesture-controlled interaction. This project combines custom machine learning models with scroll-driven animations to create an educational experience where users physically perform the ceremonial high pour using hand gestures detected through their webcam.

Project Overview

This ongoing project explores the intersection of cultural heritage preservation and modern web technology. Users journey through the tea preparation process—learning about ingredients, brewing techniques, and cultural significance—before participating in the ceremonial pour themselves using gesture recognition.

Technical Development (Current Progress)

Machine Learning Pipeline

Custom gesture classifier trained using ML5.js neural network with 2000+ hand pose samples
Achieved 94% classification accuracy during initial training
Developed data collection tool for gathering varied gesture samples across different lighting conditions and hand positions
Currently implementing temporal smoothing to reduce false positives in real-world conditions
Building confidence threshold system (75%) to filter low-quality predictions

Interactive Animation System

Designing scroll-driven narrative using GSAP ScrollTrigger for ingredient reveals
Implementing MotionPath animations for teapot movement along curved paths
Creating text reveal effects with character-by-character animations
Developing real-time liquid-fill animation responding to gesture detection
Testing performance optimization across different device capabilities

Real-Time Gesture Detection

Integrating MediaPipe Handpose for 21-keypoint hand tracking via webcam
Extracting 10 key features (hand tilt angle, finger distances, palm position) for classification
Building visual feedback system showing detection status and hand positioning guidance
Implementing error handling for camera access and model loading scenarios

Technical Challenges Being Addressed

Gesture Recognition Reliability

Challenge: Detection accuracy drops significantly in poor lighting (45% vs 95% in optimal conditions)
Solution in progress: User positioning feedback system and adaptive threshold adjustments
Challenge: False positives during hand transitions
Solution in progress: Requiring 5 consecutive frame detections before triggering animations

Cross-Device Performance

Challenge: Frame rate drops from 30 FPS to 12 FPS on older devices (2018 MacBook Air)
Solution in progress: Prediction throttling (100ms intervals) and adaptive video resolution
Challenge: Mobile device limitations
Current approach: Desktop-first development, mobile optimization planned for next phase

Browser Compatibility

Testing camera access across Chrome, Firefox, and Safari
Implementing specific error messages for different permission scenarios
Ensuring HTTPS/localhost requirements are clearly communicated to users

Design & Cultural Research

Narrative Structure (In Development)

Phase 1: Introduction with video background establishing cultural context
Phase 2: Empty teapot narrative demonstrating the ceremonial pour
Phase 3: Scroll-based ingredient sequence (water, green tea, mint, sugar)
Phase 4: Interactive pouring phase with gesture control
Phase 5: Completion and cultural reflection

Cultural Authenticity

Researching traditional Moroccan tea ceremony practices and hospitality customs
Consulting cultural sources on the significance of “the higher you pour, the better the foam”
Designing experience to honor the symbolic importance of Atay in Moroccan culture
Balancing educational content with interactive engagement

Technologies in Use

ML5.js for neural network training and real-time inference
MediaPipe Handpose for hand keypoint detection
GSAP (GreenSock) with ScrollTrigger, MotionPath plugins
Vanilla JavaScript for state management and gesture classification
HTML5 Canvas for hand tracking visualization
getUserMedia API for webcam integration