opinionnew

ScrollRail

A horizontal strip of cards that scrolls instead of wrapping.

ProjectsScroll, or use the buttons to move one card

Harbour rebrandBrand, due 24 Oct

On track

Tideline mobileProduct, due 7 Nov

Review

Crew interviewsResearch, due 17 Oct

Late

Rota exportOperations, due 10 Oct

Done

Depot signageBrand, due 21 Nov

Review

No buttons

Harbour rebrandBrand, due 24 Oct

On track

Tideline mobileProduct, due 7 Nov

Review

Crew interviewsResearch, due 17 Oct

Late

Rota exportOperations, due 10 Oct

Done

Depot signageBrand, due 21 Nov

Review

Auto-scroll

Harbour rebrandBrand, due 24 Oct

On track

Tideline mobileProduct, due 7 Nov

Review

Crew interviewsResearch, due 17 Oct

Late

Rota exportOperations, due 10 Oct

Done

Depot signageBrand, due 21 Nov

Review

Few items

Harbour rebrandBrand, due 24 Oct

On track

Tideline mobileProduct, due 7 Nov

Review

itemWidth, header and equal-height cards

Perspectives railitemWidth sets every card's width; titles of one, two and three lines stay level, footers on one baseline

Perspectives

Reflections worth sitting with.

See all

Ethics

To Be Sorted At The Harvest

What the parable of the wheat and the weeds asks of us now.

6 min read12 Oct

Dialogues

Motherhood

A conversation about a mother, a doubt and a lighted window.

4 min read9 Oct

Grace

The Fire That Cleanses

Why the purifying fire is mercy before it is judgment.

8 min read2 Oct

Ethics

Illusive Fruit

Fruit that looks ripe and is not: a short reflection.

3 min read25 Sep

Letters

On the Perils of Conscience

A letter on examining conscience without scrupulosity.

7 min read18 Sep

Grace

What the Rosary Teaches the Hurried

Ten decades, slowly. A practice for the hurried.

5 min read11 Sep

In context

HomeRecent files under the greeting

Good morning, Maya

Harbour launch is on 24 Oct. Pick up where you left off.

depot-fascia-final.pdf1.4 MB, Depot signage

van-livery-photos.zip48 MB, Harbour rebrand

interview-03-walkthrough.mp4212 MB, Crew interviews

rota-export-march.csv90 KB, Rota export

mark-stacked.svg8 KB, Harbour rebrand

Props

Prop	Type	Required	Default
`children`	`ReactNode`	Yes	—
`aria-label`	`string`	Yes	—
`controls`	`boolean \| undefined`	No	true
`snap`	`boolean \| undefined`	No	—
`autoScroll`	`number \| boolean \| undefined`	No	—
`loop`	`boolean \| undefined`	No	false
`gap`	`"sm" \| "md" \| "lg" \| (string & {}) \| undefined`	No	md
`itemWidth`	`string \| number \| { base: string \| number; md?: string \| number \| undefined; } \| undefined`	No	—
`header`	`ReactNode`	No	—

Accessibility

Root is role="region" named by the required aria-label (deliberately not aria-roledescription="carousel"); the track is a role="list" and each item a role="listitem". The viewport is focusable so the arrow keys scroll it from the keyboard. Prev/next buttons disable at either end.

Auto-scroll pauses while the pointer is over or pressing the viewport, while focus is inside it, and while the tab is hidden; it never runs under prefers-reduced-motion (the rail becomes a normal manual rail with prev/next). Whenever auto-scroll is active a visible Pause/Play button is rendered (WCAG 2.2.2), and the prev/next buttons are hidden. With loop, the duplicated items are aria-hidden and inert, so assistive tech and Tab never see them.

data-rebar-* attributes

data-rebar-component="scroll-rail" on the root, with data-rebar-state (static, scrolling or paused), data-rebar-gap (custom for a CSS-length gap), data-rebar-item-width (set with itemWidth), data-rebar-snap, data-rebar-can-scroll-start and data-rebar-can-scroll-end. data-rebar-part values header, header-controls, viewport, track, item, control (prev/next, with data-rebar-direction) and toggle (Pause/Play).

Migrating to Ant Design

Not codemod-covered. Ant Design has no direct equivalent; the nearest idiom is a Flex with overflow-x: auto or a Carousel with slidesToShow, so this is a structural rewrite at migration time.