Shuffle Card Slider

Slider with Card Shuffling Effect.

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 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 [email protected]

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.