RotatingRing

3D rotating ring carousel with drag

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

3D rotating ring carousel with drag