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…

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