---
title: "Squircle Carousel — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Abhrajit Ray · Carousels. Squircle Carousel A horizontally flowing carousel where your images are masked behind a barrel-distorted grid of rounded cells."
canonical: "https://framer.elliotli.dev/component/squircle-carousel"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Squircle Carousel

# Squircle Carousel

Images, masked behind a squircle grid.

[View on Framer](https://framer.com/marketplace/components/squircle-carousel/?via=elliot-li)

![Squircle Carousel preview image 1](https://framer.elliotli.dev/og/component/squircle-carousel/b44ae9873e57784e/1600x1200.jpg)

## Summary

Squircle Carousel A horizontally flowing carousel where your images are masked behind a barrel-distorted grid of rounded cells.

## Description

## Squircle Carousel

A horizontally flowing carousel where your images are masked behind a barrel-distorted grid of rounded cells. Drag, release, snap, with smooth inertia, edge-responsive radii, and built-in auto-play.

### Features:

Drop-In Images: Upload any number of images through Framer's native image control. The carousel doubles them internally for seamless infinite scrolling. No duplication needed in your layout.

Barrel Distortion: Cells near the center render at full scale, while those drifting toward the edges shrink via a Gaussian falloff. Edge cells also get larger corner radii, creating a soft, squircle-like flow across the entire strip.

Drag Physics: Grab anywhere on the carousel and push it around. A LERP-based smoothing system catches the release with natural inertia, then snaps to the nearest image based on velocity or drag distance.

Auto Play: Set it and forget it. Toggle auto-play on, choose direction (left or right), and dial in the interval from 300ms to 10 seconds.

Arrow Navigation: Clean, customizable arrow buttons sit just below the carousel for accessibility. Fill color and icon color are both exposed as props.

Full Control: Tune rows (2–8), columns per image (4–14), cell gap, base radius, and frame color. Toggle the edge vignette on or off to match any background.

Responsive by Default: A built-in ResizeObserver rebuilds the grid the moment your layout changes. Cell dimensions recalculate live — no reload, no flicker.

### How It Works:

Each image is subdivided into a grid of cells and rendered across virtual columns. A single requestAnimationFrame loop computes Gaussian-scaled positions every frame, updating only the visible window of cells (±30 around center) for performance. Drag input updates a target scroll position; the render loop LERPs toward it, producing that buttery follow feel. Snap points are computed from velocity and drag distance.

## Rank history [How rankings work →](/terms#rankings)

-   All · #10469

## Details

- **Author**: Abhrajit Ray
- **Price**: $10.00
- **Published**: 2026-05-08
- **Updated**: 2026-05-08
- **Added**: 2026-04-22
- **Categories**: Carousels

## More like this

-   [Screen Stage Mockup](/component/screen-stage-mockup) — Aisol Studio · $14 — Your screens in synced devices
-   [Team Reel](/component/team-reel) — Ali Musa · Free — Interactive Team Showcase
-   [Slider](/component/slider) — MAS · Free — A smooth, customizable slider.
-   [Cascade Card Slider](/component/cascade-card-slider) — Tim Yeng · Free — Cards that cascade into view