Amines UI

Split Stack Photo

A photo card stack where the front card splits in two, travels through the stack, then rejoins at the back in an infinite loop.

Installation

  1. 1

    Install the component:

    npx shadcn@latest add https://ui.amines.fun/r/split-stack-photo.json
  2. 2

    Usage:

    jsx

    app/page.jsx

    const items = [  {    title: "Autumn porch",    subtitle: "Vermont",    image: "https://picsum.photos/seed/porch/700/700",  },  {    title: "Lake path",    subtitle: "Maine",    image: "https://picsum.photos/seed/lake/700/700",  },  {    title: "Ridge light",    subtitle: "Colorado",    image: "https://picsum.photos/seed/ridge/700/700",  },  {    title: "Golden hour",    subtitle: "Oregon",    image: "https://picsum.photos/seed/golden/700/700",  },];<SplitStackPhoto   size={0.5}  items={items}   visible={4}   theme={{ edge: "#FF7138" }} />

Props

PropTypeDefaultDescription
itemsArray<{ id?: string; title?: string; subtitle?: string; icon?: ReactNode; image?: string; background?: string; content?: ReactNode }>6 built-in gradient cardsCards to show. Each item can use an image URL, CSS background, or custom React content. Titles, subtitles, and icons appear in the hover caption.
visiblenumber4Maximum number of cards drawn in the stack.
autoplaybooleantrueAutomatically advance the front card.
delaynumber1600Rest time between sweeps, in milliseconds.
aspectnumber1Card width divided by card height.
spacing{ x: number; y: number; z: number }{ x: 7, y: 0, z: -110 }Offset per card back. x and y are percentages; z is in pixels.
themeobjectBuilt-in dark themeColors for the cards, captions, dimming, and split edge.
clickToAdvancebooleantrueAdvance the stack on click, Enter, Space, or ArrowRight.
pauseOnHoverbooleantruePause autoplay while the pointer is over the component.
classNamestring""Additional CSS classes for the root element.