proNew158 lines · framer-motion

Feature Icon Orbit

A hub with every capability orbiting around it. A central runtime hub with feature icons slowly orbiting it on dashed rings; hovering pauses the orbit, and clicking any icon swaps the hub's content to that feature's description.

Use it for: A compact, visual way to say 'one core thing, several capabilities around it' — a runtime, a platform, an API — without a plain icon grid.
Themes: Light + dark
License: Commercial use

Live

One agent, many parts

Everything orbits one runtime

Runtime

Click any node to read what it does.

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useAnimationFrame, useMotionValue, useReducedMotion, useTransform } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

export interface OrbitFeature {
  id: string;
  label: string;
  title: string;
  description: string;
  icon: "bolt" | "shield" | "layers" | "chat" | "chart" | "globe";
}

export interface FeatureIconOrbitProps {

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Feature icons orbit a central hub on a continuous loop while counter-rotating on their own axis so each icon stays upright.
→Hovering the orbit area pauses the rotation in place so a visitor can read and click calmly.
→Clicking an orbiting icon cross-fades the hub's centre content to that feature's icon and title, and the caption below updates to its description.
→The orbit and counter-rotation are both skipped under prefers-reduced-motion, leaving the icons in a static ring.

Accessibility

✓Every orbiting node is a real button with an `aria-label` naming the feature and `aria-pressed` reflecting selection.
✓The caption below the orbit is `aria-live="polite"` so the selected feature's description is announced without moving focus.
✓Decorative rings and the ambient glow behind the hub are `aria-hidden`.
✓Honours prefers-reduced-motion.