Color Archive Scroll
ProAn endless project list that repaints the whole stage in the active row's color, with a preview card you can drag.
scrollarchiveminimaplistgsapcolordraginfiniteportfolio
Props
| Prop | Type | Default | Description |
|---|---|---|---|
projects | ColorArchiveProject[] | Twelve Wensity art-direction projects | Rows in the archive. Each needs id, name, badge, bgColor, and image. |
showPreview | boolean | true | Render the floating, draggable preview card. |
previewSize | "sm" | "md" | "lg" | "lg" | Preview card edge length: 320, 440, or 560 pixels. These are ceilings — the card is sized as a share of the stage and only clamps on very wide displays. |
enableSound | boolean | false | Tick whenever the active row changes. The sound is a hosted 45ms file fetched once per tab, so there is nothing to install. Browsers keep audio silent until the reader's first click, tap or key press anywhere on the page — a wheel event does not count as one — so a scroll on a freshly loaded page stays quiet until any interaction arms it. |
tickSrc | string | Hosted Wensity tick | Sound played on a row change. Point it at your own file to replace the tick; it is fetched and decoded once per URL and shared by every instance on the page. |
infiniteScroll | boolean | true | Wrap the list end to end. Turn it off to clamp at the first and last row. |
scrollThreshold | number | 90 | Pixels of wheel or touch travel that advance one row. Lower is a faster list. |
showRuler | boolean | true | Show the anchored ruler down the left edge. One dash per project, stretching toward the cursor, click to jump. Hidden below the md breakpoint, where the row would have to give up too much width. |
activeAnchor | number | 0.68 | Where the active row sits, as a fraction of stage height. The preview card follows it. |
rowLeading | number | 1.9 | Row leading as a multiple of the type size — the one number that sets how much air the list has. Tightening it is what makes these lists feel cramped. |
activeIndex | number | - | Controlled active row. Pass it to drive the list yourself. |
defaultActiveIndex | number | 0 | Uncontrolled starting row. |
onActiveChange | (index: number, project: ColorArchiveProject) => void | - | Fires whenever the active row changes. |
className | string | - | Classes for the stage. Height belongs here: the stage fills its container and floors at 520px. |
label | string | "Project archive" | Accessible name for the stage. |