3D Infinite Carousel with Reactive Background Gradients

Smooth, infinite 3D carousel where each image drives a reactive, canvas-based background gradient that adapts to its colors.

Article on Codrops

Demo

---

Features

• 🎠 Infinite 3D carousel
• 🖱️ Drag & wheel navigation
• 🌈 Reactive gradients
• 🪟 Responsive layout
• 🎞️ GPU-friendly animations

---

Demo

Open index.html directly in your browser or serve the folder with any static server

Replace Images

Put your images inside img/

In script.js, update the images list:

const IMAGES = [
  './img/your-image-01.webp',
  './img/your-image-02.webp',
  // ...
];

Customization

Most of the behavior can be tuned via constants at the top of script.js

Credits

created by Clément Grellier