About OrbitRingPro
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.
