Future UI

Disperse Carousel

⟲ Carousels

Card carousel with shattering triangle dispersion effect powered by GSAP.

carouseldisperseshatteranimationgsapcards

No preview available

GSAP + Clip-Path Fragments ~ Click Arrows to Navigate

Controls

Theme

Carousels / React Component

About Disperse Carousel

Card carousel with shattering triangle dispersion effect powered by GSAP.

Category Carousels

Framework React + TypeScript

Dependencies gsap, lucide-react

Tags carousel, disperse, shatter, animation, gsap, cards

Install Disperse Carousel in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/disperse-carousel.json?key=YOUR_LICENSE_KEY"

Usage example

import DisperseCarousel from './DisperseCarousel';

function Card({ title, image }: { title: string; image: string }) {
  return (
    <div className="relative w-[320px] h-[480px] rounded-2xl overflow-hidden">
      <img src={image} alt={title} className="absolute inset-0 w-full h-full object-cover" />
      <div className="absolute bottom-0 p-8">
        <h2 className="text-white text-3xl font-bold">{title}</h2>
      </div>
    </div>
  );
}

export default function Example() {
  return (
    <div style={{ height: 700 }}>
      <DisperseCarousel autoPlay={5000}>
        <Card title="Mountain Peak" image="/mountain.jpg" />
        <Card title="Ocean Wave" image="/ocean.jpg" />
      </DisperseCarousel>
    </div>
  );
}