Menu
Scroll Stack
Published on July 18, 2025
Ribbons of warm light
Tubular forms sweeping diagonally across a near-black frame, oranges and cool blues folding past one another.
light
Published 6 days ago
Molten colour swirls
Warm glass, reds and greens fold into one another with no hard edge anywhere in sight.
colour
Published 2 weeks ago
A fan of luminous blades
Opens from a single point, violet giving way to green as it spreads.
form
Published 3 weeks ago
Poured pigment pools
Little cells of gold shot through with veins of deep, restless blue.
texture
Published a month ago
Petals unfurl
Hot pink and gold, a bright bloom caught exactly mid-open.
bloom
Published 5 weeks ago
Marbled currents
Teal and violet drift beneath a pane of glass.
study
Customize
Cards6
Card Width500
Item Gap30
Stack Distance20
Corner32
Shadow1
Pin Position18
Base Scale0.86
Item Scale0.03
Rotation0
Blur0
Image Ratio1
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. |
countTypenumber
Default
6Number of cards to render (min 2, max 10). Cycles through the provided/demo card data.
cardsType{ id, date?, title?, description?, tag?, image }[]
Default
[]Array of card data. Each card can include id, date, title, description, tag, image. If empty/omitted, fallback demo cards are shown.
itemDistanceTypenumber
Default
90Vertical gap in pixels between consecutive cards before stacking begins.
itemStackDistanceTypenumber
Default
26Extra scroll offset (px) added per card index so each pin locks slightly later than the previous one.
stackPositionTypenumber
Default
18Percentage from the top of the scroller where a card locks/pins.
baseScaleTypenumber
Default
0.86Minimum scale applied to the first card once fully stacked.
itemScaleTypenumber
Default
0.03Additional scale added per card index on top of baseScale.
rotationAmountTypenumber
Default
0Rotation in degrees applied per card index while stacking.
blurAmountTypenumber
Default
0Blur in pixels applied per card index while stacking.
cornerTypenumber
Default
32Card border radius in pixels (auto-reduced on mobile).
shadowTypenumber
Default
1Multiplier controlling card drop-shadow spread/opacity.
imageRatioTypenumber
Default
1Aspect ratio (height/width) of the card image block.
cardMaxWidthTypenumber
Default
780Maximum width in pixels of each card.
Dependencies
Crafted withbyMohammad Tasin