Orbit · product analytics
See where your users actually go
Orbit traces every session into one live map, so you notice the path nobody designed before it costs you a quarter.
Gravity field
A cloud of particles, coloured by speed, that falls toward the cursor and drifts along noise currents.
Use when: Data, analytics, infrastructure or AI products: many small things moving with intent.
Engine: WebGPU, with a CSS fallback
Render: …
npx shadcn@latest add @sharingan/gravity-fieldFirst time? Add the @sharingan registry to your project: getting started.
Add ?motion=final to the address for the repeatable still frame, or ?motion=off for the reduced-motion version.
Props
content what the hero says, real text in the DOM
| Name | Type | Default | Description |
|---|---|---|---|
| eyebrow | string (≤ 48 chars) | — | A short kicker above the headline. |
| headline * | string (8–70 chars) | — | The promise in one line, 4–9 words. |
| subheadline | string (≤ 180 chars) | — | One or two sentences under the headline. |
| primaryCta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — | |
| secondaryCta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — |
config how it looks and moves; attributes on the Web Component
| Name | Type | Default | Description |
|---|---|---|---|
| colors | string[] (1–3) | ["var(--brand, oklch(0.66 0.2 262))","oklch(0.75 0.16 220)","oklch(0.85 0.12 95)"] | Slow, medium and fast particles, in that order. |
| background | string | "var(--background, #0b0c10)" | The colour the particles float on. |
| gravity | number (0–3) | 1 | How strongly particles fall toward the pointer. |
| flow | number (0–3) | 1 | How much they drift along the noise currents. |
| size | number (0.5–4) | 1.4 | Particle size, in CSS pixels. |
| pointer | boolean | true | Particles fall toward the cursor; otherwise toward a slow orbit. |
| calm | number (0–1) | 0.6 | How clear the area behind the headline stays. |
| detail | "low" | "medium" | "high" | "medium" | Particle count: 40k, 120k or 240k. |
| poster | string | — | Image shown when WebGPU is unavailable. |
The same hero as a Web Component
Web Component · no framework
<sg-gravity-field>
The same engine, driven by attributes. Its text is the page’s own DOM, slotted over the GPU layer.