Scroll Stack
Tubular forms sweeping diagonally across a near-black frame, oranges and cool blues folding past one another.
Warm glass, reds and greens fold into one another with no hard edge anywhere in sight.
Opens from a single point, violet giving way to green as it spreads.
Little cells of gold shot through with veins of deep, restless blue.
Hot pink and gold, a bright bloom caught exactly mid-open.
Teal and violet drift beneath a pane of glass.
Customize
Props
| Property | Type | Default | Description |
|---|---|---|---|
count | number | 6 | Number of cards to render (min 2, max 10). Cycles through the provided/demo card data. |
cards | { id, date?, title?, description?, tag?, image }[] | [] | Array of card data. Each card can include id, date, title, description, tag, image. If empty/omitted, fallback demo cards are shown. |
itemDistance | number | 90 | Vertical gap in pixels between consecutive cards before stacking begins. |
itemStackDistance | number | 26 | Extra scroll offset (px) added per card index so each pin locks slightly later than the previous one. |
stackPosition | number | 18 | Percentage from the top of the scroller where a card locks/pins. |
baseScale | number | 0.86 | Minimum scale applied to the first card once fully stacked. |
itemScale | number | 0.03 | Additional scale added per card index on top of baseScale. |
rotationAmount | number | 0 | Rotation in degrees applied per card index while stacking. |
blurAmount | number | 0 | Blur in pixels applied per card index while stacking. |
corner | number | 32 | Card border radius in pixels (auto-reduced on mobile). |
shadow | number | 1 | Multiplier controlling card drop-shadow spread/opacity. |
imageRatio | number | 1 | Aspect ratio (height/width) of the card image block. |
cardMaxWidth | number | 780 | Maximum width in pixels of each card. |
countnumberNumber of cards to render (min 2, max 10). Cycles through the provided/demo card data.
6cards{ id, date?, title?, description?, tag?, image }[]Array of card data. Each card can include id, date, title, description, tag, image. If empty/omitted, fallback demo cards are shown.
[]itemDistancenumberVertical gap in pixels between consecutive cards before stacking begins.
90itemStackDistancenumberExtra scroll offset (px) added per card index so each pin locks slightly later than the previous one.
26stackPositionnumberPercentage from the top of the scroller where a card locks/pins.
18baseScalenumberMinimum scale applied to the first card once fully stacked.
0.86itemScalenumberAdditional scale added per card index on top of baseScale.
0.03rotationAmountnumberRotation in degrees applied per card index while stacking.
0blurAmountnumberBlur in pixels applied per card index while stacking.
0cornernumberCard border radius in pixels (auto-reduced on mobile).
32shadownumberMultiplier controlling card drop-shadow spread/opacity.
1imageRationumberAspect ratio (height/width) of the card image block.
1cardMaxWidthnumberMaximum width in pixels of each card.
780Dependencies
Crafted withbyMohammad Tasin