A central product mark with feature chips circling it on two counter-rotating rings. Hovering a chip pauses the orbit and slides out its label, and a row of captions sits beneath.
The Nimbus core
Nimbus sits in the middle of your stack and keeps records, permissions and events consistent everywhere they show up.
Changes flow both ways in under 300 ms, with conflict rules you can read and audit.
One schema for every connected tool, versioned like code and checked on every write.
Scope tokens to a table, a field or a single record, and rotate them without downtime.
Every event is kept for 90 days, so a broken sync is a replay away from fixed.
npx shadcn@latest add https://hyperblur.dev/r/features-orbit.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/features-orbit.tsx.
import { FeaturesOrbit } from "@/components/hyperblur/features-orbit"
<FeaturesOrbit title="Connects to everything" items={[{ label: "Webhooks", ring: "inner" }, { label: "SSO" }]} onItemSelect={(item) => console.log(item.label)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "The Nimbus core" | Accent label above the heading. Hidden when empty. |
| title | string | "One source of truth. Every tool your team already uses." | Section heading. |
| subtitle | string | sample text | Supporting paragraph under the heading. |
| items | { label: string; icon?: ReactNode; ring?: "inner" | "outer" }[] | 10 sample items | Orbiting chips. Items are spread evenly around their ring; `ring` defaults to outer. |
| captions | { title: string; description: string }[] | 4 sample captions | Feature captions in a row under the orbit. Empty array hides the row. |
| primaryCta | { label: string; href: string } | null | { label: "Browse integrations", href: "#" } | Solid pill button. Pass null to hide it. |
| secondaryCta | { label: string; href: string } | null | { label: "Read the docs", href: "#" } | Outline pill button. Pass null to hide it. |
| mark | ReactNode | built-in glyph | Content of the central tile, such as your logo SVG. |
| speed | number | 60 | Seconds for one turn of the outer ring. The inner ring turns a little faster. |
| onItemSelect | (item: OrbitItem, index: number) => void | Called when a chip is clicked. | |
| accent | string | "#22d3ee" | Color of the core tile, ring comet and hover states. |