Constructing a 3D Infinite Carousel with Reactive Background Gradients

Every card reference can be saved in an gadgets array, which can later assist us
handle positioning, transformations, and animations throughout the carousel.

const IMAGES = [
  './img/img01.webp',
  './img/img02.webp',
  './img/img03.webp',
  './img/img04.webp',
  './img/img05.webp',
  './img/img06.webp',
  './img/img07.webp',
  './img/img08.webp',
  './img/img09.webp',
  './img/img10.webp',
];

const cardsRoot = doc.getElementById('playing cards');
let gadgets = [];

perform createCards() {
  cardsRoot.innerHTML = '';
  gadgets = [];

  const fragment = doc.createDocumentFragment();

  IMAGES.forEach((src, i) => {
    const card = doc.createElement('article');
    card.className = 'card';
    card.model.willChange = 'rework'; // Pressure GPU compositing

    const img = new Picture();
    img.className = 'card__img';
    img.decoding = 'async';
    img.loading = 'keen';
    img.fetchPriority = 'excessive';
    img.draggable = false;
    img.src = src;

    card.appendChild(img);
    fragment.appendChild(card);
    gadgets.push({ el: card, x: i * STEP });
  });

  cardsRoot.appendChild(fragment);
}

Display screen-Area Rework

Now that we’ve created our playing cards, we have to give them a way of depth and perspective.
That is the place the 3D rework is available in. For every card, we calculate its place relative
to the middle of the viewport and use that worth to find out the way it ought to seem in house.

We begin by normalizing the cardboard’s X place. This tells us how far it’s from the middle of the display screen. That normalized worth then drives three key visible properties:

• Rotation (Y-axis): how a lot the cardboard turns towards or away from the viewer.
• Depth (Z translation): how far the cardboard is pushed towards or away from the digicam.
• Scale: how massive or small the cardboard seems relying on its distance from the middle.

Playing cards nearer to the middle seem bigger and nearer, whereas these on the edges shrink barely
and tilt away. The result’s a refined but convincing sense of 3D curvature because the carousel strikes.
The perform beneath returns each the total rework string and the calculated depth worth,
which we’ll use later for correct layering.

const MAX_ROTATION = 28;   // deg
const MAX_DEPTH    = 140;  // px
const MIN_SCALE    = 0.8;
const SCALE_RANGE  = 0.20;

let VW_HALF = innerWidth * 0.5;

perform transformForScreenX(screenX) {
  const norm = Math.max(-1, Math.min(1, screenX / VW_HALF));
  const absNorm = Math.abs(norm);
  const invNorm = 1 - absNorm;

  const ry = -norm * MAX_ROTATION;
  const tz = invNorm * MAX_DEPTH;
  const scale = MIN_SCALE + invNorm * SCALE_RANGE;

  return {
    rework: `translate3d(${screenX}px,-50%,${tz}px) rotateY(${ry}deg) scale(${scale})`,
    z: tz,
  };
}

With this rework logic in place, our playing cards naturally align right into a curved structure,
giving the phantasm of a steady 3D ring. Right here’s what it appears to be like like in motion:

Enter & Inertia

To make the carousel really feel pure and responsive, we don’t transfer the playing cards instantly primarily based on scroll or drag occasions. As a substitute, we translate person enter right into a velocity worth that drives {smooth}, inertial movement. A steady animation loop updates the place every body and progressively slows it down utilizing friction, identical to bodily momentum fading out over time. This offers the carousel that easy, gliding really feel whenever you launch your contact or cease scrolling.

Right here’s how the system behaves conceptually:

• Wheel or drag → provides to the present velocity, nudging the carousel ahead or backward.
• Every body → the place strikes based on the rate, which is then diminished by a friction issue.
• The place is wrapped seamlessly so the carousel loops infinitely in both course.
• Very small velocities are clamped to zero to forestall micro-jitters when movement needs to be at relaxation.
• This method retains motion {smooth} and constant throughout all enter sorts (mouse, contact, or trackpad).

Right here’s a fast instance of how we seize scroll or wheel enter and translate it into velocity:

stage.addEventListener(
  'wheel',
  (e) => {
    if (isEntering) return;
    e.preventDefault();

    const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
    vX += delta * WHEEL_SENS * 20;
  },
  { passive: false }
);

Then, inside the primary animation loop, we apply the rate, progressively decay it, and replace the transforms
so the playing cards slide and settle naturally:

perform tick(t) {
  const dt = lastTime ? (t - lastTime) / 1000 : 0;
  lastTime = t;

  // Apply velocity to scroll place
  SCROLL_X = mod(SCROLL_X + vX * dt, TRACK);

  // Apply friction to velocity
  const decay = Math.pow(FRICTION, dt * 60);
  vX *= decay;
  if (Math.abs(vX) < 0.02) vX = 0;

  updateCarouselTransforms();
  rafId = requestAnimationFrame(tick);
}

Picture → Shade Palette

To make our background gradients really feel alive and related to the imagery,
we’ll have to extract colours instantly from every picture.
This enables the canvas background to replicate the dominant hues of the energetic card,
making a refined concord between foreground and background.

