Stacking Cards

Overview

Stacking Cards lets proof accumulate. Each card stays in the memory of the section while the next one arrives.

Use Stacking Cards when an ordered set should accumulate pressure as the visitor moves. SaaS teams and agency process pages are the best fit because the effect makes each step feel added to the last rather than replaced. The page job is momentum: the sequence should build confidence without hiding earlier context.

In production, the risk is card order. If pinning fails on older iOS Safari or reduced motion is enabled, the cards must still read in the intended order as normal content.

Install

Usage

Component Code

Example Production Use Case

An agency explaining a four-step delivery process: Stacking Cards lets each phase accumulate on the page so the method feels built, not merely listed. The outcome is trust: the process feels deliberate before the prospect reaches the CTA.

Best Used For

• Process, proof, and principle sections where each item should accumulate visual weight.
• Milestone, principle, or proof sequences where impressions should accumulate.
• Lets process steps or proof points accumulate, making the sequence feel heavier with every card.

Not For

Not for comparison grids, forms, or pages where accumulated cards would obscure the next action.

Not for card groups where hidden depth would make keyboard focus or link order confusing.

Performance Budget

Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes.

Accessibility and Mobile

The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards.

Common Mistakes

• Stacking more cards than can remain legible.
• Letting overlap hide keyboard focus or link targets.
• Using accumulation for unrelated cards that do not build an argument.