Scroll Stack Cards — Scroll-driven 3D card deck with timeline

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.

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.