A team grid with filter chips per team. Hovering or focusing a card lifts the avatar and slides up a bio panel with location, and cards stagger back in whenever the filter changes.
We are a small, remote-first team of engineers, designers and operators. Hover a card to meet the person behind it.
Maya Okafor
Ran payments infrastructure at Stripe for six years before starting Northwind in a Lagos co-working space.
LisbonJonas Lindqvist
Wrote the first query engine on a train between Malmo and Berlin. Still reviews every schema change.
BerlinPriya Raman
Owns the sync layer. Previously built offline-first tooling at Figma and loves a good flame graph.
TorontoDiego Alvarez
Sketches every flow on paper first. Formerly at Linear, now obsessed with keyboard-first interfaces.
Mexico CityHana Ito
Grew the platform team from three to fourteen people without a single all-hands that ran over time.
TokyoSamuel Mensah
Took a developer tool from zero to forty thousand weekly users with docs, not ads.
AccraElena Petrova
Drew the Northwind wordmark by hand. Collects Soviet-era type specimens and old transit maps.
AmsterdamNoah Fischer
Has migrated more than two hundred customers off spreadsheets and remembers every one of them.
Zurich
npx shadcn@latest add https://hyperblur.dev/r/about-team-filter.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/about-team-filter.tsx.
import { AboutTeamFilter } from "@/components/hyperblur/about-team-filter"
<AboutTeamFilter onTeamChange={(team) => console.log(team)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "The team" | Small label above the title. |
| title | string | "Twenty-three people, eleven time zones..." | Section heading. |
| subtitle | string | Paragraph beside the heading. | |
| members | { name: string; role: string; team: string; bio: string; location: string; hue: number }[] | 8 members | People in the grid. team drives the chips, hue tints the avatar. |
| allLabel | string | "Everyone" | Label of the chip that shows every member. |
| defaultTeam | string | Team selected on first render. Defaults to allLabel. | |
| onTeamChange | (team: string) => void | Called when a chip is chosen. | |
| accent | string | "#8b5cf6" | Chip, glow and focus color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |