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!
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!
