SpinDeck_3D

3D Card Carousel – Interactive Image Slider for Framer

Give your Framer projects a polished, modern look with this 3D Card Carousel, a ready-to-use drop-in component that displays images in a dynamic, rotating card layout. Perfect for portfolios, landing pages, galleries, photography sites, and hero sections.

This component creates an immersive, swipeable 3D experience where cards tilt, scale, and animate smoothly as the user navigates through them. Includes built-in pagination controls and fully customizable styling.

Features

3D Card Layout

• Each image is displayed as a rounded-corner card with tilt and depth effects

• Center card is highlighted with dynamic scaling and elevation

• Side cards automatically angle outward for a cinematic look

Drop-and-Play Image Setup

• Replace images instantly in Framer—no coding required

• Supports any aspect ratio

• Works with both static images and CMS-driven image lists

Easy Customization

• Change card size, corner radius, spacing, tilt intensity

• Adjust animation speed + easing

• Edit background color or set transparent mode

• Enable/disable shadows, depth blur, or perspective drift

Navigation Controls

• Built-in left/right buttons

• Optional autoplay

• Optional drag/swipe support for touch screens

Smooth Animations

Powered by Framer Motion for:

• Cross-fade transitions

• Sliding card movement

• Depth + parallax simulation

• Performance-optimized for mobile & desktop

Perfect for Many Use Cases

• Creative portfolios

• Photography galleries

• Team members carousel

• Testimonials (with images)

• App or product card displays

• Hero sections with strong visual storytelling

How to Use (Framer-Ready)

1. Add the component to your canvas

2. Replace the default images with your own

3. Adjust settings in the right-panel controls:

   • Card tilt

   • Spacing

   • Image list

   • Navigation buttons

   • Autoplay

4. Publish or export—no setup required

The component is fully responsive and adapts beautifully to any layout.

Technical Highlights

• Built with React + Framer Motion

• Optimized for Framer’s Variant and Property Controls API

• Works with Framer CMS Collections

• Lightweight and GPU-accelerated animations

• Zero external dependencies

What’s Included

• Full component with editable layers

• Property controls for customization

• Prebuilt animation variants

• Clean, production-ready code

• Documentation directly in the component panel