Spatial gallery

A WebGL media tunnel of images and videos that never ends: scroll or drag to travel, and the ring twists into a turning spiral as you go. Videos load only when hovered. Built for portfolios, showreels and studio pages.

Backgrounds, scroll, drag and hover, Motion + GSAP

Install

npm i clsx gsap motion tailwind-merge && curl -o components/spatial-gallery.tsx https://motion-brew.com/r/spatial-gallery.tsx

One self contained file for React and Tailwind CSS: spatial-gallery.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { SpatialGallery } from "@/components/spatial-gallery";

export default function Work() {
  return (
    <SpatialGallery
      className="h-dvh"
      items={[
        { src: "/work/one.jpg", alt: "Brand film for Lumen", href: "/work/lumen" },
        { src: "/work/reel.mp4", type: "video", poster: "/work/reel.jpg", alt: "2026 reel" },
      ]}
    >
      <h1 className="absolute inset-0 grid place-items-center text-[48px] font-semibold">Selected work</h1>
    </SpatialGallery>
  );
}

Props

Prop	Type	Default	Description
items	SpatialItem[]	14 samples	src, type (image or video), poster, alt, href
count	number	124	Planes in the tunnel, 8 to 160
radius	number	4.1	Tunnel radius
core	number	0.8	Hollow core, 0 to 0.95
spacing	number	0.2	Depth between planes
size	number	0.95	Plane size
roll	number	0	Each plane's own tilt, 0 to 1
facing	"front" \	"funnel"	"funnel"
funnel	number	0.78	How far Funnel leans into the wall, 0 to 1
spiral	boolean	true	Corkscrew that turns as it travels
twist	number	0.3	Corkscrew strength, 0 to 1
autoMove	boolean	true	Drift on its own, on top of input
speed	number	0.8	Auto move speed; negative goes backward
scrollSpeed	number	2.1	How far the wheel or page scroll carries you
captureScroll	boolean	true	Scrolling over it travels instead of scrolling the page
followPageScroll	boolean	true	Travel as the page scrolls past
drag	boolean	true	Drag to travel
parallax	number	0.5	Lean with the pointer, 0 to 1
corner	number	0.22	Corner radius as a share of the plane height
fog	number	0.8	Fade out with distance (to transparent)
caption	boolean	true	Name the hovered item
linkTarget	"_self" \	"_blank"	"_self"
children	ReactNode		Anything on top, like a heading
className	string		Size it; default height 560px

More backgrounds

Pixel blast: A background of dithered pixel clouds that drift, shimmer and light up under the cursor.
Contour lines: A background of live topographic lines that bend around the cursor.
Pixel scroll: A scroll-driven pixel transition from one color or image to another, with directions, patterns, easings and accent pixels in the moving band.
Magnetic flow: Cards follow the leader like a snake, then burst open like the sun.

All animated react backgrounds and shaders