Scroll Stack

Fan stack

Three numbered steps dealt from a pile into a cascade as you scroll.

scrollerRef

points the scroll trigger at the box it scrolls in. Leave it out on a normal page and the window drives the deal.

tone

on a card picks its surface — muted, light or accent, all tinted from your primary colour. By default the cards step through them in order.

side

on FanStackThumb hangs the photo off the card's right, left or top edge in the cascade.

Card gap

cardGap={64}

is the pixel offset between stacked cards, which is what keeps the titles underneath readable.

color="#1e3a8a"

on a StackItem sets its unique background color (supports hex codes, CSS colors, or Tailwind classes).

Sticky stack

A headed section where each card sticks and the next overlaps it.

contentType

on an item picks its body: list, image, split or custom.

Stack geometry

scaleStep={0.08}

is how far each covered card recedes.

stackOffsetStep={28}

is the pixel offset that keeps earlier headers peeking out.

Pinned right

A two-column layout: the right column pins while the left scrolls its deck past it.

stickySide="right"

pins the right-hand column so cards stack on the right.

Pinned left

FlipstickySide="left"

and the deck moves to the left side.

cardDepthScale

and cardOffset tune that deck's shrink and spacing.

Horizontal Scroll Stack

The section pins and vertical scroll is translated into horizontal travel.

items

become the cards on the rail, in order.

Shorter Rail

items

slide continuously across the viewport without stacking.