About 3D Cylinder Cards
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
