Pixel UI
Controls

Gallery Corridor

Preview
Reduced motion

Simulates prefers-reduced-motion for the demo. Off follows your system setting.

Keyboard stepping

Steps focus through the demo with ] and [. Tab, arrows, and Escape stay native so the component behaves as shipped.

Gallery Corridor

01 / 10

Sunset, Extended

Live visuals · Ran 40 minutes over · 2026

Scroll or drag to walk, click a piece to open it

Gallery Corridor

A portfolio hero that walks you down a bending wireframe corridor hung with glowing pieces of work.

Dependencies

threemotion

Installation

npx shadcn@latest add ikislay/pixel-ui/gallery-corridor

How to use

import { GalleryCorridor } from "@/components/ui/gallery-corridor"


export function Demo() {
  return <GalleryCorridor className="h-[640px] w-full" />
}

Source Code

// Loading…

Props

Options you can pass to customize this component.

Prop
Type
Description
items
{ title: string; meta: string; color: string }[]

The pieces, in walking order. color tints the artwork, its frame and the grid around it; the first 24 light the grid.

className
string

Classes applied to the root. Give it a height; the corridor fills it.