PParable
All components

Orbit Icons

Visual Effects

A centerpiece encircled by concentric dashed rings of evenly-spaced icon chips that revolve continuously while staying upright.

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/orbit-icons.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/orbit-icons.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div style={{ display: "grid", placeItems: "center", width: "100%", minHeight: 360, background: "radial-gradient(circle at 50% 45%, #17141f, #0f0f10)" }}>
    <OrbitIcons
      pauseOnHover
      rings={[
        { icons: [<PenTool key="f" />, <MessageCircle key="s" />, <GitBranch key="g" />, <Globe key="c" />], radius: 72, duration: 18 },
        { icons: [<Cloud key="cl" />, <Database key="d" />, <Cpu key="cp" />, <Zap key="z" />, <Globe key="gl" />, <Boxes key="b" />], radius: 120, duration: 26, reverse: true },
      ]}
    >
      <div style={{ display: "grid", placeItems: "center", width: 64, height: 64, borderRadius: 18, background: "linear-gradient(135deg, #8b5cf6, #ec4899)", boxShadow: "0 12px 40px -8px #8b5cf6aa, inset 0 1px 0 rgba(255,255,255,0.25)", color: "#fff" }}>
        <Sparkles style={{ width: 28, height: 28 }} />
      </div>
    </OrbitIcons>
  </div>

Props

OrbitIconsProps extends React.HTMLAttributes<HTMLDivElement>

PropTypeDefaultDescription
childrenReact.ReactNode—Centerpiece — e.g. a logo — rendered above the rings, dead center.
rings*OrbitRing[]—1–3 concentric rings, each carrying evenly-spaced revolving icon chips.
pauseOnHoverbooleanfalseFreeze all rotation while the pointer is over (or focus is within).

npm dependencies

  • lucide-react