Stack Reveal
ProA React 3D card stack built on Framer Motion where the front card drops away, the deck promotes, then it returns.
carouselcss 3d3dstackcardsrevealscrolldepth
Props
| Prop | Type | Default | Description |
|---|---|---|---|
cards | StackRevealCard[] | - | Photo cards in the stack. Defaults to curated Cloudflare landscapes. |
eyebrow | string | "Field notes" | Small uppercase label above the title. |
title | string | "Frames that keep their cool" | Primary headline shown to the left of the deck. |
description | string | - | Supporting copy under the title. |
aside | string | "Auto-cycles" | Optional footer line under the description. |
width | number | 520 | Width of each card in pixels. |
height | number | 330 | Height of each card in pixels. |
cardDistance | number | 56 | Horizontal offset between stacked cards in pixels. |
verticalDistance | number | 62 | Vertical offset between stacked cards in pixels. |
delay | number | 5000 | Milliseconds between automatic swaps. |
pauseOnHover | boolean | false | Optional. Pause automatic swaps while hovered. |
skewAmount | number | 6 | Y-axis skew applied to every card, in degrees. |
easing | "elastic" | "linear" | "elastic" | Motion style. elastic = spring overshoot; linear = tighter ease-in-out. |
onCardClick | (idx: number) => void | - | Fires when a card is clicked. |