A thin gradient bar pinned to the top of the page or a container, with a percentage chip that rides its head.
Essay / 7 min read
Every product has a pace. Some feel like a conversation, others like a queue at the post office, and the difference is rarely about speed alone.
A good interface waits for you without making you wait. It keeps your place, answers before you finish the question and never asks you to start over.
That patience is designed, one small decision at a time: the empty state that tells you what comes next, the undo that is always one tap away.
Teams that build this way ship fewer features and more trust. They measure the seconds a person saves, not the minutes they spend.
So the next time something feels calm, look closer. Someone worked hard to make it look easy.
npx shadcn@latest add https://hyperblur.dev/r/scroll-progress-bar.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/scroll-progress-bar.tsx.
import { ScrollProgressBar } from "@/components/hyperblur/scroll-progress-bar"
<ScrollProgressBar />| Prop | Type | Default | Description |
|---|---|---|---|
| scroller | RefObject<HTMLElement | null> | HTMLElement | null | A nested scroll container to follow instead of the window. Ignored when `height` is set. | |
| height | number | string | Renders the component inside its own scroll viewport of this height, useful for cards and embeds. Leave unset to follow the window or `scroller`. | |
| autoplay | boolean | false | Only with `height`. Scrolls the viewport up and down on its own until the visitor scrolls it. Static under reduced motion. |
| accent | string | "#2f7bff" | Gradient start color and the glow around the head. |
| accentTo | string | "#7fb3ff" | Gradient end color at the head of the bar. |
| thickness | number | 3 | Bar height in pixels. |
| showChip | boolean | true | Show the percentage chip that follows the head. |
| children | ReactNode | Content to render after the bar. With `height` it becomes the scrolling content. |