---
title: "3D Cylinder Cards — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Nora Salem · Cards. 3D Cylinder Cards is a fully customizable 3D rotating cylinder carousel built with React, GSAP, and Framer controls.It displays any number…"
canonical: "https://framer.elliotli.dev/component/3d-cylinder-cards"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/3D Cylinder Cards

# 3D Cylinder Cards

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

![3D Cylinder Cards preview image 1](https://framer.elliotli.dev/og/component/3d-cylinder-cards/bff7e86c79cee156/1600x1200.jpg)

## Summary

3D Cylinder Cards is a fully customizable 3D rotating cylinder carousel built with React, GSAP, and Framer controls.It displays any number of cards arranged in a vertical…

## Description

3D Cylinder Cards is a fully customizable **3D rotating cylinder carousel** built with React, GSAP, and Framer controls.It displays any number of cards arranged in a vertical cylindrical shape that rotates endlessly in 3D space.You can switch between **Testimonial Mode** and **Image Card Mode**, each offering different layouts, styles, and customizable elements.

This component is perfect for creating **engaging, modern, and visually dynamic sections** in your page—such as testimonials, featured photos, project highlights, product cards, or branding showcases.

🎛️ **What the User Can Control**

Below is a structured overview of every control available in the component:

## ✅ 1. Card Mode

Switch between two major presentation styles:

### • Testimonial Mode

Displays:

-   User avatar
    
-   Name
    
-   Title
    
-   Review text
    

### • Image Card Mode

Displays:

-   Large image
    
-   Text overlay
    

## ✅ 2. Testimonial Card Controls

_(Visible only when “Testimonial” is selected)_

### Card Content

-   **Name**
    
-   **Title**
    
-   **Image / Avatar**
    
-   **Review text**
    

### Typography

-   Name size & color
    
-   Title size & color
    
-   Description size, color, and line-height
    

### Layout

-   Avatar width & height
    
-   Image (avatar) border-radius %
    

## ✅ 3. Image Card Controls

_(Visible only when “Image Card” is selected)_

### Overlay Text

-   Font size
    
-   Text color
    
-   Text alignment (Left / Center / Right)
    

### Card Appearance

-   Card height
    
-   Image border-radius %
    

## ✅ 4. Shared Card Visual Controls

(Work in both modes)

-   Card width
    
-   Card padding
    
-   Card border-radius (testimonial only)
    
-   Card background color (testimonial only)
    

## ✅ 5. Cylinder & Spacing Controls

-   **Radius** – determines how far cards sit from the center
    
-   (Spacing mode logic removed, radius is the main spacing control)
    

## ✅ 6. Rotation Controls

-   Rotation duration (speed)
    
-   Rotation direction (clockwise / counter-clockwise)
    

⭐ **What This Component Is Good For**

This 3D spinning card cylinder is ideal for:

### ✔ Showcasing Testimonials

Creates a modern, dynamic, premium-feel testimonial section.

### ✔ Displaying Image Galleries

Perfect for architecture, interior design, fashion, photography, or branding pages.

### ✔ Feature Highlights / Project Cards

Use image mode to highlight projects, services, or products in a visually immersive way.

### ✔ Attention-grabbing Hero Sections

Its 3D motion makes it a strong candidate for hero sections or intro modules.

### ✔ Brand storytelling

Helps break static layouts and adds interactive personality.

🎨 **Why It Stands Out**

-   Smooth, continuous GSAP 3D rotation
    
-   Automatic card equal-height handling in testimonial mode
    
-   Fully responsive inside the parent frame
    
-   Highly customizable typography and visuals
    
-   Supports unlimited cards
    
-   Works seamlessly inside Framer with real-time controls
    

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

-   All · #7392

## Details

- **Author**: Nora Salem
- **Price**: $10.00
- **Published**: 2025-12-19
- **Updated**: 2025-12-19
- **Added**: 2025-12-06
- **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