Proximity Sidebar

The sidebar gives readers a sense of document length without forcing another table of contents into the layout. Each dash represents real content, so the minimap feels tied to the page instead of decorative.

Pointer proximity expands nearby dashes continuously. Scroll activation only pulses for a short moment, then returns to baseline so the navigation does not stay visually loud.

The component works best when it mirrors the reading structure: major titles, secondary headings, and smaller descriptive sections all become part of the same quiet stack.

Clicking any dash scrolls to its matching content block. This keeps the minimap useful while preserving the minimal visual language of the original dash-only design.

Titles use the strongest base length, subtitles sit slightly below that, and body sections stay short and muted. The hover expansion uses the same proportions.

The dash animation is driven by transform scale, not layout width. That keeps the interaction responsive even while the scroll container is moving.

A title dash should represent a major region of the document. These are the strongest marks and should appear only where the reader expects a new chapter or major concept.

Subtitle dashes are slightly quieter than title dashes. They are useful for feature groups, installation steps, API categories, or meaningful document turns.

Section dashes sit between markers and body text. They add rhythm without making the entire minimap look like every entry has the same importance.

Body dashes are the smallest marks. They let the sidebar reach the same density as the original implementation while still being connected to real content.

If a section does not provide a kind or level, the component looks for the first heading inside the target element and maps h1, h2, and h3 to visual weight.

Hovering over the stack sets a shared pointer value. Each dash measures its own distance from that pointer and scales according to proximity.

When the reader scrolls, the closest content section expands for half a second and then returns to normal. The active cue is useful but not sticky.

Each dash is rendered as a button with an accessible label. The visual stays minimal, but the control still behaves like real navigation.

The demo uses an internal scroll area. The component detects scrollable parents for the target sections, so the pulse works inside app layouts too.

When reduced motion is requested, clicking a dash jumps without smooth scrolling. The component keeps the navigation predictable for motion-sensitive users.

Selecting a dash updates the URL hash for the target id. Readers can copy or reload the page and keep the same location context.

The original component felt precise because the gaps were tight and consistent. This version keeps the same vertical spacing across all dash types.

The hierarchy comes from length and color instead of heavy stroke widths. That keeps the minimap refined even when the page has many anchors.

Major sections use the foreground color. Smaller items use muted foreground opacity so they create density without overpowering the page.

The strongest mark expands to the same full length as the initial prototype. Smaller entries preserve that same proportional language.

When the sidebar moves to the right side, dashes expand from the right edge. This keeps the motion anchored to the outside rail.

For a dense docs page, include more than only top-level headings. Add subtitles and meaningful descriptive blocks to create the minimap texture.

Use kind when the visual weight should not depend on the DOM heading level. This is helpful for demos, MDX content, and generated docs.

If your content pipeline already knows heading levels, pass level values from one to six and let the component map them to dash weights.

The component handles the stack and motion. The surrounding page can control sticky positioning, sidebar width, and responsive visibility.

Avoid decorative-only dashes. The minimap is strongest when every line represents something the reader can jump to and understand.

A dense minimap is best for larger reading surfaces. On small screens, it can be hidden or moved behind a compact navigation affordance.