3D Coverflow Slider — Ambient Background

A depth-based 3D slider with real perspective and rotateY transforms (not just fade), paired with a drifting polyhedra background that responds to cursor movement. Zero dependencies — pure Tailwind utilities, one config file, and vanilla JS. Auto-plays, pauses on hover, fully keyboard/dot-navigable. Swap the color tokens in the config to reskin it.

This tailwind example is contributed by Azeem warraich, on 29-Aug-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Transitions

Carousel Other Range Slider Animation

Author Azeem warraich

Tailwind v3.4 114 1

Fork Fullscreen

<div class="pointer-events-none absolute inset-0">
    <div class="shape-wrap" data-depth="18" style="top:8%; left:6%;">
      <div class="shape-float animate-drift1" style="animation-delay:-2s;">
        <div class="poly-hex h-40 w-40 bg-gradient-to-br from-fuchsia-500/70 to-violet-700/70 blur-[1px] md:h-56 md:w-56"></div>
      </div>
    </div>
    <div class="shape-wrap" data-depth="30" style="top:14%; right:10%;">
      <div class="shape-float animate-drift2" style="animation-delay:-5s;">
        <div class="h-14 w-14 rounded-full bg-cyan-300 shadow-[0_0_60px_18px_rgba(61,217,200,0.55)] md:h-20 md:w-20"></div>
      </div>
    </div>
    <div class="shape-wrap" data-depth="22" style="top:52%; right:16%;">
      <div class="shape-float animate-drift3" style="animation-delay:-1s;">
        <div class="poly-diamond h-24 w-24 bg-gradient-to-tr from-amber-300 to-orange-500 md:h-32 md:w-32"></div>
      </div>
    </div>
    <div class="shape-wrap" data-depth="14" style="bottom:10%; left:12%;">
      <div class="shape-float animate-drift4" style="animation-delay:-7s;">
        <div class="poly-tri h-28 w-28 border-2 border-violet-300/50 md:h-36 md:w-36"></div>
      </div>
    </div>
    <div class="shape-wrap" data-depth="26" style="bottom:16%; right:8%;">
      <div class="shape-float animate-drift1" style="animation-delay:-9s;">
        <div class="poly-hex h-16 w-16 bg-gradient-to-br from-cyan-400/70 to-teal-600/70 md:h-24 md:w-24"></div>
      </div>
    </div>
    <div class="shape-wrap" data-depth="8" style="top:32%; left:42%;">
      <div class="shape-float animate-drift2" style="animation-delay:-4s;">
        <div class="h-72 w-72 rounded-full bg-violet-600/20 blur-3xl md:h-96 md:w-96"></div>
      </div>
    </div>
    <div class="shape-wrap" data-depth="34" style="top:6%; left:44%;">
      <div class="shape-float animate-drift3" style="animation-delay:-3s;">
        <div class="poly-tri h-10 w-10 bg-amber-300/80 md:h-14 md:w-14"></div>
      </div>
    </div>
  </div>

<nav class="relative z-20 flex items-center justify-between px-6 py-6 md:px-16">
    <div class="font-display text-xl font-bold tracking-tight">Orbit<span class="text-fuchsia-400">Slide</span></div>
    <div class="hidden gap-8 font-mono text-[11px] uppercase tracking-[0.2em] text-white/50 md:flex">
      <span>Reusable</span>
      <span>Tailwind v3.4</span>
      <span>Zero Dependencies</span>
    </div>
  </nav>

<div class="relative z-10 mx-auto flex max-w-6xl flex-col items-center px-4 pb-20 pt-6 md:pt-14">

<div class="slide-item absolute left-1/2 top-1/2 w-[280px] -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-white/10 bg-white/[0.06] p-7 backdrop-blur-md sm:w-[340px] md:w-[420px] md:p-9">
          <span class="font-mono text-[11px] uppercase tracking-[0.25em] text-fuchsia-300">01 / Depth</span>
          <h2 class="mt-4 font-display text-3xl font-bold leading-tight md:text-4xl">Slides that lean into the screen</h2>
          <p class="mt-4 text-sm leading-relaxed text-white/60 md:text-base">True perspective and rotateY transforms — not just a fade. Each slide has real depth as it moves off-center.</p>
        </div>

<div class="slide-item absolute left-1/2 top-1/2 w-[280px] -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-white/10 bg-white/[0.06] p-7 backdrop-blur-md sm:w-[340px] md:w-[420px] md:p-9">
          <span class="font-mono text-[11px] uppercase tracking-[0.25em] text-cyan-300">02 / Ambient</span>
          <h2 class="mt-4 font-display text-3xl font-bold leading-tight md:text-4xl">A background that breathes</h2>
          <p class="mt-4 text-sm leading-relaxed text-white/60 md:text-base">Drifting polyhedra float on their own rhythm, then gently follow the cursor for a subtle parallax layer.</p>
        </div>

<div class="slide-item absolute left-1/2 top-1/2 w-[280px] -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-white/10 bg-white/[0.06] p-7 backdrop-blur-md sm:w-[340px] md:w-[420px] md:p-9">
          <span class="font-mono text-[11px] uppercase tracking-[0.25em] text-amber-300">03 / Portable</span>
          <h2 class="mt-4 font-display text-3xl font-bold leading-tight md:text-4xl">Pure Tailwind, no plugins</h2>
          <p class="mt-4 text-sm leading-relaxed text-white/60 md:text-base">No animation libraries, no sliders package. Just utility classes, one config file, and a small vanilla script.</p>
        </div>

