Duck Scroll Rail
How far down the page you are, as one lime hairline.
NavigationClient componentmotion
Preview
Scroll this page. The lime hairline along the top of this box is the rail, reading window progress.
In your app: drop it once in the layout, no props.
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/duck-scroll-railPulls in @duck/theme. Already installed items are skipped.
Usage
import { DuckScrollRail } from "@/components/ui/duck-scroll-rail"The file lands in components/ui/duck-scroll-rail.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "right" | "top" | Along the top of the viewport, or up its trailing edge. |
| thickness | number | 2 | Rail thickness in px. |
Rules
What keeps this component from turning into noise.
- It is aria-hidden. Scroll position is not information a screen reader is missing.
- It does not hide under reduced motion: it is a readout, not an animation. It moves because the page moved.
- Transform-only, so it costs nothing per frame even though it updates on every scroll event.