EscBACK

// CLIENT

BUILDING A 3D-DRIVEN BEAT STORE FOR A MUMBAI HIP-HOP LABEL

Brand identity, UI, motion, and a full-stack build for Boom Bap Bombay — a beat store with a cursor-tracked 3D revolver on the landing page and a Razorpay checkout underneath it.

CLIENT
Boom Bap Bombay
ROLE
Brand & UI design, Motion design, Front-end development
DURATION
4 months
YEAR
2025

Boom Bap Bombay is a Mumbai hip-hop label and beat store run by a producer called KSHAH — dusty boom-bap drums, custom instrumentals, golden-era hip-hop filtered through Mumbai noise and pulp-crime imagery. He came to me for a website. By the end I'd designed the brand, built the front end, and wired up a store that takes real payments and delivers real files. It's live at boombapbombay.com.

Owning more than the front end

Most of what's in this portfolio is design work I handed off, or a prototype that never had to actually ship. This one was different — I did the identity, the UI, the motion design, and then wrote every line of the front end myself. There's no handoff between "here's an idea" and "customers are paying for it."

That changes how you design. A hover state drawn in Figma has to actually get built, and a scroll effect scripted in a moment of inspiration has to hold up on a five-year-old Android phone on patchy 4G. A fair chunk of the real work was closing that gap.

The revolver

The landing page centerpiece is a GLTF revolver model that tracks the cursor — aims wherever you move your mouse. Rendered in Three.js with a Meshopt-compressed model so it doesn't stall on load. It's a blunt object for a genre whose whole vocabulary is blunt, and it sets the tone in three seconds better than any line of copy could.

Making scroll feel expensive

Under the hood it's GSAP driving ScrollTrigger and Flip, layered on Lenis for the weighted, slightly-delayed glide desktop users now expect from a site that's trying to feel premium. Getting that to also hold up on mobile took more work than the desktop version — pinned scroll sections jitter on touch devices because native scrolling runs on its own thread, out of sync with whatever's driving the animation in JS. I ended up giving mobile a normalized scroll path and, in a few places, an entirely separate build, rather than forcing one interaction model to behave on both.

A beat store that's actually a store

Past the visuals, this had to function as commerce: a cart, checkout, and paid digital downloads. I built the backend in Express with Postgres and Supabase, wired to Razorpay for payment. The parts that mattered most weren't visual at all — verifying Razorpay's webhook signatures with a constant-time comparison so the check can't be timed and guessed, re-deriving the price server-side instead of trusting whatever the client sends, and handing out time-limited signed download links instead of a public file URL anyone could pass around. None of that shows up in a screenshot, but it's the difference between a store and a store that's actually safe to take money through.

What four months on one client taught me

Shipping something you designed yourself removes the usual excuse — if a transition feels cheap or a button doesn't register on tap, there's no one else's handoff to point at. I also learned to timebox the invisible work: it would've been easy to keep hardening the payment backend indefinitely, and at some point "secure enough to actually trust with real transactions" has to be a line you draw and move past.

Have a look at boombapbombay.com — best on desktop, for the revolver.