Org Tree Reveal

When to use it

Org charts, team and people directories, HR or admin dashboards — any hierarchy where a node needs more detail than fits in its box; the slide-up card is that detail surface.

When not to

Trees whose shape is unknown at build time — positions are authored percentages, not an auto-layout; and very deep or wide orgs (beyond ~10 nodes over 3 levels) that would crowd a small tile.

Working with an AI agent

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

Edit the people array (id, in initials, n name, r role, p parent id, x/y percent of the chart box, st the three [label,value] stats) to model your own org — connectors, the lit reporting path and the card all derive from it. Change the walk beat with setInterval(advance,2400), or drop the interval and keep the pointerenter/click handlers for a hover-only chart. 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 org itself (people array: id, initials, name, role, parent, x/y percent, three stats)
• auto-walk beat (setInterval(advance,2400) — short enough that the mount audit sees the wall tile move) and the card swap delay (300ms)
• card slide easing/duration (.otr-sheet transition, .42s cubic-bezier)
• node size and dimming (.otr-node min-width, opacity .5 vs .lit)

Keep intact

• :root --pro-* token block (renaming breaks the shared pro theming API)
• role=img + aria-label on .otr-stage
• IIFE wrapper
• prefers-reduced-motion early return to a populated state (one person selected, card up)
• visibilitychange pause (halt/play on the interval)
• .otr-dock reserving the card's strip — it is what stops the card covering the bottom row of nodes
• vector-effect:non-scaling-stroke on the connectors (the SVG is stretched with preserveAspectRatio=none)
• 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
• Node positions are authored percentages — no auto-layout, so a new sibling needs its x/y picked by hand
• Elbow corners are square by design; rounded joins would distort under the stretched viewBox
• Eight nodes over three levels is about the ceiling before labels crowd at a 180-240px tile

More Hierarchy & Trees components

• 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…
• Radial HierarchySix 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…
• 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…