01
WebGL that degrades gracefully
The same scene must run on a gaming laptop and a three-year-old Android. Device-tiered settings, IntersectionObserver-gated lazy init, and DPR caps keep the gallery smooth instead of aspirational.
Case study · 2026 · Live
Nirvana
A cinematic ecommerce experience for luxury chain-mounted eyewear — hand-written WebGL shaders, GSAP choreography, and a full commerce backend.
Next.js 16React 19TypeScriptGSAP · LenisOGL · Three.jsExpress · PostgreSQLRazorpayAWS S3
01 / 04
Cinematic storefront hero — chain-mounted eyewear
Overview
Nirvana (Gravis India) makes armless, chain-mounted eyewear — jewellery you see through. A product this unusual can't be sold with a template storefront; the site itself has to feel like the object: weightless, precise, a little theatrical.
I built all three layers: a cinematic Next.js storefront with custom WebGL, an Express/PostgreSQL commerce backend with Razorpay, and a React admin dashboard for the catalog and orders.
34K
Lines of TypeScript
3
Apps — store, API, admin
60fps
WebGL hero on mobile too
15%
Token-payment checkout
The problem
Luxury buyers don't scroll product grids — they linger. The brief was a storefront that earns that lingering: cinematic motion, editorial pacing, and photography treated like a gallery, without melting phones or breaking accessibility.
Underneath the theatre it still had to be a real Indian ecommerce business: GST-aware invoicing, partial 'token' payments for made-to-order pieces, inquiry flows for hesitant buyers, and an admin panel the brand can run alone.
What I built
Three applications that share one design language and one source of truth:
Cinematic storefront
WebGLOGL cylinder hero with custom GLSL shaders, Three.js visual gallery, marquee, SVG page transitions
Commerce backend
50+Endpoints for catalog, carts, orders, Razorpay + webhook verification, OTP auth, GST tax model
Admin dashboard
18Pages for products with crop-and-upload imagery, orders, customers, inquiries, category filters
Infrastructure
8 cronsS3 storage, Sharp→WebP conversion, guest-cart cleanup, Postgres backups, Socket.IO notifications
Motion & commerce highlights
A hero written in GLSL
The landing cylinder is raw OGL with hand-written vertex/fragment shaders and a particle field — radius, FOV, DPR, and particle count all scale by device, and particles switch off entirely on mobile.
Scroll that feels engineered
Lenis smooth-scroll synced to GSAP ScrollTrigger through a shared refresh scheduler, with limitCallbacks and lag smoothing — and every animation respects prefers-reduced-motion.
Money stored in paisa
All prices are integers in paisa with rupee values derived in generated columns — no floating-point money anywhere. The GST model ships with the full Indian state/GST-code table.
Token payments
Made-to-order pieces support a 15% deposit (min ₹2,000) through Razorpay, verified by webhook signature — the order state machine treats partial and full payment as first-class paths.
Technical challenges
02
SSR meets canvas
Next.js App Router server-renders everything the WebGL heroes can't be — dynamic imports with ssr:false, hydration-safe transitions, and a dual API layer for server and client callers keep both worlds happy.
03
Payment edge cases
Webhook-verified Razorpay flows have to survive double-fires, abandoned checkouts, and token-vs-full ambiguity — the order lifecycle encodes every path explicitly rather than trusting the happy case.
Outcome
The storefront is live at nirvana.style — cinematic WebGL hero, GSAP scroll choreography, and a full commerce stack behind it.
It's the project where my two halves — motion design and backend engineering — finally ship as one product. The reference demos I built for it now live in my animation toolkit.
What's next
Lookbook editorial pagesOngoing catalog & campaign drops