Future UI

Squircle Carousel

⟲ Carousels

Horizontal flowing carousel where images are masked behind a barrel-distorted grid of rounded cubes with snap physics and smooth inertia.

carouselsquirclegridmaskbarreldraginertia

No preview available

Drag to explore — snaps between images

Controls

4
6
3
16
#0a0a0a

Carousels / React Component

About Squircle Carousel

Horizontal flowing carousel where images are masked behind a barrel-distorted grid of rounded cubes with snap physics and smooth inertia.

Category Carousels
Framework React + TypeScript
Tags carousel, squircle, grid, mask, barrel, drag, inertia

Install Squircle 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/squircle-carousel.json?key=YOUR_LICENSE_KEY"

Usage example

import SquircleCarousel from './SquircleCarousel';

const images = [
  '/photo1.jpg',
  '/photo2.jpg',
  '/photo3.jpg',
  '/photo4.jpg',
  '/photo5.jpg',
];

export default function Example() {
  return (
    <div className="w-full h-[60vh] bg-neutral-950">
      <SquircleCarousel
        images={images}
        rows={4}
        colsPerImage={6}
        gap={3}
        borderRadius={16}
        maskColor="#0a0a0a"
        vignette
      />
    </div>
  );
}