Immersive section with cards that stack on scroll. Depth effect with blur, scale and progress indicator.
Stacking Cards
The Stacking Cards section creates an immersive effect where cards stack on top of each other as the user scrolls. Each card takes up the full screen (or a portion) and reveals the next one by compressing/blurring. Ideal for storytelling, brand presentations or campaign pages.
Key features
| Feature | Description |
|---|---|
| Stack on scroll | Cards progressively overlay each other |
| Blur effect | Previous cards become blurred |
| Scale effect | Previous cards shrink |
| Snap scroll | Optional "magnetic" scroll between cards |
| Progress indicator | Dots or bar to visualize position |
| Content animation | Text animates on each card's entry |
| 2 card layouts | Fullscreen or Split (image + text) |
Main settings
Stacking effect
| Setting | Description | Options | Default |
|---|---|---|---|
| Blur intensity | Blur strength on past cards | 0-20px | 8px |
| Scale factor | Reduction of past cards | 50-100% | 90% |
| Snap scroll | Magnetic snapping between cards | On / Off | Off |
Progress indicator
| Setting | Description | Options | Default |
|---|---|---|---|
| Show progress | Display the indicator | On / Off | On |
| Style | Indicator type | Dots / Bar | Dots |
| Position | Indicator side | Left / Right | Right |
| Color | Indicator color | Foreground / Accent 1 / Accent 2 / Background | Foreground |
Content animation
| Setting | Description | Options | Default |
|---|---|---|---|
| Animate content | Text animates on entry | On / Off | On |
Card block
Each card is an individual block with its own settings:
Card layout
| Setting | Description | Options | Default |
|---|---|---|---|
| Layout | Display mode | Fullscreen / Split | Fullscreen |
| Height | Card height | 50vh / 75vh / 100vh | 100vh |
| Color palette | Card color scheme | All available palettes | scheme-1 |
Media
| Setting | Description |
|---|---|
| Image | Card background image |
| Video | Background video (alternative to image) |
Content
| Setting | Description |
|---|---|
| Subtitle | Small text above the title |
| Title | Card main title |
| Title size | Scale (80-150%) |
| Text | Descriptive paragraph (rich text) |
| Button text | CTA label |
| Button link | Destination URL |
| Button style | Primary / Secondary / Tertiary |
Position (Fullscreen mode)
| Setting | Description | Options | Default |
|---|---|---|---|
| Vertical position | Vertical content placement | Top / Middle / Bottom | Middle |
| Horizontal position | Horizontal placement | Left / Center / Right | Center |
| Max content width | Text block width | 400-1000px | 600px |
Split (Split mode)
| Setting | Description | Options | Default |
|---|---|---|---|
| Ratio | Image/text distribution | 40/60 / 50/50 / 60/40 | 50/50 |
| Reverse | Put text on left | On / Off | Off |
Use cases
Brand storytelling
- 4-5 cards in Fullscreen at 100vh
- Each card = one chapter of the story
- Different color palettes per card
- Lifestyle background images
- Dots progress on the right
Product presentation
- 3 cards in Split
- Card 1: The problem (before image)
- Card 2: The solution (product image)
- Card 3: The result + "Buy" CTA
- 50/50 ratio, alternate reverse for dynamics
Campaign landing page
- 4 mixed cards: 2 Fullscreen + 2 Split
- First card: hero with main message
- Middle cards: features and proof
- Last card: strong CTA in Bottom position
- Snap scroll enabled for controlled scrolling
About page
- 3-4 Fullscreen cards
- Subtitles for context (year, milestone)
- Short, punchy titles
- Team and key moment images
- Progress bar on the left
💡Use different color palettes for each card to create a rich visual experience on scroll. The color change between cards reinforces the sense of narrative progression.
⚠️The Stacking Cards section is very immersive but can be disorienting if too long. Limit yourself to 3-5 cards for a smooth experience. Beyond that, the user may lose patience.
ℹ️Snap scroll forces scrolling to stop on each card. It is very satisfying on desktop but can be frustrating on mobile. Test on both devices before enabling this option.