∞ forever components

Hierarchy & Trees

Radial Hierarchy

Six divisions sit on an inner ring with their teams fanned out on an outer ring, spokes running back to a central hub; the whole diagram turns slowly while the selection walks division by division and a caption names that division's teams and headcount.

svglight complexitysubtle motionmobile-readyaccessible

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Ambient org or system overviews, hub-and-spoke architecture diagrams, category maps — a hierarchy that should read as one shape rather than a list.

When not to

Precise reading or comparison — angles are decorative, not quantitative — and hierarchies deeper than two rings, which the radial form cannot nest.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Edit the divs array (n name, p people, k team names) — spokes, outer nodes and the caption all derive from it, and ring order follows array order. Tune R1/R2 (ring radii) and SPREAD (degrees between sibling teams), or slow the turn with the rhx-rot 96s animation. Re-theme to light by setting --pro-bg:#f6f8fa; --pro-surface:#ffffff; --pro-border:rgba(0,0,0,.08); --pro-text:#1f2328; --pro-muted:#59636e (keep --pro-accent), and update the catalog bg field to match. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • theme tokens (:root --pro-* dark defaults + the :root[data-theme="light"] overrides)
  • the hierarchy (divs array: name, people count, team names)
  • ring radii (R1=25, R2=41) and sibling spread (SPREAD=11 degrees)
  • rotation period (@keyframes rhx-rot, 96s) and selection beat (setInterval(advance,2600))
  • node sizes (rhx-b r=2.3, rhx-l r=1.35, hub r=3.9) and dim level (--rhx-dim, .rhx-div opacity)

Keep intact

  • :root --pro-* token block (renaming breaks the shared pro theming API)
  • role=img + aria-label on .rhx-stage
  • IIFE wrapper
  • transform-box:view-box on .rhx-spin — without it the group rotates about its own bounding box and wobbles
  • the container-query square box (.rhx-mid/.rhx-svg) that keeps the 0-100 grid circular
  • prefers-reduced-motion (no rotation, one division lit)
  • visibilitychange pause (.paused freezes the rotation, halt/play the interval)
  • theme hook (?theme= pre-paint bootstrap + forever:theme message listener + the two-palette token block)

Known limitations

  • Light re-theme via the --pro-* block; catalog bg/accent describe the dark default
  • Two rings only — a third level of nesting has nowhere to go
  • Team names live in the caption, not on the nodes, so outer dots are unlabelled
  • The teams list in the dock is hidden below 300px (media query)

radialhierarchyorg-charthub-and-spokenetworkdiagramrotatingdataviz

More Hierarchy & Trees components

  • Org Tree RevealA three-level engineering org chart of eight people drawn with elbow connectors; the selection walks the org, lighting the whole reporting line from the…
  • Collapsible TreeAn indented three-level company tree — divisions, teams, then people — with rotating chevrons, guide rails and headcount pills; on a loop one division…
  • Branch TimelineA three-lane commit graph that draws itself top to bottom: the trunk advances, a feature branch splits off through two commits and merges back, then a…
  • Decision TreeAn order-approval decision tree: a risk check branches to a country check and an amount check, fanning out to four outcome pills; each pass lights one…
  • Mind Map BranchesSix curved limbs grow outward from a central topic pill one at a time, each sprouting two node dots before landing on a labelled chip with its open-item…