A light values section with six numbered cards, a softly bobbing row of team avatars with a head count, and a strip of open roles as pill links.
How we work
These are the principles we hire for, review against and argue about. They have not changed since the first ten of us wrote them down.
42 people across 11 countries, working async from Lisbon, Toronto and their kitchen tables.
Every engineer spends two hours a month on support calls. What we hear there decides what we build next quarter.
Decisions live in short public docs, not in meetings. Anyone can see why we chose something and challenge it later.
Teams of four ship, measure and maintain what they build. Nobody throws work over a wall to someone else.
No late-night pings, no fake urgency. We plan for sustainable weeks so the work stays good for years, not sprints.
We name the people behind every launch, in the changelog and in public. Good work deserves to be seen.
Each pull request makes the codebase a little easier for the next person. Each process gets simpler, not heavier.
npx shadcn@latest add https://hyperblur.dev/r/about-values.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/about-values.tsx.
import { AboutValues } from "@/components/hyperblur/about-values"
<AboutValues teamSize={28} values={[{ title: "Write it down", text: "Decisions live in short public docs." }]} roles={[{ title: "Product Designer", location: "Remote", href: "/careers" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "How we work" | Accent label above the heading. |
| title | string | "Six things we will not compromise on" | Section heading. |
| subtitle | string | sample text | Supporting text under the heading. |
| values | { title: string; text: string }[] | 6 sample values | Value cards, numbered in order. |
| team | string[] | 8 sample names | Names for the avatar row. The first seven are shown as initials. |
| teamSize | number | 42 | Total head count. People beyond the shown avatars appear as +N. |
| teamCaption | string | sample caption | Text after the head count in the team card. |
| roles | { title: string; team?: string; location?: string; href: string }[] | 4 sample roles | Open roles as pill links. Hidden when empty. |
| rolesLink | { label: string; href: string } | null | { label: "See all open roles", href: "#careers" } | Link at the end of the roles strip. |
| accent | string | "#0f8a5f" | Accent for markers, the role count and links. |