---
title: "Arc Carousel — Free Framer component · Best of Framer"
description: "Free Framer component · by Tim Yeng · Carousels. How to Use Drag the Arc Carousel onto your canvas."
canonical: "https://framer.elliotli.dev/component/arc-carousel"
---

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

# Arc Carousel

Infinite circular carousel

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

![Arc Carousel preview image 1](https://framer.elliotli.dev/og/component/arc-carousel/561b4a7cc50ba92f/1600x1200.jpg)

## Summary

How to Use Drag the Arc Carousel onto your canvas.

## Description

**Key Features**

-   **True Infinite Loop:** The component intelligently duplicates your slides to create a seamless, unbroken circle, no matter how few items you start with.
    
-   **Dual Interaction Modes:**
    
    -   **Free Spin:** Throw and flick the carousel with realistic inertia (momentum). Great for browsing large galleries.
        
    -   **Clock Mode (Strict):** A precision mode that snaps slides perfectly to the center, similar to a ticking clock or a dial.
        
-   **Physics-Based Touch & Drag:** Built on top of Framer Motion’s gesture system for buttery smooth 60fps performance on mobile and desktop.
    
-   **Keyboard Navigation:** Fully accessible arrow-key support allows users to step through items precisely.
    
-   **Smart Autoplay:** Includes adjustable speed and direction. Autoplay pauses intelligently when the user interacts (drags) and resumes automatically.
    

**Customization Controls**

Easily tweak the look and feel directly from the Framer sidebar:

-   **Radius:** Flatten the curve or make it a tight circle (400px – 3000px).
    
-   **Gap (Spacing):** Control the rotational degree between items.
    
-   **Speed:** Adjust the autoplay velocity.
    
-   **Direction:** Clockwise or Counter-clockwise rotation.
    

**How to Use**

1.  Drag the **Arc Carousel** onto your canvas.
    
2.  Connect your own Frames or Components to the **Slides** connector.
    
3.  Adjust the **Radius** to fit your layout width.
    
4.  Select your preferred **Mode** (Free or Strict).
    

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

-   All · #1027

## Details

- **Author**: Tim Yeng
- **Published**: 2026-02-05
- **Updated**: 2026-07-07
- **Added**: 2026-01-25
- **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