Case Study · Creative Studio & Film Production
Stories that bloom on screen —
an editorial-grade digital flagship.
Mogra Media crafts films for Deloitte, Himalaya Wellness, and global feature films on Apple TV+ and Prime Video. We engineered a tailored, sub-second digital flagship using Astro v7, Tailwind CSS v4, and Lenis smooth scrolling that communicates their "editorial-first" production mastery.
Key Deliverables
Cinematic richness with zero runtime performance penalty.
Using Astro's Island architecture and selective client hydration, we combined high-resolution video embeds, inertia-driven smooth scrolling, and asymmetrical editorial grids while keeping the layout footprint zero-JS by default.
Astro
Zero-JS island architecture by default
<35KB
Ultra-lean client JavaScript runtime
60 FPS
Cinematic Lenis inertia scroll feel
The Client & Positioning
An elite creative studio with an "edit-backwards" philosophy.
Mogra Media is a boutique creative studio and film production house founded by documentary filmmaker Poorabi Gaekwad, alongside post-production veteran Judson Albo and kinetic design specialist Abhijit Shuja. Their portfolio spans global giants like Deloitte, Himalaya Wellness, Ashoka University, Masters' Union, and feature documentaries streaming on Apple TV+ and Prime Video.
Creative production websites often fall into dark-themed templates and vague claims. Mogra Media stands apart through an "edit-backwards" approach: thorough pre-production planning, script precision, and careful editorial craft that prevents friction during live shoots. Their digital presence needed to communicate that discipline with visual warmth and cinematic weight.
The Challenge
Balancing rich media storytelling with instant page speed.
The engineering requirements posed three distinct challenges:
Multi-Disciplinary Creative Portfolio: Mogra operates across cinematic live-action films, photorealistic 3D/CGI, brand identity publishing, and high-velocity digital content. The site needed to present these disparate formats without cognitive overload.
Media-Rich Performance Penalty: Shipping heavy JavaScript single-page applications (Next.js/React hydration) alongside high-res film stills and motion graphics typically crushes Time-to-Interactive (TTI). We needed static delivery with surgical, island-based interactivity.
Tactile Brand Nuance: The experience needed smooth, cinematic inertia scrolling, custom asymmetrical bento layouts, morphing workflow cards, and playful micro-delights (like their signature "Pluck a petal for luck" interaction).
Technical Architecture
Astro v7 Island Architecture — Zero JS by default.
We engineered the platform on Astro v7 with isolated client islands, guaranteeing sub-second load times and silky smooth frame rates:
Astro v7 Island Engine
Static HTML output with zero JavaScript footprint for layouts and typography. Client-side JS is strictly isolated to interactive components (Alpine.js accordions and Slick sliders), keeping total bundle size under 35 KB.
Lenis Smooth Inertia Scroller
Integrated Lenis smooth scrolling with automated requestAnimationFrame handling and native anchor linking, imparting a fluid, cinematic physical weight to viewport navigation.
Asymmetrical Bento Portfolio Grid
Custom CSS Grid matrix that fluidly balances 7+ featured projects across variable row spans on desktop while translating into a clean, sequential narrative flow on mobile devices.
Automated Zero-Downtime FTP Deployment
Custom Node.js deployment pipeline using basic-ftp that validates environment variables, monitors upload progress in real time, and deploys production artifacts without downtime.
Engineering Highlights
Crafted details that elevate brand prestige.
🎞️ 4-Stage Morphing Workflow Cards
The Define → Develop → Create → Deliver workflow uses custom CSS morphing: top capsule and bottom descriptions merge smoothly on hover, shifting backgrounds to luminous white with deep elevation drop-shadows and emerald typography.
📱 Fractional Slider Peeking on Mobile
Engineered fractional carousel slide widths (slidesToShow: 1.15 and 3.25) on mobile viewports, providing natural visual affordance that horizontal scrolling is available without cluttering screens with bulky pagination buttons.
🌸 "Pluck a Petal for Luck" Brand Delight
Embedded in the footer is an interactive gamified micro-interaction tracking visitor clicks and delivering a delightful sensory reward reinforcing Mogra's jasmine floral heritage.
📝 High-Conversion Brief Intake Engine
A streamlined project inquiry engine categorizing timeline expectations, project scopes, and production formats, generating structured creative briefs that cut onboarding time in half.
🌿 Botanical-Luxury Design Tokens
Tailwind CSS v4 design tokens built around Deep Mogra Green (#007937), Electric Leaf (#92F85B), and Warm Alabaster (#FBF6EC), paired with Fraunces display serif typography.
⚡ 100/100 SEO & Accessibility Score
Full semantic HTML5 structure, explicit ARIA attributes, structured JSON-LD organization schema, and contrast ratios tuned for effortless readability across all lighting environments.
Visual Identity
Botanical luxury meets editorial typography.
The design system harmonizes cinematic gravitas with organic freshness:
Deep Mogra Green & Electric Leaf
Deep Mogra Green (#007937) anchors the primary canvas, complemented by Electric Leaf (#92F85B) for micro-interactions, grounded by Warm Alabaster (#FBF6EC) backgrounds.
Editorial Display Serif (Fraunces) & Manrope
Headline typography is set in optical-size varied Fraunces to evoke classic editorial publishing and film credits, paired with Manrope for crisp interface readability.
Technology Stack
Engineered for speed, stability, and scale.
Conclusion
Artistic direction backed by solid engineering.
The Mogra Media platform pairs cinematic visual storytelling with fast, lightweight web delivery. It gives their production team a direct, high-performance platform that accurately reflects the standard of their commercial and documentary film work.
Ready to craft an
editorial-grade
digital presence?
Ready for an
editorial site?
Let's build a lightning-fast, custom platform that does justice to your brand's creative caliber.
Free 30-min call · Discuss scope & budget
Book your free call →The craft in every click.