The method is light-weight and quick. We first measure the picture’s side ratio so we are able to scale it down proportionally to a tiny offscreen canvas with as much as 48 pixels on the longest aspect. This step retains colour knowledge correct with out losing reminiscence on pointless pixels. As soon as drawn to this mini-canvas, we seize its pixel knowledge utilizing getImageData(), which provides us an array of RGBA values we are able to later analyze to construct our gradient palettes.

perform extractColors(img, idx) {
  const MAX = 48;
  const ratio = img.naturalWidth && img.naturalHeight ? img.naturalWidth / img.naturalHeight : 1;
  const tw = ratio >= 1 ? MAX : Math.max(16, Math.spherical(MAX * ratio));
  const th = ratio >= 1 ? Math.max(16, Math.spherical(MAX / ratio)) : MAX;

  const c = doc.createElement('canvas');
  c.width = tw; 
  c.top = th;

  const ctx = c.getContext('second');
  ctx.drawImage(img, 0, 0, tw, th);
  const knowledge = ctx.getImageData(0, 0, tw, th).knowledge;
}

At this stage, we’re not but deciding on which colours to maintain however we’re merely capturing the uncooked pixel knowledge. Within the subsequent steps, this info shall be analyzed to seek out dominant tones and gradients that visually match every picture.

Canvas Background: Multi-Blob Subject

Now that we are able to extract colours, let’s convey the background to life. We’ll paint two softly drifting radial blobs throughout a full-screen ingredient. Every blob makes use of colours pulled from the present picture’s palette, and when the energetic card adjustments, these hues are easily blended utilizing GSAP tweening. The result’s a residing, respiration gradient area that evolves with the carousel’s movement.

To keep up responsiveness, the system adjusts its rendering cadence dynamically:
it paints at the next body fee throughout transitions for {smooth} colour shifts,
then idles round 30 fps as soon as issues settle.
This stability retains visuals fluid with out taxing efficiency unnecessarily.

Why canvas? Frequent colour updates in DOM-based or CSS gradients are pricey,
usually triggering structure and paint recalculations.
With , we achieve fine-grained management over
how usually and the way exactly every body is drawn,
making the rendering predictable, environment friendly, and fantastically {smooth}.

const g1 = bgCtx.createRadialGradient(x1, y1, 0, x1, y1, r1);
g1.addColorStop(0, `rgba(${gradCurrent.r1},${gradCurrent.g1},${gradCurrent.b1},0.68)`);
g1.addColorStop(1, 'rgba(255,255,255,0)');
bgCtx.fillStyle = g1;
bgCtx.fillRect(0, 0, w, h);

By layering and animating a number of of those gradients with barely totally different positions and radii, we create a mushy, natural colour area with an ideal ambient backdrop that enhances the carousel’s temper with out distracting from the content material.

Efficiency

To make the carousel really feel instantaneous and buttery-smooth from the very first interplay,
we are able to apply a few small however highly effective efficiency strategies.
These optimizations assist the browser put together sources upfront and heat up
the GPU so animations begin seamlessly with out seen lag or stutter.

Decode photos earlier than begin

Earlier than any animations or transforms start, we be certain all our card photos are
absolutely decoded and prepared for rendering. We iterate via every merchandise, seize its
ingredient, and if the browser helps the asynchronous
img.decode() methodology, we name it to pre-decode the picture into reminiscence.
All these decoding operations return guarantees, which we accumulate and
await utilizing Promise.allSettled(). This ensures the setup
continues even when one or two photos fail to decode correctly, and it offers the
browser an opportunity to organize texture knowledge forward of time — serving to our first animations
really feel far smoother.

async perform decodeAllImages() {
  const duties = gadgets.map((it) => {
    const img = it.el.querySelector('img');
    if (!img) return Promise.resolve();

    if (typeof img.decode === 'perform') {
      return img.decode().catch(() => {});
    }

    return Promise.resolve();
  });

  await Promise.allSettled(duties);
}

Compositing warmup

Subsequent, we use a intelligent trick to “pre-scroll” the carousel and heat up the GPU’s compositing cache. The thought is to softly transfer the carousel off-screen in small increments, updating transforms every time. This course of forces the browser to pre-compute texture and layer knowledge for all of the playing cards. Each few steps, we await requestAnimationFrame to yield management again to the primary thread, stopping blocking or jank. As soon as we’ve coated the total loop, we restore the unique place and provides the browser a few idle frames to settle.

The outcome: when the person interacts for the primary time, every thing is already cached and able to transfer —
no delayed paints, no cold-start hiccups, simply prompt fluidity.

async perform warmupCompositing() {
  const originalScrollX = SCROLL_X;
  const stepSize = STEP * 0.5;
  const numSteps = Math.ceil(TRACK / stepSize);

  for (let i = 0; i < numSteps; i++) {
    SCROLL_X = mod(originalScrollX + i * stepSize, TRACK);
    updateCarouselTransforms();

    if (i % 3 === 0) {
      await new Promise((r) => requestAnimationFrame(r));
    }
  }

  SCROLL_X = originalScrollX;
  updateCarouselTransforms();
  await new Promise((r) => requestAnimationFrame(r));
  await new Promise((r) => requestAnimationFrame(r));
}

