About Shuffle Card Slider
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
Add component to your canvas
Connect components or layers as cards (click + to add more)
Customize cursor text, colors, and styling
Adjust rotation angle and card gap
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:
Top card flattens (rotation → 0°) and exits left or right
Card instantly repositions to back of stack (off-screen)
Card returns with elastic spring to its permanent rotation
Direction alternates: right, left, right, left...
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 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.
