Stacked Teaser Cards

A 3D-stacked card teaser component where cards rise on hover and stacking angles can be customized via camera and positioning props.

Stacked Teaser Cards

A 3D-stacked interactive card layout. The top card and any hovered card lift forward, while the rest fade into the background. Useful for showcasing features, teasers, or content highlights.

Props

  • items — array of objects { badge?: string; title: string; footnote?: string }. Each item renders as one card. More items = more stacked cards (only the first 3 are visible by default).
  • cameraPitch — tilt of the stack around the X axis (default -28).
  • cameraYaw — tilt of the stack around the Y axis (default 20).
  • cameraRoll — tilt of the stack around the Z axis (default -3).
  • depthStep — Z-axis spacing between cards (default 68).
  • xStep — horizontal offset per card (default -34).
  • yStep — vertical offset per card (default -26).
  • cardPositionClass — Tailwind classes for positioning the entire stack (top, left, etc.).

New
Latest updates and features
Today
Popular
Trending
2 days ago
Featured
Editor’s pick
Just in