Feature Orbit is a premium interactive showcase that arranges your product's features around a central image in a clean radial wheel. On desktop, hovering any icon smoothly activates it. On mobile, tapping does the same.
The center image cross-fades with a soft blur, the active icon lifts on a 3D tilted card, and the title + description slide into view on the side closest to the icon.
Below your chosen breakpoint, the component automatically swaps to a stacked vertical layout, so phones get a tap-friendly experience without horizontal scrolling or clipping.
- 6 default inline SVG icons + soft center-image placeholders — replace with your own anytime
- Position-aware label gutters — descriptions appear on the side closest to the active icon
- 3D tilted "platform" card animation behind the active icon
- Concurrent cross-fade with blur on the center image — no flash, no layout shift
- Responsive layout swap — desktop wheel becomes a stacked mobile view below your breakpoint
- Hover, click, and tap support with `touch-action: manipulation` for instant mobile response
- Full keyboard accessibility — Tab to focus, Enter or Space to activate
- ARIA roles, labels, and pressed states for screen readers
- 13 property controls — tune wheel radius, icon size, center dimensions, colors, gradients, breakpoint and more
every item has its own title, description, icon and center image. Add as many or as few items as you like; the wheel auto-distributes them around the circle.
Built with Framer Motion. No external dependencies, no CDN imports. Drop it in and ship.
Perfect for SaaS landing pages, product feature sections, agency portfolios, and anywhere you want to spotlight a set of features in an interactive, premium way.
Vraj Parikh
