Stacked Cards With Depth in Framer

Copy component

Stacked Cards With Depth in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Stacked Cards With Depth in Framer

This is a Framer recreation of a stacked card layout inspired by Drawsgood’s work. Remix the project to explore how the layered depth and smooth transitions were built—no code needed.

image of Nandi Muzsik
image of Prianca S.
Image of Drawsgood

Created by

,

and

stacked transparent cards UI
stacked transparent cards UI
stacked transparent cards UI

About the resource

To build this stacked card layout, I made four variants—one for each day (Mon, Tue, Wed) and one to loop back to Monday. I wrapped each card in a frame and added depth, then stacked three cards and placed them inside a wrapper with 3D transforms to create that layered feel. In the second variant, I moved the first card back and faded it out, while the others came forward with more depth. The fourth variant mirrors this, so the loop stays smooth. As I click through each day, the cards transition with a clean 3D flow.

About the resource

To build this stacked card layout, I made four variants—one for each day (Mon, Tue, Wed) and one to loop back to Monday. I wrapped each card in a frame and added depth, then stacked three cards and placed them inside a wrapper with 3D transforms to create that layered feel. In the second variant, I moved the first card back and faded it out, while the others came forward with more depth. The fourth variant mirrors this, so the loop stays smooth. As I click through each day, the cards transition with a clean 3D flow.

About the resource

To build this stacked card layout, I made four variants—one for each day (Mon, Tue, Wed) and one to loop back to Monday. I wrapped each card in a frame and added depth, then stacked three cards and placed them inside a wrapper with 3D transforms to create that layered feel. In the second variant, I moved the first card back and faded it out, while the others came forward with more depth. The fourth variant mirrors this, so the loop stays smooth. As I click through each day, the cards transition with a clean 3D flow.

framer component variants of an interaction

The four variants of the stacked cards component.

framer component variants of an interaction

The four variants of the stacked cards component.

framer component variants of an interaction

The four variants of the stacked cards component.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • A dark interface showing glitchy text reading "TFXT GLITCH + FRAMEX" with a typing effect and a hovered block of random characters below

    Text Glitch Component for Framer

    Component

    A dark interface showing glitchy text reading "TFXT GLITCH + FRAMEX" with a typing effect and a hovered block of random characters below

    Text Glitch Component for Framer

    Component

    A dark interface showing glitchy text reading "TFXT GLITCH + FRAMEX" with a typing effect and a hovered block of random characters below

    Text Glitch Component for Framer

    Component

  • Blurred portrait with a layered 3D card depth effect

    3D Depth Card Stack Animation in Framer

    Component

    Blurred portrait with a layered 3D card depth effect

    3D Depth Card Stack Animation in Framer

    Component

    Blurred portrait with a layered 3D card depth effect

    3D Depth Card Stack Animation in Framer

    Component