Duotone Team
Portraits in a two-tone wash of the brand's spectrum that bloom into full colour on hover or focus.
Controls
<TeamDuotoneReveal />About
The Pro counterpart of team-grid for studios and agencies.
Use it when
- Portraits are consistent (same light, same crop).
Skip it when
- Photos vary a lot: the duotone exaggerates it; use
team-grid.
Install
The demo above is live today. Installing Pro items opens with VibeBox Motion Pro; join the waitlist to hear first.
Code
The source is part of VibeBox Motion Pro.
Licensed per seat; it installs with the same shadcn command once Pro opens.
See Pro and join the waitlistContent
Typed slots from schema.ts. Facts (hours, prices, quotes, names) come only from the business; until then they render as fill-ins.
| Slot | Label | Type | Limit | Fact |
|---|---|---|---|---|
| eyebrow | Kicker | text | 32 chars | — |
| heading | Heading | text | 60 chars | — |
| lead | Intro | text | 160 chars | — |
| members | People | list | up to 12 | — |
| members[].name | Name | fact | 48 chars | Yes, a fill-in until given |
| members[].role | Role | fact | 48 chars | Yes, a fill-in until given |
| members[].photo | Photo | image | — | — |
Variants
Griddefault
grid
Two across on phones, four on desktop.
Row
row
A swipeable, snapping row.
Accessibility and motion
- Keyboard
- The row variant's scroller is focusable for arrow keys.
- Screen readers
- A heading and a list of people; portraits are images with alt text.
- Touch
- The duotone is the design on touch; names are always visible.
- Reduced motion
- Colour changes without a transition.
Edge cases and limits
- A name still a fill-in shows a neutral mark.
Related
Team Grid
FreeReal people with their photos or monograms, names and roles, as portraits or a compact list.
Team block · Server
About Story
FreeThe business in its own words: a tall photo with a caption beside the story and a few honest details.
About block · Server
Bento Hero
FreeThe promise beside a three-tile mosaic: a tall photo, a second image and a card of what the business offers.
Heroes block · Server