<div class="slide-item absolute left-1/2 top-1/2 w-[280px] -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-white/10 bg-white/[0.06] p-7 backdrop-blur-md sm:w-[340px] md:w-[420px] md:p-9">
          <span class="font-mono text-[11px] uppercase tracking-[0.25em] text-violet-300">04 / Yours</span>
          <h2 class="mt-4 font-display text-3xl font-bold leading-tight md:text-4xl">Fork it, recolor it, ship it</h2>
          <p class="mt-4 text-sm leading-relaxed text-white/60 md:text-base">Every gradient, timing and depth value lives in the config. Swap the tokens and it becomes your own.</p>
        </div>

</div>

<button id="prevBtn" aria-label="Previous slide" class="absolute left-1 top-1/2 z-20 -translate-y-1/2 rounded-full border border-white/15 bg-black/30 p-2.5 text-white/80 backdrop-blur transition hover:bg-white/10 hover:text-white md:left-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
      </button>
      <button id="nextBtn" aria-label="Next slide" class="absolute right-1 top-1/2 z-20 -translate-y-1/2 rounded-full border border-white/15 bg-black/30 p-2.5 text-white/80 backdrop-blur transition hover:bg-white/10 hover:text-white md:right-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
      </button>
    </div>

<div id="dots" class="relative z-20 mt-8 flex gap-3">
      <button class="dot h-2.5 w-2.5 rounded-full bg-white/25 transition-all duration-300" data-index="0" aria-label="Go to slide 1"></button>
      <button class="dot h-2.5 w-2.5 rounded-full bg-white/25 transition-all duration-300" data-index="1" aria-label="Go to slide 2"></button>
      <button class="dot h-2.5 w-2.5 rounded-full bg-white/25 transition-all duration-300" data-index="2" aria-label="Go to slide 3"></button>
      <button class="dot h-2.5 w-2.5 rounded-full bg-white/25 transition-all duration-300" data-index="3" aria-label="Go to slide 4"></button>
    </div>
  </div>
</div>

function render() {
    var w = stage.offsetWidth;
    var spacing = Math.max(180, w * 0.42);
    slides.forEach(function (el, i) {
      var offset = i - active;
      if (offset > slides.length / 2) offset -= slides.length;
      if (offset < -slides.length / 2) offset += slides.length;
      var abs = Math.abs(offset);
      var tx = offset * spacing;
      var tz = -abs * 260;
      var ry = offset * -32;
      var scale = 1 - abs * 0.14;
      var opacity = abs > 2 ? 0 : 1 - abs * 0.38;

el.style.transform = 'translate(-50%,-50%) translate3d(' + tx + 'px,0,' + tz + 'px) rotateY(' + ry + 'deg) scale(' + scale + ')';
      el.style.opacity = opacity;
      el.style.zIndex = 50 - abs;
      el.style.pointerEvents = abs === 0 ? 'auto' : 'none';
    });
    dots.forEach(function (d, i) {
      if (i === active) {
        d.classList.remove('bg-white/25', 'w-2.5');
        d.classList.add('bg-white', 'w-6');
      } else {
        d.classList.remove('bg-white', 'w-6');
        d.classList.add('bg-white/25', 'w-2.5');
      }
    });
  }

function goTo(i) {
    active = (i + slides.length) % slides.length;
    render();
  }
  function next() { goTo(active + 1); }
  function prevSlide() { goTo(active - 1); }

function startAutoplay() {
    stopAutoplay();
    timer = setInterval(next, 5000);
  }
  function stopAutoplay() {
    if (timer) clearInterval(timer);
  }

nextBtn.addEventListener('click', function () { next(); startAutoplay(); });
  prevBtn.addEventListener('click', function () { prevSlide(); startAutoplay(); });
  dots.forEach(function (d) {
    d.addEventListener('click', function () { goTo(parseInt(d.dataset.index, 10)); startAutoplay(); });
  });
  stage.addEventListener('mouseenter', stopAutoplay);
  stage.addEventListener('mouseleave', startAutoplay);
  window.addEventListener('resize', render);

// background parallax
  var shapeWraps = Array.prototype.slice.call(document.querySelectorAll('.shape-wrap'));
  var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

if (!reduceMotion) {
    root.addEventListener('mousemove', function (e) {
      var rect = root.getBoundingClientRect();
      var mx = (e.clientX - rect.left) / rect.width - 0.5;
      var my = (e.clientY - rect.top) / rect.height - 0.5;
      shapeWraps.forEach(function (el) {
        var depth = parseFloat(el.dataset.depth) || 15;
        el.style.transform = 'translate(' + (mx * depth) + 'px,' + (my * depth) + 'px)';
      });
    });
  }

render();
  startAutoplay();
})();
</script>

Related Examples

Typewriter effect
using javascript

Samuel Dawson

3 years ago

43.5k
background animation
background animation

Anonymous

3 years ago

53k
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Samuel Dawson

3 years ago

22k
3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

9.9k
background animation
background animation

Jayendra Madara

2 years ago

3.8k
responsive slider carousel
slider carousel

Abhiraj

1 year ago

3.1k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Abhiraj

1 year ago

2.4k
Moving Background Animation

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

4.2k
ForK blocks animations
ForK blocks animations

Yor Rodriguez

1 year ago

2.4k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Ayyamperumal S

1 year ago

2.5k
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Abdul Baset Bappy

1 year ago

2.3k
slider /carousel
simple slider or carousel

Omer fils ELENGA

1 year ago

1.7k