RotatingRing

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