Scroll

Scroll progress rail

A hairline bar pinned to the top of a scrollable panel that fills left to right in exact sync with how far the content is scrolled, and drains back when you scroll up.

Release notes

Version 2.6: the registry rebuild

This cycle was about the pipeline more than the pixels. The catalog is now derived from the component folders at build time, so a meta fix and the site copy can never drift apart again. Every entry carries its own plate number, and the ports are compiled and smoke rendered before anything ships to the public index.

Highlights

The build got a lenient mode. A folder with findings is now skipped and reported instead of taking the whole catalog down with it, which turned a bad Tuesday into a one line fix. Pages resolve by plate number everywhere, including the agent surface, so old links keep working after a rename.

Entries in the catalog

302

Frameworks per entry

Changelog

Sep 4Registry build skips lenient folders instead of aborting the whole catalog.
Sep 3Component pages resolve by plate number in the index and on the agent surface.
Sep 2Button and media pages regenerated on the cloud pool and verified by hand.
Sep 1Port reports only count an entry as written once its closing tag lands.
Aug 30Thumbnail pass adds a webp render for every new component in the batch.
Aug 29Wave 5 components checked in, one hundred and sixty of them.

Known quirks

The thumbnail renderer still races the catalog write on very large waves, so a handful of cards can ship with a stale frame for a few minutes. A fix is queued for the next batch. Port tests on the server rendered frameworks are slower than they need to be; the plan is to share one headless browser across the whole run.

End of the notes. Scroll back up and watch the rail drain.

Scroll or drag inside the panel. The rail fills as you read and drains when you go back.

Using Scroll progress rail

A hairline bar pinned to the top of a scrollable panel that fills left to right in exact sync with how far the content is scrolled, and drains back when you scroll up.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: color, thickness, showTrack

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

1873Parallax plate galleryScrollA snapping vertical gallery where each plate's oversized index number drifts at a different rate to the plate itself, with a scroll progress rail along the bottom.

1874Pinned lateral galleryScrollA section that sticks in place while your vertical scroll is spent dragging a row of panels sideways, then releases and lets the page continue.

1881Scroll expand stageScrollA small rounded frame grows to fill the whole viewport as you scroll, its title lifting away while the article underneath fades up.

1882Scroll focus columnScrollA scrolling column where each row fades and shrinks as it leaves the reading band and comes back to full presence as it enters, so only the middle is ever fully solid.

1843Blur fade revealScrollContent that arrives out of focus and transparent, then sharpens into place the first time it scrolls into view without shifting a single pixel.

1855Enter view revealScrollBlocks that slide and fade in the moment they cross into view and reset themselves once they leave, so the reveal plays again on every pass.