---
title: "Interactive Deck — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Jijo M · Cards. Interactive Deck is a code component for both Framer and React TypeScript."
canonical: "https://framer.elliotli.dev/component/interactive-deck"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Interactive Deck

# Interactive Deck

Highly customizable bouncy cards

[View on Framer](https://framer.com/marketplace/components/interactive-deck/?via=elliot-li)

![Interactive Deck preview image 1](https://framer.elliotli.dev/og/component/interactive-deck/321b1d02b7783714/1600x1200.jpg)

## Summary

Interactive Deck is a code component for both Framer and React TypeScript.

## Description

Interactive Deck is a code component for both Framer and React TypeScript. A stack of cards you can fan open on desktop, or swipe through on mobile. This is inspired from Interfacecraft but with the twist of our rich motion and bouncy animations and overall interactions.

[Check out the Video](https://kinescope.io/ijWR1XhBvnDn8iVPNNFHxT)

On desktop the cards fan out. Hover lifts one up. Click and it opens while the others drop into a small stack underneath. Switch cards and each one goes back to its own spot. No reshuffling nonsense.

On mobile it's a swipe stack. Any direction works. Top card goes to the bottom.

**What it is** One component, two runtimes. Desktop fan + mobile swipe. Same cards either way. Use it as a Framer code component, or drop in the single-file React TypeScript version (shadcn-style) with framer-motion.

**What it's for** Portfolios, case studies, process steps, product phases, testimonials. Basically anywhere a boring grid would do the job, but you want people poking at it instead.

**Who it's for** If you build in Framer or React and you're tired of static card rows, this is for you. Drop it in, wire your content, ship.

**Customization**

-   Per-card color, image, title, description, and link
    
-   Show or hide idle title and description separately
    
-   Layout: size, squircle corners, padding, text inset
    
-   Desktop: fan spread, open-stack spread, active/inactive scale, Y offsets, tilt and glare
    
-   Appearance: tilt on hover, grain, shadow, progressive blur on images
    
-   Draw-in: stagger, spring, once or replay on enter
    

**Responsive**

-   One component, auto breakpoints (or force desktop / tablet / mobile)
    
-   Desktop and tablet use the fan
    
-   Mobile uses the swipe stack
    
-   Same cards and copy in both
    
-   Built so you can check the real behavior in your layout
    

Use directly it into Framer, or copy the React TypeScript file into your app and start swapping in your own cards.

## Rank history [How rankings work →](/terms#rankings)

-   All · #2637

## Details

- **Author**: Jijo M
- **Price**: $9.00
- **Published**: 2026-07-24
- **Updated**: 2026-09-29
- **Added**: 2026-07-24
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator