GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing pro.reactbits.dev — Scroll Stack

Get Started

Site

Browse

All Components80 New

Text34

Backgrounds98

3D & Shaders49

Cursor Effects21

UI & Cards28

Scroll Stack

Cards that stack and fade away as you scroll

scroll-stack-tw

Customize

Scroll Length

1.0vh

Peek

26px

Scale Step

0.070

Blur

4.0px

Dim

0.28

Smooth

0.16

Depth

Card Width

880px

Card Height

0.68

Border Radius

22px

Perspective

1400px

Show ProgressShow Counter

Props

Name	Type	Default	Description
`items`	ScrollStackItem[]	`5 cards`	Cards rendered by the built-in layout. Each accepts eyebrow, title, body, image and accent.
`children`	ReactNode	`undefined`	Custom cards, one per child. Supplying children replaces the built-in card layout entirely.
`variant`	"stack" \| "deck" \| "fade" \| "flip" \| "zoom" \| "reveal"	`"stack"`	Which stacking animation runs as the cards change over.
`scrollLength`	number	`1`	Viewport heights of scrolling assigned to each card.
`peek`	number	`26`	Pixels a covered card slides up so its edge peeks out.
`scaleStep`	number	`0.07`	How much a covered card shrinks per step, from 0 to 1.
`blur`	number	`4`	Maximum blur in pixels applied to covered cards. Set 0 to disable the filter entirely.
`dim`	number	`0.28`	How far covered cards darken, from 0 to 1.
`smooth`	number	`0.16`	Scroll follow damping. 0 tracks the scrollbar exactly, higher values trail behind it.
`depth`	number	`3`	How many covered cards stay mounted behind the active one. Lower is cheaper to render.
`cardWidth`	number	`880`	Maximum card width in pixels.
`cardHeight`	number	`0.68`	Card height as a fraction of the viewport.
`borderRadius`	number	`22`	Corner radius of the cards in pixels.
`perspective`	number	`1400`	Perspective depth in pixels used by the flip variant.
`showProgress`	boolean	`true`	Show the progress rail under the stack.
`showCounter`	boolean	`true`	Show the numeric counter under the stack.
`onIndexChange`	(index: number) => void	`undefined`	Fired whenever the frontmost card changes.
`className`	string	`undefined`	Extra classes for the outer section.

itemsScrollStackItem[]

Cards rendered by the built-in layout. Each accepts eyebrow, title, body, image and accent.

Default5 cards

childrenReactNode

Custom cards, one per child. Supplying children replaces the built-in card layout entirely.

Defaultundefined

Which stacking animation runs as the cards change over.

Default"stack"

scrollLengthnumber

Viewport heights of scrolling assigned to each card.

Default1

peeknumber

Pixels a covered card slides up so its edge peeks out.

Default26

scaleStepnumber

How much a covered card shrinks per step, from 0 to 1.

Default0.07

blurnumber

Maximum blur in pixels applied to covered cards. Set 0 to disable the filter entirely.

Default4

dimnumber

How far covered cards darken, from 0 to 1.

Default0.28

smoothnumber

Scroll follow damping. 0 tracks the scrollbar exactly, higher values trail behind it.

Default0.16

depthnumber

How many covered cards stay mounted behind the active one. Lower is cheaper to render.

Default3

cardWidthnumber

Maximum card width in pixels.

Default880

cardHeightnumber

Card height as a fraction of the viewport.

Default0.68

borderRadiusnumber

Corner radius of the cards in pixels.

Default22

perspectivenumber

Perspective depth in pixels used by the flip variant.

Default1400

showProgressboolean

Show the progress rail under the stack.

Defaulttrue

showCounterboolean

Show the numeric counter under the stack.

Defaulttrue

onIndexChange(index: number) => void

Fired whenever the frontmost card changes.

Defaultundefined

classNamestring

Extra classes for the outer section.

Defaultundefined

You are visitor 01402520 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.