---
title: "Circular Orbit — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Francesco Caronte · Carousels. About this component Circular Orbit lets you create dynamic, interactive layouts with a smooth, rotating motion."
canonical: "https://framer.elliotli.dev/component/circular-orbit"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Circular Orbit

# Circular Orbit

An interactive, fully customizable orbit

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

![Circular Orbit preview image 1](https://framer.elliotli.dev/og/component/circular-orbit/4a31b1304f579d17/1600x1200.jpg)

## Summary

About this component Circular Orbit lets you create dynamic, interactive layouts with a smooth, rotating motion.

## Description

## About this component

Circular Orbit lets you create dynamic, interactive layouts with a smooth, rotating motion. Items move naturally along a circular path, giving depth and dimension to your designs. It works with any Framer component, so you can animate content directly—no image uploads required. Perfect for hero sections, galleries, or experimental layouts, it offers full control over motion, scale, blur, and perspective, while staying fully responsive and easy to use without code.

## Customizable Properties

**Items**

-   **Items** – Connect any Framer components as orbiting elements
    

**Size & Scale**

-   **Start Size** – Initial orbit radius
    
-   **End Size** – Final size near the center
    
-   **Item Scale** – Scale of individual items
    

**Motion**

-   **Inward Speed** – Speed at which items move toward the center
    
-   **Inward Easing** – Easing behavior for inward motion (e.g. Spring)
    
-   **Rotation** – Total rotation angle of the orbit
    
-   **Loop Speed** – Rotation speed per second
    
-   **Loop Easing** – Timing smoothness of the looping animation
    

**Depth & Blur**

-   **Start Blur** – Blur amount when items enter the orbit
    
-   **End Blur** – Blur amount near the center
    

**3D & Perspective**

-   **Perspective** – Depth perspective intensity
    
-   **3D Rotation** – Adjust rotation on X, Y, and Z axes
    

**Interaction**

-   **Drag to Rotate** – Enable or disable manual rotation via drag
    

## Use cases

Hero sections · Interactive galleries · Editorial layouts · Experimental UI · Visual storytelling

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

-   All · #9300

## Details

- **Author**: Francesco Caronte
- **Price**: $8.00
- **Published**: 2026-02-05
- **Updated**: 2026-02-09
- **Added**: 2026-01-25
- **Categories**: Carousels

## More like this

-   [3DCurvedImageMarquee](/component/3dcurvedimagemarquee) — Lera · $4 — Curved perspective double ticker
-   [Orbit Kit Carousel](/component/orbit-kit-carousel) — Khairul Fauzy Khairudin · $12 — 3D drag carousel with inertia
-   [Team Orbit](/component/team-orbit) — Ali Musa · Free — Interactive Team Showcase
-   [Glow Testimonial](/component/glow-testimonial) — Interface Studio · Free — Testimonials with a Little Glow