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.
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
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
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
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
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
Hamim Reza
