---
title: "SpinDeck_3D — Free Framer component · Best of Framer"
description: "Free Framer component · by madhoundes · Cards. 3D Card Carousel – Interactive Image Slider for Framer Give your Framer projects a polished, modern look with this 3D Card Carousel…"
canonical: "https://framer.elliotli.dev/component/spindeck-3d"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/SpinDeck\_3D

# SpinDeck\_3D

[View on Framer](https://framer.com/marketplace/components/spindeck-3d/?via=elliot-li)

![SpinDeck\_3D preview image 1](https://framer.elliotli.dev/og/component/spindeck-3d/00bdfc1db4b9834f/1600x1200.jpg)

## Summary

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…

## Description

**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
    

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

-   All · #3954

## Details

- **Author**: madhoundes
- **Published**: 2025-12-12
- **Updated**: 2025-12-12
- **Added**: 2025-12-07
- **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