proNew152 lines · framer-motion

Hero Orbit Icons

A hub, and everything orbiting it. A centred hero with a flat CSS orbit above the headline: a central hub and up to three rings of icon chips rotating at different speeds, each chip counter-rotated at the same rate so it stays upright through the loop.

Use it for: Integration pages, API platforms or anything pitched as 'connect your tools to one core' — classic hub-and-spoke visual, no 3D engine.
Themes: Light + dark
License: Commercial use

Live

Integrations · 20+ tools

Everything you use, one orbit

A hub-and-orbit hero for integration pages, API platforms or anything that connects a lot of tools to one core.

Connect your stack →See all integrations

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } 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;
}

/**
 * Centred hero with a flat CSS orbit behind the headline: a central hub and
 * up to three rings of icon chips rotating at different speeds, each chip
 * counter-rotated at the same rate so it stays upright through the loop.
 */

export interface HeroOrbitIconsProps {
  eyebrow?: string;
  headline?: string;

The rest is in Pro.

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

Get Pro

How it behaves

→Each ring is a rotating container; every icon chip inside sits at a fixed angle via transform: rotate(angle) translate(radius) rotate(-angle), then counter-rotates at the ring's own speed and duration so the chip itself never appears to spin, only its position orbits.
→ringCount (1–3) controls how many concentric rings render; speed scales every ring's duration together so their relative speeds stay proportional; reverse flips every ring's direction at once.
→Alternating rings spin in opposite directions by default, which reads clearly even at a glance since ringCount changes which rings are visible.
→prefers-reduced-motion removes every rotate animation, leaving the hub and a static orbit diagram.

Accessibility

✓The whole orbit (hub, rings and icon chips) is a single aria-hidden decorative block; only the eyebrow, heading, copy and two real <a> CTAs carry real content.
✓Headline is a single <h1>; the orbit scales down with the viewport and never overlaps the text column.
✓CTAs keep the design system's visible focus ring.
✓Honours prefers-reduced-motion.