---
title: "Shuffle Card Slider  — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Omakase Design · Carousels. Slider with Card Shuffling Effect."
canonical: "https://framer.elliotli.dev/component/shuffle-card-slider"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Shuffle Card Slider

# Shuffle Card Slider

Slider with Card Shuffling Effect.

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

![Shuffle Card Slider  preview image 1](https://framer.elliotli.dev/og/component/shuffle-card-slider/0724e2c184877ec1/1600x1200.jpg)

## Summary

Slider with Card Shuffling Effect.

## Description

Transform your content showcase with this unique stacked card component. Cards alternate rotation angles and shuffle through with elegant exit and elastic return animations, while a custom cursor follows your mouse on desktop for a premium interactive feel.

### Key Features

-   **Unique Shuffle Animation**: Top card exits with flatten animation, repositions to back, returns with elastic spring
    
-   **Custom Follow Cursor**: Smooth cursor with customizable text, colors, and styling (desktop only)
    
-   **Alternating Rotations**: Cards automatically rotate left/right in an alternating pattern for visual interest
    
-   **Click Anywhere**: Entire component is clickable - no need to hunt for buttons
    
-   **Queue Support**: Multiple rapid clicks queue up and execute smoothly
    
-   **Smooth Animations**: Exit with realistic easing, elastic return spring, and press feedback
    
-   **Responsive Design**: Custom cursor on desktop (>810px), clean tap interaction on mobile
    
-   **10+ Property Controls**: Complete customization without code
    

### Perfect For

Creative portfolios, testimonial showcases, product features, team member profiles, case study highlights, image galleries, service offerings, design showcases

### What You Get

-   Production-ready Framer component
    
-   Native Framer property controls (no code files needed)
    
-   Custom cursor with spring physics
    
-   Responsive desktop/mobile behavior
    
-   Smooth Framer Motion animations
    
-   Professional default styling
    

### Quick Setup

1.  Add component to your canvas
    
2.  Connect components or layers as cards (click + to add more)
    
3.  Customize cursor text, colors, and styling
    
4.  Adjust rotation angle and card gap
    
5.  Done! Click anywhere to shuffle
    

### Customization Options

**Card Appearance**: Rotation angle (0-15°, alternates automatically), stack gap (0-50px vertical spacing) **Custom Cursor (Desktop)**: Text content, background & text colors, font size (10-32px), padding (0-30px), full typography control **Animation**: Exit distance (1-2× card width), animation speed (0.1-1s exit, 1s return with elastic spring)

### How It Works

**Shuffle Sequence:**

1.  Top card flattens (rotation → 0°) and exits left or right
    
2.  Card instantly repositions to back of stack (off-screen)
    
3.  Card returns with elastic spring to its permanent rotation
    
4.  Direction alternates: right, left, right, left...
    
5.  Queue handles rapid clicks smoothly
    

**Custom Cursor:**

-   Follows mouse with spring physics (smooth, natural lag)
    
-   Fades in/out smoothly (200ms)
    
-   Press effect scales to 85% on click
    
-   Only visible within component boundaries
    
-   Disabled on mobile (≤810px)
    

### Technical Details

-   Permanent rotation per card (alternates left/right based on index)
    
-   Exit: 0.2s with Power2.easeOut equivalent
    
-   Return: 1s elastic spring (stiffness: 100, damping: 10)
    
-   Z-index automatically managed throughout animation
    
-   Cursor uses spring physics (stiffness: 500, damping: 28)
    
-   Mobile breakpoint: 810px
    
-   No tap highlight on mobile
    

### Pro Tips

-   Use 3-6 cards for optimal effect
    
-   Keep rotation between 2-5° for subtle, elegant effect
    
-   Cursor text: 1-2 words works best (NEXT, SHUFFLE, MORE, etc.)
    
-   High contrast cursor colors for visibility
    
-   Test on mobile - cursor disabled, tap works perfectly
    
-   Cards maintain aspect ratio - ensure consistent sizing
    

### Need Complete Site Templates?

**Love this component? Check out our premium Framer templates at** [](https://www.oma-kase.com/templates)[**oma-kase.com/templates**](http://oma-kase.com/templates)

Get fully designed, production-ready websites featuring this component and more:

-   Portfolio templates with advanced interactions
    
-   Agency sites with scroll-driven animations
    
-   SaaS landing pages optimized for conversion
    
-   E-commerce templates with cart functionality
    
-   Creative showcases with unique layouts
    

All templates include source files, detailed documentation, and lifetime updates.

### Support

Need help? Reach out to us at [**tech@oma-kase.com**](mailto:tech@oma-kase.com)

### What's Included

-   Component remix URL
    
-   FREE 3 months of Framer Pro (on yearly plans)
    
-   Email support
    

### Refund Policy

Due to the nature of digital products, we do not offer refunds once a purchase is made.

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

-   All · #6123

## Details

- **Author**: Omakase Design
- **Price**: $3.00
- **Published**: 2026-01-21
- **Updated**: 2026-02-23
- **Added**: 2026-01-09
- **Categories**: Carousels

## More like this

-   [3DCurvedImageMarquee](/component/3dcurvedimagemarquee) — Lera · $4 — Curved perspective double ticker
-   [Orbit Kit Carousel](/component/orbit-kit-carousel) — Khairul Fauzy Khairudin · $12 — 3D drag carousel with inertia
-   [Team Orbit](/component/team-orbit) — Ali Musa · Free — Interactive Team Showcase
-   [Glow Testimonial](/component/glow-testimonial) — Interface Studio · Free — Testimonials with a Little Glow