3D Image Slider

A continuous 3D image cylinder that rotates while on screen. Pass your own images - install ships demo photos next to the component. Built with motion.

Default

Ten images around a spinning cylinder. Soft edge mask, linear loop while in view; slows under reduced motion.

Loading…

Installation

CLI

npx @sonojs/ui@latest add 3d-image-slider

Also needsnpm i motion

Usage

Demo images install under components/carousels/3d-image-slider/images/ and are imported by the defaults. Pass your own images when you replace them.

page.tsx

"use client"

import { ThreeDImageSlider } from "@/components/carousels/3d-image-slider"

export default function Page() {
  return (
    <div className="h-[560px] w-full">
      <ThreeDImageSlider
        duration={32}
        cardWidth="15em"
        rotationDirection="left"
        withMask
      />
    </div>
  )
}

Props

Prop	Type	Default	Description
images	string[]	bundled images	Image URLs around the cylinder. Defaults to static imports from `./images/`.
duration	number	32	Seconds for one full 360° rotation.
cardWidth	string	"17.5em"	CSS width of each card (px, rem, em, …).
cardAspectRatio	string	"7/10"	CSS aspect-ratio of each card.
perspective	string	"35em"	CSS perspective on the stage.
rotationDirection	"left" · "right"	"left"	Cylinder spin direction.
withMask	boolean	true	Soft edge fade mask on the stage.
className	string	-	Extra classes on the outer stage.
containerClassName	string	-	Alias for `className`.
imageClassName	string	-	Extra classes on each image.