3D rotating cylinder carousel that showcases testimonials or images with smooth motion, customizable styling, and an eye-catching circular layout perfect for modern visual displays
Make it with Workshop
Build your own component with AI
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:
Switch between two major presentation styles:
Displays:
User avatar
Name
Title
Review text
Displays:
Large image
Text overlay
(Visible only when “Testimonial” is selected)
Name
Title
Image / Avatar
Review text
Name size & color
Title size & color
Description size, color, and line-height
Avatar width & height
Image (avatar) border-radius %
(Visible only when “Image Card” is selected)
Font size
Text color
Text alignment (Left / Center / Right)
Card height
Image border-radius %
(Work in both modes)
Card width
Card padding
Card border-radius (testimonial only)
Card background color (testimonial only)
Radius – determines how far cards sit from the center
(Spacing mode logic removed, radius is the main spacing control)
Rotation duration (speed)
Rotation direction (clockwise / counter-clockwise)
⭐ What This Component Is Good For
This 3D spinning card cylinder is ideal for:
Creates a modern, dynamic, premium-feel testimonial section.
Perfect for architecture, interior design, fashion, photography, or branding pages.
Use image mode to highlight projects, services, or products in a visually immersive way.
Its 3D motion makes it a strong candidate for hero sections or intro modules.
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