Squircle Carousel

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

Drag the stage left or right to explore images seamlessly across squircle tiles.

Interactive Squircle Grid Carousel

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Squircle Carousel

npx shadcn@latest add @algorize-ui/squircle-carousel

components/custom/squircle-carousel.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Squircle Carousel to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

next-themes is an npm package.

npm install next-themes

Features

Discover the key capabilities that make this component an excellent choice for modern, animated user interfaces.

Squircle Grid Masking

Images flow seamlessly behind a matrix of rounded squircle tiles for an ultra-modern aesthetic.

Drag & Inertia Physics

Interactive mouse and touch drag controls with grab cursor and smooth momentum deceleration.

Responsive Stage Scaling

Automatically adapts height and squircle tile density across mobile, tablet, and desktop viewports.

Light & Dark Theme Adaptation

Built with Next Themes integration to transition canvas backgrounds and edge gradient overlays dynamically.

Best Practices & Guidelines

Animation Performance

Use high-resolution landscape images (1200x800 or larger) so that sub-crops render crisp fragments across all squircle columns.

State Management

Images are preloaded asynchronously into HTMLImageElement instances before canvas rendering to prevent flickering during drag gestures.

Props Reference

Component	Prop	Type	Default	Description
`SquircleCarousel`	`items`	`SquircleCarouselItem[]`	`DEFAULT_NATURE_ITEMS`	Array of image items containing `{ id, title, imageUrl }` to display in the carousel.
`SquircleCarousel`	`rows`	`number`	`4`	Number of horizontal rows in the squircle tile matrix.
`SquircleCarousel`	`gridGap`	`number`	`8`	The gap spacing in pixels between squircle tiles.
`SquircleCarousel`	`fadeWidthPercent`	`number`	`36`	Edge fade gradient overlay width percentage (0 to 50).
`SquircleCarousel`	`showHeaderShell`	`boolean`	`false`	When set to true, displays the outer header metadata title, tags, buttons, and footer caption.
`SquircleCarousel`	`className`	`string`	`undefined`	Custom Tailwind CSS classes to apply to the stage container element.