---
title: "Scroll Stack Cards — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Aidan Looker · Cards. What is Scroll Stack Cards?"
canonical: "https://framer.elliotli.dev/component/scroll-stack-cards"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Scroll Stack Cards

# Scroll Stack Cards

Scroll-driven 3D card deck with timeline

[View on Framer](https://framer.com/marketplace/components/scroll-stack-cards/?via=elliot-li)

![Scroll Stack Cards preview image 1](https://framer.elliotli.dev/og/component/scroll-stack-cards/40bfbd0bca3da2af/1600x1200.jpg)

## Summary

What is Scroll Stack Cards?

## Description

## What is Scroll Stack Cards?

Scroll Stack Cards is a scroll-driven component that synchronises a vertical dot-and-line timeline with a 3D depth-stacked card deck. As the user scrolls, the front card peels away with natural motion while the next card rises into focus — creating a cinematic reveal for process steps, feature tours, and service pages. Designed for agencies, SaaS products, and portfolios that need structured storytelling without sacrificing visual impact.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   Scroll-synchronised 3D card deck with staggered depth, dynamic shadows, and peel-away exit animation
    
-   Vertical dot-and-line timeline with pulsing active indicator, segment fill, and per-step stats
    
-   Six built-in theme presets (Dark, Light, Indigo, Emerald, Rose, Amber) plus a fully custom colour mode
    
-   Optional background images per card with automatic gradient overlay and light-on-dark text
    
-   Full typography control — assign independent fonts for titles, descriptions, labels, stats, and card text
    
-   Toggle deck visibility for a mobile-friendly layout
    

## Controls inside Framer

### Content

-   Steps array — add up to 10 steps, each with label, title, description, stat, stat label, card title, card description, card icon, and card image
    

### Theme

-   Theme preset selector (Dark, Light, Indigo, Emerald, Rose, Amber, Custom)
    
-   Custom colour overrides for text, accent, card background, dot, and line colours
    

### Layout

-   Show Card toggle — display or hide the card deck entirely
    
-   Card Position — place the card deck on the left or right side
    
-   Scroll / Step — control how many pixels of scroll each step requires (100–1000 px)
    
-   Step Gap — vertical spacing between timeline items
    

### Card Style

-   Border Radius
    
-   Shadow Intensity
    
-   Accent Bar toggle
    

### Typography

-   Title Font
    
-   Description Font
    
-   Label Font
    
-   Stat Font
    
-   Stat Label Font
    
-   Card Font
    

### Visibility

-   Card Deck
    
-   Card Icons
    
-   Card Descriptions
    
-   Dot Pulse animation
    
-   Progress Bar
    
-   Labels
    
-   Descriptions
    
-   Stats
    

## Best use cases

-   Agency and consultancy service pages — walk prospects through your engagement process step by step
    
-   SaaS onboarding and feature tours — reveal product capabilities in a guided, scroll-driven sequence
    
-   Portfolio case study breakdowns — present project phases with visual cards and supporting metrics
    
-   Pricing or plan comparison pages — pair each tier with a dedicated card and highlight key stats
    

## Built for production

Drop Scroll Stack onto any page, connect your content, and ship a scroll experience that holds attention.

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [**contact@teampixel.com.au**](mailto:contact@teampixel.com.au).

## Rank history [How rankings work →](/terms#rankings)

-   All · #2134

## Details

- **Author**: Aidan Looker
- **Price**: $14.00
- **Published**: 2026-06-05
- **Updated**: 2026-06-13
- **Added**: 2026-05-21
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator