shadcn.io is not affiliated with official shadcn/ui
Dual Scroll Gallery Block for React Aria
A tall framed window beside the copy where two columns of drawn leather goods scroll in opposite directions, with faded ends, a visible Pause and three facts about the workshop at the foot of the copy.
Installation
Overview
A parallax-style gallery for React with React Aria, for Tanyard, a leather-goods label. At the end of a split divider, a tall window (+ marks on its corners) holds two columns of drawn leather goods (a tote, a wallet, a belt and a boot, at mixed heights) scrolling in opposite directions, one down and one up, their ends fading out. At the start of the divider: a compact header, a visible Pause button and, at the foot, three facts about the workshop (14 hours, 6 weeks, 10 years). On a phone the window sits under the header and the facts follow it. Each piece shows its name as a link and a note on its leather. Hovering a column, or focusing a name in it, holds that column; under reduced motion nothing moves, the Pause button goes away and each column scrolls by hand. The pictures are drawn, not photographed. It's built from Marquee (vertical), Button and Guides, with your theme's tokens for every colour. The label and its numbers are made up for the example.
FAQ
How does a visitor stop the columns?
The Pause scrolling button under the header stops both and keeps aria-pressed, with a play icon while paused. Hovering a column or focusing a name in it holds just that column. Under reduced motion the animation never starts and the button is hidden.
How does the vertical marquee keep whole rows?
Each column is a vertical Marquee that fills the window's height and repeats its pieces until it does, so the loop never shows a gap. The repeated copies are hidden from screen readers and inert, which keeps them out of the tab order.
Why do the pictures have different heights?
Each piece has its own ratio (four by five, square, five by four, three by four) so the two columns drift against each other and never line up. The drawing is scaled to the picture's shape; give your photograph the same ratio and it fits the same way.
What changes on a phone?
The window goes under the header and keeps its height, so the pictures start inside the first screen, and the three facts follow it, one per row. The divider only draws from the large breakpoint; below it a single rule with + marks separates the parts.