3D Isometric Image Carousel

Galleries 42

About

3D isometric image carousel for React: portrait photos stand on edge in a tilted row and the selected photo widens and lifts out on a spring. Dark stage, titles, a glass prev/next pill with dots, keyboard arrows and swipe, reduced-motion aware. Use as a photo gallery, portfolio strip or product showcase.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds 3D Isometric Image Carousel to your project and fits it to your theme.

Code

How 3D Isometric Image Carousel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import IsometricLiftCarousel, { type IsometricLiftItem } from "@/components/ui/isometric-lift-carousel"

const u = (id: string) =>
  "https://images.unsplash.com/photo-" + id + "?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0"

const photos: IsometricLiftItem[] = [
  { title: "Sidewalk", src: u("1779525822769-d1bbd2c0e4bd") },
  { title: "Red roof", src: u("1779525822818-07a55330f964") },
  { title: "Signs", src: u("1779525822831-a3f03711c7d7") },
  { title: "Speed limit", src: u("1779525822819-8ddef8f8ee18") },
  { title: "Lilac tree", src: u("1779525822839-26386802c4fd") },
  { title: "Light-colored house", src: u("1778494824647-af2adeacd8b8") },
  { title: "Street light pole", src: u("1779525822731-4bde2805c932") },
  { title: "Tree-lined street", src: u("1779618258222-556cd048c6d0") },
]

export default function Demo() {
  // w-full is load-bearing: 21st centres every demo in a flex wrapper, and a
  // flex item left at width:auto shrinks to fit its contents.
  return (
    <div className="w-full">
      <IsometricLiftCarousel items={photos} />
    </div>
  )
}