A light values grid where each tile has an outlined number and a small drawn motif that plays its own animation on hover or focus, from a door swinging open to a sprout growing. A pointer spotlight follows inside the tile.
Values only matter when they change a decision. These are the ones that show up in our pull requests, our hiring loops and our calendars.
Read the team handbookNothing waits for a big reveal. We release behind flags and learn from real use within days.
214 releases last yearRoadmap, salaries and incident notes are readable by everyone on the team from day one.
Every doc public insideWe write down what success looks like before building, then check it honestly afterwards.
Every launch has a reviewWhoever ships it follows it to the customer. No handoffs into a void, no shrugging at support.
Engineers on support rotaDecisions live in short written memos, so people in nine time zones can disagree well.
1,180 memos and countingEvery change cleans one small thing nearby. Over years, that compounding is the whole strategy.
Fridays for upkeep
npx shadcn@latest add https://hyperblur.dev/r/about-values-motifs.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/about-values-motifs.tsx.
import { AboutValuesMotifs } from "@/components/hyperblur/about-values-motifs"
<AboutValuesMotifs onValueFocus={(v) => console.log(v.title)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "How we work" | Small label above the title. |
| title | string | "Six habits we hire for, and keep each other to" | Section heading. |
| subtitle | string | Paragraph beside the heading. | |
| values | { title: string; text: string; proof: string; motif: "slices" | "door" | "ruler" | "target" | "lines" | "sprout" }[] | 6 values | Tiles. proof is a short fact under the text, motif picks the animation. |
| link | { label: string; href: string } | { label: "Read the team handbook", href: "#" } | Link beside the heading. |
| onValueFocus | (value) => void | Called when a tile is hovered or focused. | |
| accent | string | "#e5484d" | Number, motif and spotlight color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |