---
title: "RotatingRing — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Hamim Reza · Navigation. 3D rotating ring carousel with drag"
canonical: "https://framer.elliotli.dev/component/rotatingring"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/RotatingRing

# RotatingRing

3D rotating ring carousel with drag

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

![RotatingRing preview image 1](https://framer.elliotli.dev/og/component/rotatingring/85a5a79bb0be255f/1600x1200.jpg)

## Summary

3D rotating ring carousel with drag

## Description

A 3D rotating ring carousel that displays images and videos in a circular formation with drag-to-rotate, drop-in entrance animations, and dynamic depth overlay. Six entrance presets, bidirectional rotation, configurable perspective, and click-to-navigate. Built for product showcases, portfolio galleries, fashion lookbooks, and any creative section that needs an immersive 3D presentation.

## Features

-   3D rotating ring of cards — images and videos mixed freely
    
-   Drag-to-rotate with configurable sensitivity and click threshold
    
-   Drop-in entrance animation — cards fall and settle with staggered timing
    
-   Six drop presets — gentle, normal, dramatic, quick, slow, custom
    
-   Dynamic depth overlay — cards facing away darken based on rotation angle
    
-   Bidirectional rotation — left to right or right to left
    
-   Configurable rotation speed, perspective and ring radius
    
-   Click navigation — each card links to a URL
    
-   Open links in same or new tab per item
    
-   Optional pulsing brightness effect with configurable dim level
    
-   Pause on hover · pause when out of viewport · pause during drag
    
-   Auto-play video cards with pause/play synced to component state
    
-   Custom alt text per media item for accessibility
    
-   Up to 20 items supported
    
-   Direct DOM manipulation for smooth 60fps performance
    
-   Static preview in Framer canvas editor
    
-   No dependencies
    

## Drop-In Presets

-   **Gentle** — soft slow drop · 1.0s · 140px
    
-   **Normal** — balanced drop · 1.2s · 260px
    
-   **Dramatic** — high impact drop · 1.6s · 520px · default
    
-   **Quick** — fast drop · 0.7s · 220px
    
-   **Slow** — extended drop · 1.9s · 260px
    
-   **Custom** — full control over duration, distance and stagger
    

## Property Controls

**Items**

-   Up to 20 items · image or video per item
    
-   Alt text · link URL · open in new tab per item
    

**Overlay**

-   Enable/disable depth overlay · max overlay opacity (0–1)
    

**Appearance**

-   Image fit — cover or contain
    
-   Card width · card height · background color
    
-   Border — width, style, color · border radius (0–64px)
    

**Animation**

-   Direction — left to right or right to left
    
-   Duration — full rotation time in seconds
    
-   Perspective — 3D depth (100–3000px)
    
-   Ring Radius — distance from center (0–600px)
    

**Drop In**

-   Enable/disable · preset selection
    
-   Custom — drop duration, distance, stagger delay
    

**Drag**

-   Enable/disable · drag speed (0.01–2) · click threshold (0–30px)
    

**Brightness**

-   Enable/disable pulsing effect · dim level (0–1)
    

**Behavior**

-   Pause on hover · pause out of viewport · static canvas toggle
    

## Technical Details

-   Direct DOM transform updates bypass React for 60fps performance
    
-   RequestAnimationFrame for rotation and overlay calculations
    
-   CSS keyframe drop-in animation with staggered delays
    
-   will-change CSS hints for GPU acceleration
    
-   Pointer events for unified mouse and touch drag handling
    
-   Video pause and play synced to component visibility state
    
-   IntersectionObserver pauses animation when out of viewport
    
-   Custom event dispatched on card click — Card3DRingItemClick
    
-   Keyboard navigation — Enter and Space key support
    
-   ARIA labels and semantic HTML throughout
    

## Use Cases

Product showcases · Portfolio galleries · Fashion lookbooks · Team presentations · Feature highlights · Event galleries · Mixed media carousels · Creative agency hero sections

**SEO Keywords**

framer 3d carousel · framer rotating carousel · framer 3d gallery · framer ring carousel · framer circular carousel · framer drag carousel · framer 3d rotation · framer image carousel · framer video carousel · framer orbit carousel · framer depth carousel · framer premium carousel · framer creative carousel · framer code component · framer 3d component

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

-   All · #5719

## Details

- **Author**: Hamim Reza
- **Price**: $12.00
- **Published**: 2026-04-14
- **Updated**: 2026-05-12
- **Added**: 2026-04-06
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation