Circular Orbit

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