3D Image Carousel - Framer Component

Live Preview: https://imagecarousel.framer.website

A premium 3D carousel that highlights the center card with elegant scaling while side cards tilt back with subtle blur, creating depth and focus.

Features

• Cinematic card-stacking with dynamic scale, perspective rotation, and depth blur

• Studio-quality animations with adjustable timing and 8 easing presets

• Bulletproof content handling - validates URLs, enforces upload limits, graceful fallbacks

• Designer-friendly navigation - exact color matching for all button states

• Fully accessible - keyboard navigable with proper ARIA attributes

• Zero dependencies - lightweight pure React implementation

Content Controls

• Items — Array of {id, title, image} objects (image requires valid URL)

• Max Upload — Limit total items (1-20) to prevent performance issues

• Max Visible — Control cards shown (1-10) for different layout densities

Style Controls

• Container — Background color and border styling

• Navigation —

  • Button background (normal/hover states)

  • Chevron icon color (normal/hover states)

  • Pixel-perfect offset from edges (0-50px)

Animation Controls

• Type — Choose from 4 animation styles:

  • Slide (horizontal movement)

  • Fade (opacity transition)

  • Scale (zoom effect)

  • Slide-fade (combined effect)

• Speed — Adjust transition duration (100-3000ms)

• Easing — Select from 8 professional curves

Layout Controls

• Scaling

  • Center card scale (1-1.5x)

  • Side card scale (0.5-1x)

• Rotation — Side card tilt angle (0-45°)

• Blur — Side card blur intensity (0-15px)

• Spacing — Gap between cards (80-200%)

Pro Tips

1. For best results with scale animations, keep center card scale ≤1.2

2. Use rotation angles between 10-25° for optimal perspective

3. Combine blur (4-8px) with opacity (0.5-0.7) for depth

4. Set animation speed between 400-800ms for natural feel

5. The "easeOutBack" easing curve creates playful bouncy transitions

Perfect for showcasing hero content, portfolio pieces, or product galleries.

Engineered for reliability, automatically filters broken images, enforces upload limits, and delivers buttery-smooth transitions with professional easing controls.

Refund Policy:

All sales of digital templates are final. Once purchased and downloaded, refunds or exchanges are not available. Please ensure the product meets your needs before purchasing. For any questions or issues with your download, please contact me for assistance.