DocsSpiral 3D Slider

Spiral 3D Slider

A compact, autoplaying image gallery that responds to scroll while flowing along a smooth 3D spiral.

Installation

pnpm dlx shadcn@latest add @componentry/spiral-3d-slider

Usage

Replace the example paths with your own local files or remote image URLs. Every image should include meaningful alternative text.

API Reference

PropertyTypeDefault
items

Images arranged along the 3D spiral.

Spiral3DSlide[]—
radius

Maximum horizontal radius of the spiral in pixels.

number235
verticalGap

Vertical pitch between neighboring images.

number64
cardWidth

Maximum width of each image plane in pixels.

number255
cardAspectRatio

Width divided by height for every image plane.

number1.5
autoRotate

Automatically advances the spiral while it is idle.

booleantrue
autoSpeed

Automatic movement measured in slides per second.

number0.13
scrollSensitivity

Amount of spiral movement produced by scrolling.

number0.0024
smoothing

Interpolation strength used for smooth movement.

number0.065
blurStrength

Maximum blur applied as images move away from focus.

number1.65
bend

Amount each segmented image plane curves into the spiral.

number0.17
fov

Perspective camera field of view in degrees.

number44
ariaLabel

Accessible name for the gallery region.

string"Spiral image gallery"
className

Additional classes for the scene.

string—

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X

Cinematic editorial gallery

  • Red fashion portrait swept through a long exposure
  • Profile illuminated by vivid blue motion trails
  • Portrait fragmented by layered horizontal motion
  • Teal portrait captured with an expressive camera blur
  • Monochrome photographer reflected through moving glass
  • Warm portrait dissolving through a soft orange exposure
  • Blue studio portrait split into a double exposure
  • Editorial portrait crossed by dark crimson light trails
  • Figure lit by saturated red and electric blue light
  • Shadowed portrait traced by muted green light
  • Silver portrait stretched into a quiet horizontal blur
  • Crimson profile emerging from a green studio shadow
  • Blue portrait stretched through a long exposure
  • Portrait washed in green light and a magenta prism haze
  • White-clad figure swept into a luminous studio motion
  • Portrait distorted through a translucent silver visor
"use client"

import {
  Spiral3DSlider,
  type Spiral3DSlide,
} from "@/components/ui/spiral-3d-slider"

// Add your own files to public/images/gallery, or use remote image URLs.
const slides: Spiral3DSlide[] = [
  { src: "/images/gallery/photo-01.jpg", alt: "Describe the first image" },
  { src: "/images/gallery/photo-02.jpg", alt: "Describe the second image" },
  { src: "/images/gallery/photo-03.jpg", alt: "Describe the third image" },
  { src: "/images/gallery/photo-04.jpg", alt: "Describe the fourth image" },
  { src: "/images/gallery/photo-05.jpg", alt: "Describe the fifth image" },
  { src: "https://example.com/photo-06.jpg", alt: "Remote images work too" },
]

export default function Gallery() {
  return (
    <Spiral3DSlider
      items={slides}
      autoRotate
      autoSpeed={0.13}
      className="min-h-[720px]"
    />
  )
}