3D SpatialGallery

A WebGL media tunnel that turns a list of images and videos into an infinite scrollable space. Planes recycle in both directions, so travel never ends. Built for portfolios, showreels, and studio landing pages.

ABOUT COMPONENT

- Infinite depth loop in both directions, forward and back

- Videos stay unloaded until hovered, so 60 planes cost one decoder

- Ring layout with an adjustable hollow core to keep the centre clear

- Front or Funnel facing, with a blend amount for the funnel angle

- Spiral mode bends the ring into a corkscrew that rotates as it travels

- Auto Move drifts on its own and stacks on top of manual input

- Drag to travel, with a threshold so a drag never fires a link

- Mouse parallax across the scene, with sensitivity control

- Scroll capture toggle, so it can sit inside a normally scrolling page

- Rounded corners drawn in the shader, no masks, no extra draw calls

- Honours prefers-reduced-motion, pauses on tab blur, survives context loss

WHAT'S INCLUDED

- One code component, no dependencies to install

- 24 property controls, nothing needs the code editor

- Per item URL, upload, poster, alt text, and link

- A canvas preview that matches the live render, not a grey box

- Hidden crawlable list of alt text and links for SEO and screen readers

HOW IT WORKS

1. Drop it on your canvas and set the frame size.

2. Add items. Paste a URL or upload, then set a poster for videos.

3. Pick Front or Funnel, set Count and Hollow, done.

USE CASES

- Design and motion portfolio heroes

- Studio and agency showreel pages

- Photography and film archives

- Product launch landing pages

- Fashion lookbooks

KEYWORDS

framer, webgl, three.js, 3d gallery, video gallery, scroll tunnel, infinite scroll, portfolio, showreel, hover video, parallax, spiral, depth, media wall, immersive, interactive, hero section