Scroll Stack Deck is a customizable, scroll-driven project showcase for Framer that gives portfolios and creative websites a more tactile way to present projects.
Instead of displaying projects in a traditional grid or carousel, each project lives inside a layered card stack. As visitors scroll, the cards smoothly move through the stack, bringing the next project into focus while previous projects settle behind it.
It works especially well for portfolio websites, case studies, creative studios, agencies, personal websites, and editorial experiences.
Project Management
Add, remove, and reorder projects directly from the Projects control.
Add project titles, descriptions, tags, images, and links.
Support different numbers of projects without rebuilding the component.
Typography
Separate controls for Title, Body, and Meta typography.
Customize font family, size, weight, line height, and spacing.
Use your own type system to match the rest of your website.
Layout
Adjustable maximum width.
Desktop and mobile card heights.
Card radius and internal padding.
Content gap and project tab spacing.
Adjustable tab width and height.
Automatic card sizing based on your content.
Scroll & Interaction
Automatic scroll distance based on the number of projects.
Custom scroll distance when you need more control.
Minimum scroll height.
Sticky position control.
Animation travel distance.
Stack depth control for adjusting the visual layering of cards.
Scroll Stack Deck is designed to work across desktop, tablet, and mobile layouts. Mobile-specific card sizing helps longer project content remain readable without compromising the interaction.
Best suited for:
Portfolio websites
Product & UX case studies
Creative studios
Design agencies
Personal websites
Editorial websites
Project archives
If you have any questions, encounter an issue, or need help setting up the component, feel free to reach out at sdesignahire@gmail.com.
Scroll Stack Deck is a customizable, scroll-driven project showcase for Framer that gives portfolios and creative websites a more tactile way to present projects.
Instead of displaying projects in a traditional grid or carousel, each project lives inside a layered card stack. As visitors scroll, the cards smoothly move through the stack, bringing the next project into focus while previous projects settle behind it.
It works especially well for portfolio websites, case studies, creative studios, agencies, personal websites, and editorial experiences.
Project Management
Add, remove, and reorder projects directly from the Projects control.
Add project titles, descriptions, tags, images, and links.
Support different numbers of projects without rebuilding the component.
Typography
Separate controls for Title, Body, and Meta typography.
Customize font family, size, weight, line height, and spacing.
Use your own type system to match the rest of your website.
Layout
Adjustable maximum width.
Desktop and mobile card heights.
Card radius and internal padding.
Content gap and project tab spacing.
Adjustable tab width and height.
Automatic card sizing based on your content.
Scroll & Interaction
Automatic scroll distance based on the number of projects.
Custom scroll distance when you need more control.
Minimum scroll height.
Sticky position control.
Animation travel distance.
Stack depth control for adjusting the visual layering of cards.
Scroll Stack Deck is designed to work across desktop, tablet, and mobile layouts. Mobile-specific card sizing helps longer project content remain readable without compromising the interaction.
Best suited for:
Portfolio websites
Product & UX case studies
Creative studios
Design agencies
Personal websites
Editorial websites
Project archives
If you have any questions, encounter an issue, or need help setting up the component, feel free to reach out at sdesignahire@gmail.com.
