Scroll Stack Cards

What is Scroll Stack Cards?

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 .

Scroll-driven 3D card deck with timeline