Proximity Sidebar

A compact document minimap turns headings and paragraph rhythm into interactive dashes. Every dash rests at the same short length, nearby marks expand toward the pointer, and the active mark brightens as you read.

The rail gives readers a sense of document length without adding another table of contents. Each dash points to real content, so the minimap stays connected to the page instead of feeling decorative.

Nearby dashes expand continuously as the pointer moves along the rail. The change is restrained at rest and becomes easier to read only near the pointer.

Major titles, secondary headings, and paragraphs each get their own mark. The equal lengths keep the map calm while the article itself carries the hierarchy.

Select any dash to move to its matching block. Keyboard focus uses the same preview and arrow keys move through the document in order.

The current block gets one brighter mark. When the active section changes, the previous mark returns to its quiet opacity; every dash keeps the same length.

Content Model

The sidebar reflects the sections you provide. That keeps the visual hierarchy predictable and makes the rail easy to tune for a different document.

Title marks

A title mark points to a major region of the document. It rests at the same short length as every other mark, then grows only when the pointer approaches.

Use title marks for introductions, large feature areas, installation steps, or other sections that readers may want to revisit.

Subtitle marks

Subtitles use the same resting mark as titles and body sections. Their place in the article remains clear without adding visual noise to the rail.

A subtitle can represent a feature group, a configuration step, an API category, or a meaningful turn in a longer explanation.

Section marks

Every section mark stays on the same regular rhythm. Group labels appear in the hover preview without interrupting the rail with extra gaps.

Set a group to show its label in the preview. The marks keep an even rhythm from top to bottom, even when the group changes.

Body marks

Body sections use the same quiet mark as every other item. A dense page can show more destinations without turning the rail into a pattern of competing lengths.

Any mark expands when the pointer passes nearby. The active section brightens but keeps its original length, so the rail stays even while you read.

Pointer Response

Proximity is measured from the center of each mark. A smooth falloff gives nearby dashes a connected response without changing their position in the rail.

Proximity range

The range spans a small group of neighboring marks. Moving the pointer farther away returns them to their original width and opacity.

Scroll response

Scrolling updates the active mark from the block nearest the reading line. The position follows the article without requiring the reader to point at the rail.

The rail checks the same scroll container as the article. When the last block reaches the end of the view, the final mark becomes active as well.

Keyboard navigation

Focus a mark and use the arrow keys to move through the list. Home and End jump to the first and last marks, and Enter selects the focused block.

Reduced motion

When reduced motion is enabled, the rail changes directly to its next state. It stays useful without running spring animations.

Tuning the Rail

The minimap can follow any long-form content. Give each item a stable ID, a short label, and an optional group for the hover preview.

Dash lengths

Every dash starts at the same short length. Nearby dashes grow with a smooth falloff, while the active section is shown through brightness alone.

Groups and labels

Set a group to show its label in the floating preview. Titles and excerpts appear when a reader hovers or focuses a mark.

Scrollable containers

Pass the element that owns scrolling as container. This keeps activation and click navigation inside the article even when the surrounding page also scrolls.