PROJECT
Ojas Theeram
A premium, cinematic website for an Ayurvedic wellness clinic featuring scroll-driven animations, WebGL effects, WhatsApp booking integration, and comprehensive SEO — built with Next.js 16, React 19, Framer Motion, and Tailwind CSS v4.
Project Overview
Ojas Theeram is a premium, cinematic website for an authentic Ayurvedic wellness clinic in Bengaluru. The site showcases the clinic's Panchakarma treatments, individual therapies, wellness packages, doctor profiles, and products — all with a luxury editorial aesthetic and high-end scroll-driven animations. Built as a fully static, SEO-optimized Next.js application with 13 distinct homepage sections, each featuring unique animation systems including clip-path circle reveals, 5-column shutter wipe transitions, and mouse-tracking parallax with three independent depth layers.
Key Features
Cinematic Scroll-Driven Animations
13 homepage sections with unique scroll-driven effects including clip-path circle reveals, 5-column shutter wipe transitions, spring-physics parallax, and idle floating leaf animations.
WebGL Water Ripple Effect
Interactive WebGL water ripple effect on background images using react-water-wave, providing immersive interactivity on desktop with graceful mobile degradation.
2-Step WhatsApp Booking Modal
Animated booking form that collects personal details and service selection, then generates pre-formatted WhatsApp messages for direct appointment scheduling.
Comprehensive SEO Implementation
JSON-LD MedicalBusiness schema, dynamic sitemap, per-page Open Graph/Twitter meta tags, robots.txt, canonical URLs, and Google Search Console integration.
Luxury Editorial Design System
7 custom font families, CSS custom properties bridged into Tailwind v4's @theme, dark cinematic sections contrasting with warm off-white sections, and glassmorphic overlays.
Interactive Doctor Profile
Split-screen parallax entry with doctor qualifications, specialties, expandable certifications accordion, and adaptive mobile card-overlay pattern.
5-Phase Cinematic Slider
Scroll-driven slider showcasing the Ayurvedic treatment journey (Consultation → Diagnosis → Treatment → Recovery → Balance) with film strip background track and touch-swipe mobile carousel.
Adaptive Performance System
GPU-heavy effects gracefully degrade on mobile — water ripple disabled, blur replaced with opacity wash, dynamic imports for below-fold sections, and lazy-loaded iframes.
Multi-Layer Parallax Scenes
Mouse-tracking parallax with 3 independent depth layers (background, subject, text) creating immersive visual depth throughout the site.
Google Maps Integration
Custom-themed dark Google Maps embed with desaturated styling, GPS coordinates display, and comprehensive contact information cards.