The starting point

One Monday morning I opened the Visionnaire website — the streetwear brand by Bigflo & Oli.

A clean Shopify. Polished but generic. Like 95% of fashion brands in France.

I thought: what if their catalogue became an experience?

Step 1 — Scrape the catalogue

First step: get the real product data. Shopify exposes a clean JSON via /products.json, so a single Node script pulled:

• 205 products

• 13 collections

• All high-res photos

• Every price, description, and variant

No mock data. If the project ever caught the brand's eye, the real catalogue had to be the one running.

Step 2 — Pick the stack

The challenge: push the 3D without killing performance or maintainability.

• Next.js 14 (App Router) — SSR for SEO, RSC for static zones

• React Three Fiber + Drei — React wrappers around Three.js that cut 80% of the WebGL boilerplate

• GSAP + ScrollTrigger — to sync DOM scroll with 3D positions

• Lenis — smooth scroll on the main thread, otherwise R3F drifts

• Tailwind — for everything still classic (header, footer, popup)

• Custom GLSL shaders — chromatic aberration, grain, distortion

Step 3 — The 3D Image Tube

The heart of the experience: a 3D tube with product images scrolling as you move down the page.

Inspiration: the Codrops 3D Image Tube demo. I forked the concept and adapted it to e-commerce mechanics — every image in the tube is clickable, hover triggers the pixel halo, click opens the product popup.

The custom fragment shader applies:

• Progressive chromatic aberration (stronger at screen edges)

• Animated grain for the cinematic feel

• Subtle distortion on high-velocity scroll zones

Step 4 — The details that make the difference

What separates a tech demo from a real brand experience:

• Extruded WebGL logo at load (Visionnaire logotype in 3D, reveal animation)

• Ambient sound that starts on user opt-in, subtle fade out on every interaction

• Easter eggs — hidden references to Bigflo & Oli tracks for fans who know (look closely)

• Product popup with GSAP enter/exit animation, blur background, full info

Step 5 — Performance

3D on the web has a reputation: it lags. Decisions to stay smooth:

• dpr capped at 1.5 (otherwise 4K retinas eat everything)

• Texture images lazy-loaded through Drei's useTexture

• Grain overlay in CSS, not WebGL (saves a draw call)

• Lenis on main thread to sync DOM/WebGL

• Static fallback planned for mobile devices < 4GB RAM (still TODO)

Step 6 — Deploy

Vercel, two minutes: npx vercel. The project lives at visionnaire-3d.vercel.app.

Open it on desktop with a large screen. That's where the experience really takes shape.

Why I built this

Nobody asked. Visionnaire didn't commission this project. I built it on my own time, in 2 days, from Kuala Lumpur.

Because brands with a real identity deserve a site that lives up to their universe.

Not a Shopify template. An experience.