Hey everyone! 👋

I wanted a way to showcase portfolio projects and video reels that felt less like another flat grid and more like walking through a private exhibition hall in Paris or Tokyo.

So I built 3D Studio Gallery — an interactive 3D media walkthrough aisle powered by vanilla Three.js and custom GLSL shaders.

Key highlights:

Real-time planar floor reflections: Procedural marble with subtle veins, customizable tile seams, warmth, and micro-ripple distortion.

Dual scroll drive modes: Use standalone mouse wheel control with momentum damping, or lock it directly to your page scroll.

Mixed media ready: Upload images, WebM/MP4 videos, and static preview posters per stand.

Production-ready performance: Built-in frustum culling, intelligent off-screen video pausing, and static canvas fallbacks so your Framer editor stays lightweight and responsive.

Would love to hear your thoughts and see how you use it in your portfolios or client projects! Drop feedback below 👇

Hey everyone! 👋

I wanted a way to showcase portfolio projects and video reels that felt less like another flat grid and more like walking through a private exhibition hall in Paris or Tokyo.

So I built 3D Studio Gallery — an interactive 3D media walkthrough aisle powered by vanilla Three.js and custom GLSL shaders.

Key highlights:

Real-time planar floor reflections: Procedural marble with subtle veins, customizable tile seams, warmth, and micro-ripple distortion.

Dual scroll drive modes: Use standalone mouse wheel control with momentum damping, or lock it directly to your page scroll.

Mixed media ready: Upload images, WebM/MP4 videos, and static preview posters per stand.

Production-ready performance: Built-in frustum culling, intelligent off-screen video pausing, and static canvas fallbacks so your Framer editor stays lightweight and responsive.

Would love to hear your thoughts and see how you use it in your portfolios or client projects! Drop feedback below 👇