Overview

A quiet outline for long pages. It shows where you are and how far you have read.

A quiet outline for long pages. It shows where you are and how far you have read.

Installation

Pass the sections and point it at your scroller. Each id matches an element on the page.

Pass the sections and point it at your scroller. Each id matches an element on the page.

Requirements

Position is a single value, so every animation reads from the same place.

Position is a single value, so every animation reads from the same place.

Package manager

It uses neutral tones and follows light and dark mode on its own.

It uses neutral tones and follows light and dark mode on its own.

Manual setup

Short and to the point, so the page has something to scroll through.

Short and to the point, so the page has something to scroll through.

Usage

Position is a single value, so every animation reads from the same place.

Position is a single value, so every animation reads from the same place.

Basic

It uses neutral tones and follows light and dark mode on its own.

It uses neutral tones and follows light and dark mode on its own.

Scroll container

Short and to the point, so the page has something to scroll through.

Short and to the point, so the page has something to scroll through.

Nested sections

A quiet outline for long pages. It shows where you are and how far you have read.

A quiet outline for long pages. It shows where you are and how far you have read.

Custom heading

Pass the sections and point it at your scroller. Each id matches an element on the page.

Pass the sections and point it at your scroller. Each id matches an element on the page.

Server components

Position is a single value, so every animation reads from the same place.

Position is a single value, so every animation reads from the same place.

A subsection title long enough to truncate

It uses neutral tones and follows light and dark mode on its own.

It uses neutral tones and follows light and dark mode on its own.

Props

It uses neutral tones and follows light and dark mode on its own.

It uses neutral tones and follows light and dark mode on its own.

sections

Short and to the point, so the page has something to scroll through.

Short and to the point, so the page has something to scroll through.

container

A quiet outline for long pages. It shows where you are and how far you have read.

A quiet outline for long pages. It shows where you are and how far you have read.

label

Pass the sections and point it at your scroller. Each id matches an element on the page.

Pass the sections and point it at your scroller. Each id matches an element on the page.

offset

Position is a single value, so every animation reads from the same place.

Position is a single value, so every animation reads from the same place.

inset

It uses neutral tones and follows light and dark mode on its own.

It uses neutral tones and follows light and dark mode on its own.

curve

Short and to the point, so the page has something to scroll through.

Short and to the point, so the page has something to scroll through.

bendRoom

A quiet outline for long pages. It shows where you are and how far you have read.

A quiet outline for long pages. It shows where you are and how far you have read.

sectionGap

Pass the sections and point it at your scroller. Each id matches an element on the page.

Pass the sections and point it at your scroller. Each id matches an element on the page.

subsectionGap

Position is a single value, so every animation reads from the same place.

Position is a single value, so every animation reads from the same place.

rowHeight

It uses neutral tones and follows light and dark mode on its own.

It uses neutral tones and follows light and dark mode on its own.

lineWidth

Short and to the point, so the page has something to scroll through.

Short and to the point, so the page has something to scroll through.

dotSize

A quiet outline for long pages. It shows where you are and how far you have read.

A quiet outline for long pages. It shows where you are and how far you have read.

Theming

Short and to the point, so the page has something to scroll through.

Short and to the point, so the page has something to scroll through.

Short and to the point, so the page has something to scroll through.

Motion

A quiet outline for long pages. It shows where you are and how far you have read.

A quiet outline for long pages. It shows where you are and how far you have read.

Reduced motion

Pass the sections and point it at your scroller. Each id matches an element on the page.

Pass the sections and point it at your scroller. Each id matches an element on the page.

Accessibility

Pass the sections and point it at your scroller. Each id matches an element on the page.

Pass the sections and point it at your scroller. Each id matches an element on the page.

Keyboard

Position is a single value, so every animation reads from the same place.

Position is a single value, so every animation reads from the same place.

Screen readers

It uses neutral tones and follows light and dark mode on its own.

It uses neutral tones and follows light and dark mode on its own.

Focus

Short and to the point, so the page has something to scroll through.

Short and to the point, so the page has something to scroll through.

Recipes

Position is a single value, so every animation reads from the same place.

Position is a single value, so every animation reads from the same place.

Docs sidebar

It uses neutral tones and follows light and dark mode on its own.

It uses neutral tones and follows light and dark mode on its own.

Blog post

Short and to the point, so the page has something to scroll through.

Short and to the point, so the page has something to scroll through.

Changelog

A quiet outline for long pages. It shows where you are and how far you have read.

A quiet outline for long pages. It shows where you are and how far you have read.

API reference

Pass the sections and point it at your scroller. Each id matches an element on the page.

Pass the sections and point it at your scroller. Each id matches an element on the page.

Settings page

Position is a single value, so every animation reads from the same place.

Position is a single value, so every animation reads from the same place.

Pricing FAQ

It uses neutral tones and follows light and dark mode on its own.

It uses neutral tones and follows light and dark mode on its own.

Onboarding

Short and to the point, so the page has something to scroll through.

Short and to the point, so the page has something to scroll through.

Legal terms

A quiet outline for long pages. It shows where you are and how far you have read.

A quiet outline for long pages. It shows where you are and how far you have read.

Release notes

Pass the sections and point it at your scroller. Each id matches an element on the page.

Pass the sections and point it at your scroller. Each id matches an element on the page.

FAQ

It uses neutral tones and follows light and dark mode on its own.

It uses neutral tones and follows light and dark mode on its own.

It uses neutral tones and follows light and dark mode on its own.

Changelog

Short and to the point, so the page has something to scroll through.

Short and to the point, so the page has something to scroll through.

1.0

A quiet outline for long pages. It shows where you are and how far you have read.

A quiet outline for long pages. It shows where you are and how far you have read.

1.1

Pass the sections and point it at your scroller. Each id matches an element on the page.

Pass the sections and point it at your scroller. Each id matches an element on the page.