OrbitRingPro
Elegant 3D ring of cards with smooth intro, hover effects, dynamic page title, active glow highlight and scroll-safe behavior. Drop in, add images, done.
Make it with Workshop
Build your own component with AI
Elegant 3D ring of cards with smooth intro, hover effects, dynamic page title, active glow highlight and scroll-safe behavior. Drop in, add images, done.
Make it with Workshop
Build your own component with AI
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
Drop the component onto your canvas (comes with a sensible default size).
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.
Tweak Layout if needed (Radius, Card W/H, Tilt).
Style via Appearance, Card Title, and (optional) Header & Active Glow.
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.
