A constellation hero: drifting points linked by proximity lines that lean toward the pointer, behind a centered headline with a shimmering gradient phrase and a copyable install command.
Graph engine v4 is now generally available
Lattice maps services, queues and databases into one live dependency graph and flags what breaks before you deploy.
npm install @lattice/graphnpx shadcn@latest add https://hyperblur.dev/r/hero-particles.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-particles.tsx.
import { HeroParticles } from "@/components/hyperblur/hero-particles"
<HeroParticles title="Every service, one live map" highlight="one live map" command="npx lattice init" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Graph engine v4 is now generally available" | Text in the pill above the headline, with a pulsing dot. Empty hides it. |
| title | string | "Connect every signal in your stack" | Headline. |
| highlight | string | "every signal" | Part of the title rendered in the animated gradient. Ignored when it is not found in the title. |
| subtitle | string | "Lattice maps services, queues and databases into one live dependency graph and flags what breaks before you deploy." | Supporting paragraph under the headline. Empty hides it. |
| primaryCta | { label: string; href: string } | null | { label: "Get started", href: "#" } | Gradient primary button with an arrow. Pass null to hide it. |
| secondaryCta | { label: string; href: string } | null | { label: "Read the docs", href: "#" } | Outlined secondary button. Pass null to hide it. |
| command | string | "npm install @lattice/graph" | Shell command shown under the buttons with a copy button. Empty hides it. |
| accent | string | "#2f7bff" | Color of the links, the glow, the primary button and the gradient phrase. |
| density | number | 1.5 | Points per 10,000 square pixels. The count is kept between 16 and 260. |
| linkDistance | number | 120 | Largest distance in pixels at which two points are linked by a line. |
| seed | number | 7 | Seed for the point layout. The same seed always gives the same constellation. |