A distributed team section with a daylight band across time zones where every person sits at their UTC offset, linked to a card grid with live local times. Team filters and search dim the people who do not match in both views.
We work async by default and overlap for two hours a day. Filter by team to see who is awake right now and where the handoffs happen.
14 of 14 people
npx shadcn@latest add https://hyperblur.dev/r/about-team-timezones.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/about-team-timezones.tsx.
import { AboutTeamTimezones } from "@/components/hyperblur/about-team-timezones"
<AboutTeamTimezones onTeamChange={(team) => console.log(team)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "The team" | Small label above the title. |
| title | string | "Fourteen people, spread across the clock" | Section heading. |
| subtitle | string | Paragraph under the heading. | |
| members | { name: string; role: string; team: string; city: string; offset: number; hue: number }[] | 14 members | People. offset is hours from UTC, team drives the filter. |
| allLabel | string | "Everyone" | Label of the filter that shows everyone. |
| referenceUtcHour | number | 14 | UTC hour used for the first render before the real clock takes over. |
| onTeamChange | (team: string) => void | Called when a team filter is chosen. | |
| accent | string | "#22d3ee" | Highlight and midday marker color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |