---
title: "OrbitRingPro — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Can Girgin · Effects. OrbitRing Pro is a refined 3D ring gallery for Framer."
canonical: "https://framer.elliotli.dev/component/orbitringpro"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/OrbitRingPro

# OrbitRingPro

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

![OrbitRingPro preview image 1](https://framer.elliotli.dev/og/component/orbitringpro/2a46aad35e63292b/1600x1200.jpg)

## Summary

OrbitRing Pro is a refined 3D ring gallery for Framer.

## Description

**OrbitRing Pro** is a refined 3D ring gallery for Framer. It’s built to look premium out-of-the-box and stay simple to edit.

What you get

-   Smooth intro animation with gentle stagger
    
-   Hover micro-lift + optional active glow on the front card
    
-   Dynamic header (title + optional subtitle) that updates per item
    
-   Drag, mouse wheel, and arrow-key controls
    
-   Scroll-safe modes so the page still scrolls naturally
    
-   Responsive sizes for phone/tablet/desktop
    
-   Respects “Reduce Motion” preferences
    

How to use

1.  Drop the component onto your canvas (comes with a sensible default size).
    
2.  Open **Items** and add your images.
    
    -   **Card Title**: short label on each card (≤12 chars).
        
    -   **Header Title**: big title (1–3 words).
        
    -   **Subtitle** (optional): short line under the header.
        
3.  Tweak **Layout** if needed (Radius, Card W/H, Tilt).
    
4.  Style via **Appearance**, **Card Title**, and (optional) **Header** & **Active Glow**.
    
5.  Pick a **Scroll Behavior**:
    
    -   **Page** – vertical scroll passes through (best for long pages)
        
    -   **Rotate** – vertical wheel rotates the ring
        
    -   **Smart** – rotates when horizontal intent is detected
        

Key controls (kept simple)

-   **Items** – your images + texts (short & readable).
    
-   **Layout** – ring size & card dimensions.
    
-   **Motion** – drag speed, momentum, snap.
    
-   **Appearance** – background & subtle card border.
    
-   **Intro** – duration & stagger.
    
-   **Hover** – micro-lift and scale.
    
-   **Card Title** – font & color for the on-card label.
    
-   **Show Header** – toggle the top header.
    
-   **Header** – header typography, color, subtitle, timing.
    
-   **Enable Glow** – toggle front-card glow.
    
-   **Active Glow** – glow color, strength, active scale.
    
-   **Scroll Behavior** – mode, wheel speed, “Shift to rotate”.
    

Tips

-   Prefer short labels; long text is truncated on cards.
    
-   For a premium look, try backgrounds like #0B1320 (Cosmic Navy) or #111315 (Graphite Warm).
    
-   Product shots? Use a light background and darker card title color.
    
-   Keyboard arrows also rotate the ring.
    

Accessibility

-   Honors **prefers-reduced-motion**.
    
-   Images use your uploaded **alt** text.
    
-   Keeps page scrolling usable with **Page** mode.
    

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

-   All · #10233

## Details

- **Author**: Can Girgin
- **Price**: $5.00
- **Published**: 2025-09-11
- **Updated**: 2025-09-18
- **Added**: 2025-08-30
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows