StackingCards

Full‑screen cards that stack on top of each other as the user scrolls. Each card remains sticky and covers the previous one, producing a layered reveal effect.

Use Cases

• Hero sections with multiple value propositions
• Product feature showcases on landing pages
• Storytelling sections that reveal content progressively
• About us / company values sections

Properties

items

Array of card objects. Each card takes up the full viewport height. Type: array. Required: true.

effect

plain = cards simply stack. scaleRotate = previous cards shrink and tilt as the next card covers them. Type: string. Options: plain, scaleRotate. Default: scaleRotate. Required: false.

customCss

Custom CSS property pairs (e.g., 'padding: 0; margin-top: -1px;'). Type: string. Required: false.

Best Practices

• Use 2‑4 cards maximum — more than 5 makes the section too long
• Alternate light and dark backgrounds for visual contrast between cards
• Keep headings short and impactful (3‑8 words)
• Use scaleRotate effect for more dramatic visual impact
• Pair with a navigation component above so users can skip past if needed

Common Mistakes

Using the same background color for consecutive cards

Why it's a problem: There's no visual indication that a new card has appeared — the transition is invisible

Fix: Alternate between dark (#1e293b, #0f172a) and light (#f8fafc, #ffffff) backgrounds, or use brand colors

Adding more than 5 cards

Why it's a problem: Each card requires scrolling through a full viewport height. 5+ cards = 5+ screen heights of scrolling

Fix: Keep to 2‑4 cards. Use a different component (StickyScroll, ImageTabs) for more items