---
title: "Logo 3D Carousel — Free Framer component · Best of Framer"
description: "Free Framer component · by Harry Niotis · Carousels. Infinite Loop & Progressive Blur"
canonical: "https://framer.elliotli.dev/component/logo-3d-carousel"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Logo 3D Carousel

# Logo 3D Carousel

Infinite Loop & Progressive Blur

[View on Framer](https://framer.com/marketplace/components/logo-3d-carousel/?via=elliot-li)

![Logo 3D Carousel preview image 1](https://framer.elliotli.dev/og/component/logo-3d-carousel/1dfe461729c6e6bf/1600x1200.jpg)

## Summary

Infinite Loop & Progressive Blur

## Description

Highly optimized, interactive, infinitely scrolling marquee that creates a stunning 3D depth effect. As logos move away from the center of the screen, they smoothly scale down and blur, pushing them into the "background" to create an immersive, spatial visual experience.

🚀 **Under the Hood**

Unlike standard CSS or DOM-based marquees that can cause browser layout thrashing, this component is engineered using a native **HTML5** `<canvas>` 2D context. By utilizing `requestAnimationFrame` and bypassing React's re-render cycle during the animation loop, it delivers silky-smooth 60fps performance without DOM bloat. It also features built-in GPU battery-saving logic and an `IntersectionObserver` to completely pause processing when the component is scrolled out of view.

⚙ **Customization Props**

-   **Logos, Max Height & Gap:** Populate your carousel and fine-tune sizing and horizontal spacing.
    
-   **Min & Max Scale:** Precisely control the 3D depth illusion by setting the logo scale at the center vs. the edges.
    
-   **Enable Drag:** Allow users to grab and swipe through the carousel natively.
    
-   **Speed & Direction:** Control the automatic momentum of the infinite loop.
    
-   **Max Blur & Blur Distance:** Adjust the intensity of the depth-of-field effect and precisely dictate the distance from the center where the blur falloff reaches its peak.
    
-   **Hover & Drag Easing:** Toggle "Pause on Hover" and dial in how smoothly the carousel decelerates and accelerates during interactions.
    

⚠ **Performance Note**

The 3D depth illusion relies on dynamic canvas filtering to calculate blur per frame. While visually striking, high blur values can cause framerate drops or choppiness on low-end devices with limited GPU power (like older mobile phones). For optimal cross-device performance, we recommend keeping **Max Blur** low. If ultimate performance is your priority, setting Max Blur to `0` disables the filter entirely—eliminating GPU strain while keeping the beautiful interactive 3D scaling effect!

## Rank history [How rankings work →](/terms#rankings)

-   All · #438

## Details

- **Author**: Harry Niotis
- **Published**: 2026-08-03
- **Updated**: 2026-08-03
- **Added**: 2026-08-03
- **Categories**: Carousels

## More like this

-   [Screen Stage Mockup](/component/screen-stage-mockup) — Aisol Studio · $14 — Your screens in synced devices
-   [Team Reel](/component/team-reel) — Ali Musa · Free — Interactive Team Showcase
-   [Slider](/component/slider) — MAS · Free — A smooth, customizable slider.
-   [Cascade Card Slider](/component/cascade-card-slider) — Tim Yeng · Free — Cards that cascade into view