BALLERS Streetball

BALLERS is a concept piece for a streetball brand — a global pickup network where the product isn’t a shoe or a league, it’s the game itself: real players, real games, real community, from Tokyo to London to Lagos to NYC. The brief we set ourselves was to make that energy the first thing a visitor feels, before they read a word.

The whole site is structured as four scroll acts — Where Legends Are Made, The Streets Are Alive, Three Steps to the Court, and The Movement Never Stops. The mood is editorial and loud: condensed display type, a single orange accent, hand-drawn graffiti, and photographic street courts shot in a consistent grade.

Holding it all together is one basketball. Not a photo and not a video loop — a real, rendered 3D object that lives on the page and moves with the reader as they scroll, re-framing itself from act to act.

This is the kind of build that usually breaks in one of four places. A live 3D object that has to stay smooth while it’s tied to scroll. A CG ball that has to sit convincingly over busy photographic courts instead of looking pasted on. A dense, functional interface that has to stay legible over those same backgrounds. And a signature interaction that can’t quietly disappear on a phone.

Getting any one of those right is routine. Getting all four to hold together — at speed, on mobile, without the page feeling like a tech demo — is the actual work, and it’s where most immersive brand sites compromise.

The ball is a single persistent Three.js scene on a fixed, transparent canvas that sits above the page. It loads as a Draco-compressed GLB with a procedural fallback, lit with environment reflections and ACES Filmic tone mapping, then knocked back with a matte, gritty material so it reads as a street ball rather than a showroom render. Because the canvas is persistent, the same object survives the entire scroll — no per-section reload.

Its journey is choreographed with GSAP ScrollTrigger. Four waypoints move the ball centre → right → left → bottom-right across the acts, each leg scrubbed to scroll position. In the hero, the ball also carries drag-momentum physics: grab it, flick it, and it keeps spinning with inertia. That’s the standout moment — the page opens on an object with real weight, and the same flick carries into the story as you scroll down.

Around the ball sits an editorial street theme and a working front end. Every overlay — the booking card, stat cards, filter pills, step cards — uses a see-through “editorial glass” treatment (backdrop-blur, a faint scrim, a hairline border and a text-shadow) so the court bleeds through but the copy stays sharp. The interface is genuinely functional: a search overlay, a notifications panel, a booking card with a court carousel, city-filter pills, a how-it-works video modal, and a validated email capture.

Pipeline. Vite and vanilla JavaScript; Three.js for the real-time render; GSAP + ScrollTrigger for the scroll-driven experience. The court backgrounds were produced through a multi-model image bake-off and colour-graded into one consistent set, then edge-flood-filled to cut the graffiti to transparency. On narrow screens, a viewport-interpolated camera pull-back keeps the ball’s world-space waypoints byte-for-byte identical — the choreography never changes — while the object reads at a sensible size on a phone.

BALLERS is a self-initiated concept by WebWork Software. A real-time interactive basketball anchors a coordinated scroll experience, with a working interface built around it.

BALLERS is proof that a living, draggable 3D centrepiece can sit at the heart of a brand site and still feel effortless — real-time WebGL 3D, scroll-linked motion, photographic compositing and a full working interface, holding together on desktop and mobile alike. The 3D is interactive, not a video; the components work; the page performs.

It’s built for the brands that need a digital flagship with something nobody scrolls past — sport, streetwear, lifestyle, community. If that’s the kind of immersive brand site you’re planning, this is the engine, and it’s reusable.