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