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

Dependencies: @react-three/fiber three clsx tailwind-merge

Usage

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

API Reference

PropTypeDefault
itemsSpiral3DSlide[]

Images arranged along the 3D spiral.

—
radiusnumber

Maximum horizontal radius of the spiral in pixels.

235
verticalGapnumber

Vertical pitch between neighboring images.

64
cardWidthnumber

Maximum width of each image plane in pixels.

255
cardAspectRationumber

Width divided by height for every image plane.

1.5
autoRotateboolean

Automatically advances the spiral while it is idle.

true
autoSpeednumber

Automatic movement measured in slides per second.

0.13
scrollSensitivitynumber

Amount of spiral movement produced by scrolling.

0.0024
smoothingnumber

Interpolation strength used for smooth movement.

0.065
blurStrengthnumber

Maximum blur applied as images move away from focus.

1.65
bendnumber

Amount each segmented image plane curves into the spiral.

0.17
fovnumber

Perspective camera field of view in degrees.

44
ariaLabelstring

Accessible name for the gallery region.

"Spiral image gallery"
classNamestring

Additional classes for the scene.

—

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
PreviousSignatureNextSplit Flap Display

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]"
    />
  )
}