Placing It Collectively

Now it’s time to convey all of the transferring items collectively.
Earlier than the carousel turns into interactive, we undergo a exact initialization sequence
that prepares each visible and efficiency layer for {smooth} playback.
This ensures that when the person first interacts, the expertise feels prompt, fluid, and visually wealthy.

We begin by preloading and creating all playing cards, then measure their structure and apply the preliminary 3D transforms.
As soon as that’s executed, we wait for each picture to totally load and decode so the browser has them
prepared in GPU reminiscence. We even power a paint to ensure every thing is rendered as soon as earlier than movement begins.

Subsequent, we extract the colour knowledge from every picture to construct a gradient palette and discover which card sits
closest to the viewport heart. That card’s dominant tones grow to be our preliminary background gradient,
bridging the carousel and its ambient backdrop in a single unified scene.

We then initialize the background canvas, fill it with a base colour, and carry out a GPU “warmup” move to cache layers and textures. A brief idle delay offers the browser a second to settle earlier than we begin the background animation loop. Lastly, we reveal the seen playing cards with a mushy entry animation, cover the loader, and allow person enter, handing management over to the primary carousel loop.

async perform init() {
  // Preload photos for sooner loading
  preloadImageLinks(IMAGES);
  
  // Create DOM components
  createCards();
  measure();
  updateCarouselTransforms();
  stage.classList.add('carousel-mode');

  // Look ahead to all photos to load
  await waitForImages();

  // Decode photos to forestall jank
  await decodeAllImages();

  // Pressure browser to color photos
  gadgets.forEach((it) => {
    const img = it.el.querySelector('img');
    if (img) void img.offsetHeight;
  });

  // Extract colours from photos for gradients
  buildPalette();

  // Discover and set preliminary centered card
  const half = TRACK / 2;
  let closestIdx = 0;
  let closestDist = Infinity;

  for (let i = 0; i < gadgets.size; i++) {
    let pos = gadgets[i].x - SCROLL_X;
    if (pos < -half) pos += TRACK;
    if (pos > half) pos -= TRACK;
    const d = Math.abs(pos);
    if (d < closestDist) {
      closestDist = d;
      closestIdx = i;
    }
  }

  setActiveGradient(closestIdx);

  // Initialize background canvas
  resizeBG();
  if (bgCtx) 

  // Warmup GPU compositing
  await warmupCompositing();

  // Look ahead to browser idle time
  if ('requestIdleCallback' in window) {
    await new Promise((r) => requestIdleCallback(r, { timeout: 100 }));
  }

  // Begin background animation
  startBG();
  await new Promise((r) => setTimeout(r, 100)); // Let background settle

  // Put together entry animation for seen playing cards
  const viewportWidth = window.innerWidth;
  const visibleCards = [];
  
  for (let i = 0; i < gadgets.size; i++) {
    let pos = gadgets[i].x - SCROLL_X;
    if (pos < -half) pos += TRACK;
    if (pos > half) pos -= TRACK;

    const screenX = pos;
    if (Math.abs(screenX) < viewportWidth * 0.6) {
      visibleCards.push({ merchandise: gadgets[i], screenX, index: i });
    }
  }

  // Kind playing cards left to proper
  visibleCards.kind((a, b) => a.screenX - b.screenX);

  // Cover loader
  if (loader) loader.classList.add('loader--hide');

  // Animate playing cards getting into
  await animateEntry(visibleCards);

  // Allow person interplay
  isEntering = false;

  // Begin predominant carousel loop
  startCarousel();
}

That is the outcome:

Diversifications & Tweaks

As soon as the primary setup is working, you can begin tuning the texture and depth of the carousel to match your undertaking’s model. Under are the important thing tunable constants. Each adjusts a particular side of the 3D movement, spacing, or background ambiance. A number of refined adjustments right here can dramatically shift the expertise from playful to cinematic.

// 3D look
const MAX_ROTATION = 28;   // larger = stronger “page-flip”
const MAX_DEPTH    = 140;  // translateZ depth
const MIN_SCALE    = 0.80; // larger = flatter look
const SCALE_RANGE  = 0.20; // focus enhance at heart

// Format & spacing
let GAP  = 28;             // visible spacing between playing cards

// Movement really feel
const FRICTION = 0.9;           // Velocity decay (0-1, decrease = extra friction)
const WHEEL_SENS = 0.6;         // Mouse wheel sensitivity
const DRAG_SENS = 1.0;          // Drag sensitivity

// Background (canvas)
/// (in CSS) #bg { filter: blur(24px) }  // enhance for creamier background

Experiment with these values to seek out the correct stability between responsiveness and depth. For instance, the next MAX_ROTATION and MAX_DEPTH will make the carousel really feel extra sculptural, whereas a decrease FRICTION will add a extra kinetic, free-flowing movement. The background blur additionally performs an enormous position in temper: a softer blur creates a dreamy, immersive really feel, whereas a sharper one feels crisp and fashionable.