Tumble Deck Showcase
A scroll-driven 3D stack of website screenshots. The front card tips forward and lands flat while the next card moves into position. The deck loops endlessly in both directions.
Installation
Install the GSAP dependency if it is not already present:
Usage
import TumbleDeckShowcase, { type TumbleCard } from "@/components/veltrixui/tumble-deck-showcase"
const cards: TumbleCard[] = [
{ src: "/images/site-one.webp", alt: "Site one preview" },
{ src: "/images/site-two.webp", alt: "Site two preview" },
{ src: "/images/site-three.webp", alt: "Site three preview" },
]
export function Showcase() {
return <TumbleDeckShowcase cards={cards} height="100svh" />
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
cards | TumbleCard[] | Required | Images to show in the looping deck. |
height | number | string | "100svh" | Any valid CSS height. |
aspect | number | 2.06 | Card width divided by card height. |
scrollPerCard | number | 240 | Scroll pixels needed to tip one card. |
depth | number | 5 | Number of upright cards visible behind the front card. |
background | string | Theme background | Scene background color. |
className | string | — | Additional root classes. |
style | React.CSSProperties | — | Inline root styles. |
ariaLabel | string | "Website showcase" | Accessible region label. |
Interaction
- Scroll vertically or horizontally to scrub through the deck.
- Drag vertically to move between previews.
- Click the scene or use the arrow keys, Space, or Enter to advance.
- The deck wraps around after the final image.
- Respects the operating system's reduced-motion preference.
The component uses your supplied image URLs. Keep image dimensions consistent for the smoothest visual result.