| items | Array<{ id?: string; title: string; icon?: ReactNode; image?: string; background?: string; content?: ReactNode }> | 6 built-in gradient cards (Blue hour, Moonrise, Dusk, Pink drift, First light, Tide) | Array of card items. Each item can have a title, optional icon (Lucide React component), image URL, CSS background (gradient/color), or custom content that replaces the image area. |
| visible | number | 4 | Maximum number of cards drawn in the stack at once. Additional cards wait out of sight and fade in as the stack moves forward. |
| autoplay | boolean | true | Enable automatic cycling through cards. |
| delay | number | 1600 | Milliseconds of rest between sweeps (animation cycles). |
| openTime | number | 0.5 | Seconds for the split to open (front card halves swing apart). |
| hopTime | number | 0.36 | Seconds for each hop past one card. Total animation time grows with the stack size. |
| closeTime | number | 0.5 | Seconds for the halves to rejoin at the back of the stack. |
| hold | number | 0.25 | Share of each hop spent resting behind a card (0.05 to 0.8). Higher values = longer pause between hops. |
| hopArc | number | 2 | Small vertical hop per card, in % of card height. 0 = no vertical movement. |
| splitStagger | number | 0.06 | Seconds the right half lags the left during split (organic feel). |
| pauseOnHover | boolean | true | Pause autoplay when pointer enters the component. |
| clickToAdvance | boolean | true | Click the front card to trigger an immediate sweep. |
| size | number | 1 | Scales the whole stack proportionally. |
| aspect | number | 1.38 | Card width / height ratio. |
| radius | number | 4.4 | Corner radius as a % of card width. |
| spacing | { x: number; y: number; z: number } | { x: 13, y: -11, z: -90 } | Offset per card back. x, y in % of the card, z in px (keep negative for depth). |
| tilt | { x: number; y: number; z: number } | { x: 0, y: 0, z: 0 } | Degrees of rotation for the entire stack. Flat by default so every card is a true rectangle. |
| perspective | number | 1400 | Perspective in px. 0 = none (every card the same size, no depth scale). |
| perspectiveOrigin | string | "50% 45%" | CSS perspective-origin for the 3D transform. |
| split | number | 34 | How far each half swings out, in % of card width. |
| lift | number | 72 | Pixels each half comes toward you (capped below the z spacing). |
| splitRotate | number | 5 | Degrees each half rolls. Mirrored so both sides match. |
| splitTurn | number | 0 | Degrees each half turns in 3D. Anything above 0 makes trapezoids. |
| dim | number | 0.17 | How much darker each card gets per step back (0-1). |
| shadow | string | "0 34px 60px -26px rgba(0,0,0,0.75)" | CSS box-shadow under the cards. |
| theme | { card: string; border: string; highlight: string; text: string; badge: string; badgeText: string; dim: string; edge: string } | { card: "#2a2931", border: "rgba(255,255,255,0.07)", highlight: "rgba(255,255,255,0.06)", text: "#f4f4f6", badge: "rgba(255,255,255,0.08)", badgeText: "rgba(255,255,255,0.7)", dim: "#0b0a10", edge: "#ffffff" } | Complete color theme for the stack. All values are CSS color strings. |
| spring | object | { type: "spring", stiffness: 170, damping: 24, mass: 1 } | Framer Motion transition for cards moving forward between slots. |
| openEase | array | [0.22, 1, 0.36, 1] | Cubic bezier for the split opening animation. |
| hopEase | array | [0.65, 0, 0.35, 1] | Cubic bezier for each hop animation. |
| closeEase | array | [0.45, 0, 0.2, 1] | Cubic bezier for the rejoin animation. |
| minHeight | number | 360 | Minimum height in px used when the parent has no explicit height. |
| className | string | "" | Additional CSS classes for the root element. |
