Line Sidebar

Static list navigation with a cursor-proximity effect that shifts and highlights nearby items.

Default

Move the pointer along the list and click an item to make it active. Every prop is wired to the controls underneath.

Accent

Text

Marker

Falloff

Proximity Radius100px

Max Shift30px

Marker Length60px

Marker Gap0px

Tick Scale0.5

Item Gap20px

Font Size1.1rem

Smoothing100ms

Show IndexShow MarkerScale Ticks

Prop	Type	Default	Description
`items`	`string[]`	`[...]`	Labels rendered as the list of sidebar entries.
`accentColor`	`string`	`"#A855F7"`	Color items and markers shift toward as the cursor gets close.
`textColor`	`string`	`"#c4c4c4"`	Resting color of the item labels.
`markerColor`	`string`	`"#6c6c6c"`	Resting color of the leading marker lines.
`showIndex`	`boolean`	`true`	Show the zero-padded index before each label.
`showMarker`	`boolean`	`true`	Show the marker lines (and short ticks) beside each item.
`proximityRadius`	`number`	`100`	Vertical distance in pixels within which the cursor influences an item.
`maxShift`	`number`	`30`	Maximum horizontal shift in pixels the label slides at full proximity.
`falloff`	`"linear" \| "smooth" \| "sharp"`	`"smooth"`	Curve mapping cursor distance to the proximity effect.
`markerLength`	`number`	`60`	Length in pixels of the marker line; the in-between ticks scale from this too.
`markerGap`	`number`	`0`	Gap in pixels between the labels and the markers.
`tickScale`	`number`	`0.5`	Length of the in-between ticks as a fraction of markerLength.
`scaleTick`	`boolean`	`true`	When true, the in-between ticks also grow with cursor proximity.
`itemGap`	`number`	`20`	Vertical gap between items in pixels.
`fontSize`	`number`	`1.1`	Font size of the labels in rem.
`smoothing`	`number`	`100`	Transition duration in milliseconds for the proximity response.
`defaultActive`	`number \| null`	`null`	Index of the item selected on mount.

Prop	Type	Default	Description
`item-click`	`(index: number, label: string) => void`	-	Emitted when an item is clicked; the clicked item also becomes active.

Keyboard shortcuts and ARIA behavior.

The active item carries aria-current. Items are list entries, so wrap them in links or buttons when they navigate.