This is a submission for Frontend Challenge - June Celebrations, Perfect Landing: June Celebrations
What I Built
I chose to highlight Rath Yatra, one of India's most magnificent religious festivals, through an immersive digital experience that captures the spiritual essence and cultural grandeur of this sacred celebration. Rath Yatra, literally meaning "chariot journey," is the annual festival where Lord Jagannath, along with his siblings Balabhadra and Subhadra, embarks on a divine procession from the main temple to Gundicha Temple in Puri, Odisha.
The landing page serves as a digital pilgrimage, allowing visitors from around the world to experience the festival's intensity, devotion, and community spirit. What makes this celebration particularly fascinating is its unique blend of extreme devotion and challenging conditions - millions of devotees gather under the blazing June sun, with temperatures soaring above 42°C, yet their faith burns brighter than the scorching heat above.
The website features multiple interactive sections:
• Hero Section - with multi-directional crowd simulation showing devotees converging from all compass directions
• Sacred Temple Complex - with an interactive map of Jagannath Temple layout
• World Distance Calculator - allowing users to measure their journey to the holy city
• Cultural storytelling - that weaves together 900 years of tradition with modern web technology
Demo
Journey
Building this landing page was a fascinating journey of merging cutting-edge web technologies with deep cultural respect. I implemented several advanced
features:
Multi-Directional Crowd Simulation
The most challenging aspect was creating a realistic crowd simulator that shows devotees moving in all eight compass directions. Using pure CSS animations, I created 18 animated figures with varied speeds, colors, and timing to represent the millions who converge for the festival.Interactive Temple Layout
I developed an interactive temple complex map with hover effects, bilingual labels (Hindi with English translations), and detailed information panels. This required careful positioning, responsive design, and cultural accuracy in representing the sacred architecture.3D Background Effects
Implementing Three.js for sacred geometry particles, floating Om symbols, and heat distortion shaders created an immersive atmosphere that represents the spiritual energy of the festival.Global Distance Calculator
The interactive world map with draggable markers allows users to calculate their distance to Puri, complete with travel time estimates by air, road, and train.
What I Learned
Cultural Sensitivity in Design: Every element required careful consideration - from color choices (sacred saffron and gold) to ensuring Hindu symbols remained respectful and steady rather than frivolous animations.
Performance Optimization: Balancing rich visual effects with smooth performance across devices taught me valuable lessons about CSS animation efficiency, JavaScript throttling, and responsive design.
Bilingual Accessibility: Adding English translations in brackets for all Hindi text made the site globally accessible while preserving cultural
authenticity.
User Experience Flow: Creating a calm, meditative startup experience (with steady Hindu symbols) that gradually comes alive mirrors the spiritual journey of the festival itself.
What I'm Particularly Proud Of
Cultural Authenticity: Successfully representing a 900-year-old tradition with modern technology while maintaining deep respect for its spiritual significance.
Technical Achievement: The multi-directional crowd simulator and interactive temple map showcase advanced CSS and JavaScript skills without relying on heavy frameworks.
Accessibility: The bilingual approach makes Hindu culture accessible to global audiences while educating them about sacred traditions.
Performance: Despite rich animations and effects, the site maintains 60fps performance and works seamlessly across all devices.
Educational Value: The site serves as both a celebration and an educational resource about Hindu culture, temple architecture, and festival traditions.
What I Hope to Do Next
Immediate Enhancements:
• Add audio elements with traditional bhajans and temple bells
• Implement virtual reality support for immersive temple exploration
• Create a live countdown to the next Rath Yatra festival
• Add user-generated content section for devotee stories and photos
Long-term Vision:
• Expand to cover other major Hindu festivals with similar interactive experiences
• Partner with cultural organizations to ensure continued authenticity
• Develop mobile app version with GPS integration for actual pilgrims
• Create educational modules for schools to teach about Indian culture
Technical Goals:
• Implement WebGL shaders for more realistic heat wave effects
• Add machine learning for personalized cultural content recommendations
• Integrate with social media for festival experience sharing
• Develop accessibility features for visually impaired users
Tech Stack: HTML,CSS,JS(with threejs),Amazon Q CLI(with Claude Sonnet 4)
Took inspirations from:
1) zadvorsky's Crowd Simulator codepen project
2) sshaw's Sport Distance map codepen project
Cover Image by ChatGPT
Top comments (0)