---
title: "Drag & Scroll Cards — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Jijo M · Cards. 3D scroll effect & Free-drag"
canonical: "https://framer.elliotli.dev/component/drag-scroll-cards"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Drag & Scroll Cards

# Drag & Scroll Cards

3D scroll effect & Free-drag

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

![Drag & Scroll Cards preview image 1](https://framer.elliotli.dev/og/component/drag-scroll-cards/5e0ce6f0dbb795ec/1600x1200.jpg)

## Summary

3D scroll effect & Free-drag

## Description

Deck of Cards turns a static card stack into an interactive experience people naturally want to play with. Drag a card and it responds with realistic physics, giving it the feeling of weight instead of simply following your cursor. In scroll mode, the deck pins to the screen and reveals cards one by one as the page moves, with each card flying away in either a random or directional spread.

The background is just as important as the cards themselves. Instead of using a static gradient or image, the built-in shader engine generates animated clouds, flowing gradients, plasma, fluid motion, and other abstract effects in real time. Everything is customizable, so you can create anything from a subtle atmospheric background to a bold hero section.

The component comes in two versions:

-   **Framer:** A plug-and-play code component with a full property panel.
    
-   **React + TypeScript:** A single typed component for any React project.
    

Both versions support two interaction modes:

-   **Free Drag:** Visitors can drag and swipe cards naturally.
    
-   **Sticky Scroll:** The deck pins while cards animate away as the page scrolls.
    

## Perfect For

-   Hero sections
    
-   Portfolio reveals
    
-   Product showcases
    
-   Feature carousels
    
-   Interactive storytelling
    
-   "Pick a card" experiences
    
-   Tarot and oracle websites
    

## Customize

-   Card count, images, titles, and subtitles
    
-   Card size and spacing
    
-   Drag physics and swipe thresholds
    
-   Random or directional card spread
    
-   Animated cloud, gradient, plasma, and fluid shaders
    
-   Shader colors, speed, and intensity
    
-   Grain, vignette, and edge effects
    

## Responsive

Built to fill any frame or container. Cards scale naturally across desktop and mobile, while backgrounds stay full bleed and content remains centered.

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

-   All · #6946

## Details

- **Author**: Jijo M
- **Price**: $12.00
- **Published**: 2026-07-24
- **Updated**: 2026-07-27
- **Added**: 2026-07-24
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards