Mind Map Branches

When to use it

Scope and roadmap maps, topic or concept diagrams, feature breakdowns, section headers for planning docs — a hierarchy that should feel drawn rather than laid out.

When not to

More than six or seven branches, or long labels — chips are placed by hand and will collide; and any case needing a second level of labelled sub-branches.

Working with an AI agent

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

Edit the limbs array — d is the limb's quadratic curve in the 0-100 grid, x/y the chip's centre, t its label, n its count; end each curve just inside the chip so the chip's surface hides the line end. Change the growth beat with setInterval(advance,760) and the node-dot sample points ([.5,.78] along the path). 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 branches (limbs array: d curve path, x/y chip centre, t label, n count)
• node dot positions along each limb ([.5,.78] fractions) and radius (r=1.1)
• growth beat (setInterval(advance,760)) and the hold before regrow (limbs.length+3)
• limb weight and opacity (.mmp-svg path stroke-width .75, opacity .75)
• hub pill text and glow (.mmp-hub box-shadow ring)

Keep intact

• :root --pro-* token block (renaming breaks the shared pro theming API)
• role=img + aria-label on .mmp-stage
• IIFE wrapper
• pathLength=100 with stroke-dasharray:100 — this is what makes the draw-on work regardless of the curve's real length
• the container-query square box (.mmp-mid/.mmp-map) that keeps the SVG grid and the HTML chip percentages aligned
• getPointAtLength sampling for the node dots (they follow the real curve)
• the .snap class used to clear without animating backwards
• prefers-reduced-motion early return to the fully grown map
• visibilitychange pause (halt/play on 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
• Curves and chip positions are authored — no radial auto-layout, so a seventh branch needs its own curve
• One level of branches; sub-branches would need their own curves and collision checks
• Item counts are hidden below 280px (media query)

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