shadcn.io is not affiliated with official shadcn/ui
Marquee Team Block for Solid
Fourteen people of a coffee roaster's wholesale portal as person pills in two rows that scroll in opposite directions, faded at both ends, with a visible pause button that hides under reduced motion.
Installation
Overview
A team section for Solid with Ark UI, for Fellgate, a coffee roaster's wholesale portal. A centred header says how many people work there, and a band under it holds two rows of person pills (an initials avatar, a name and a specific role) that scroll in opposite directions and fade out at both ends: the roastery team on the first row, the portal team on the second. A button at the end of the first row pauses both. The band runs from rail to rail on a solid rule with + marks and ends the block. Under reduced motion nothing moves, the button is hidden and each row scrolls by hand. On a phone it is the same two rows with smaller pills. It's built from Marquee, Avatar, Button and Guides, with your theme's tokens for every colour. For about pages, careers pages and any small team that wants to feel busy.
FAQ
How do I change the people and the rows?
Edit ROASTERY and PORTAL at the top of the file: a person is a name and a role. Each row is a Marquee that fills the width by repeating its people, so seven people per row loop without a gap; with only two or three, the same faces repeat more often. The heading's count comes from the two arrays' lengths.
Can people stop the movement?
Yes. The pause button at the end of the first row stops both rows and is a toggle that reports whether it is pressed. The rows also stop while a pointer is over them or a keyboard focus is inside them. Under reduced motion the rows never start and the button is hidden, because there is nothing left to pause.
Are the people read twice, or not at all?
Once. The moving rows are decoration, so they are hidden from assistive technology (and their looping copies are taken out of the tab order); a visually hidden list right before them names each person and role, with the name as a heading. Nothing in the band can take focus except the pause button.
What happens under reduced motion?
The rows stay still and become ordinary scrollable strips, the fade at the ends is removed so the first and last people aren't hidden, and the looping copies are removed so nobody appears twice. The pause button is hidden.