Skip to content

component

Scroll Stack Deck

By Sumeet Ahire

Details

Summary

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.

Description

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. What's included 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. Responsive by default 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 Support If you have any questions, encounter an issue, or need help setting up the component, feel free to reach out at sdesignahire@gmail.com .

Introduction

Scroll-driven project showcase

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400147528/148/228/309/79/15
  • All · #51