PeopleRow

The studio's people as a row of tiles, stories-style but squircles, on top of the Team schedule: an Add tile first (captioned Member — the plus says it adds), then each person's initial on a quiet gray tile, the letter pushed back, with their name below. The chosen one is ringed in the studio's second colour, deep (studio-2-deep), with a white gap, letter and name in ink; tapping them again opens them. Too many to fit, and the row scrolls sideways, keeping the chosen one in view.

Playground

Tap someone, or the plus

<PeopleRow
  people={team}
  selected="0"
  onSelect={(id) => (id === selected ? openMember(id) : setSelected(id))}
  onAdd={() => openMember(null)}
/>

Team

People

Clips, faded, timed

The landing hero's crafts. A tile can carry a clip: the chosen one plays it, silent and looping over its photo, so one plays at a time. muted fades the rest to 65%, their colours kept. trace swaps the still ring and its white gap for one that traces once round the chosen tile in that many seconds — a timer (the hero's conversation), in ink over a faint track, following the tile's corners; tracing={false} holds it. Tap another to restart it.

<PeopleRow
  people={crafts.map((c) => ({ id: c.id, name: c.name, photo: c.poster, video: c.clip }))}
  selected={on}
  onSelect={show}
  muted
  trace={conversationSeconds}
  tracing={playing}
/>

API

Prop	Type	Default	Description
people	{ id: string; name: string; label?: string; photo?: string \| null; video?: string \| null }[]	—	A tile each, in order. label captions the tile instead of the name — "You" for the signed-in member — while the letter stays the name's.
selected	string	—	The chosen person's id: a deeper tile, pressed.
onSelect	(id: string) => void	—	A tap on a person — the chosen one again, to open them.
onAdd	() => void	—	The Add tile: someone new. Left out, there's no Add tile — for staff, who can't add members.
muted	boolean	false	The rest faded to 65%, their colours kept: the chosen one stands forward.
trace	number	—	Seconds the chosen one's ring takes to trace once round, in place of the still ring and its white gap: a timer.
tracing	boolean	true	The trace runs; false holds it where it is (off screen).
labels	Partial<PeopleRowLabels>	English	The row's name (Team), the Add tile's caption (Member) and full name (Add member), and “details”, said after the chosen person.

Guidelines

A tile is the person's photo, or their initial on quiet gray: the ring means one thing — chosen.
Names truncate under their tile rather than wrap; the full name is the button's.
The row scrolls only itself to keep the chosen tile in view — never the page.