Meshline · private networks
Every service, connected in minutes
Meshline links your clouds, offices and laptops into one private network. No VPN client to babysit, no ports to open.
Beam grid
A fine grid behind the headline, with beams of light running along its lines; it brightens around the pointer and a click sends beams from the nearest crossing.
Use when: Infrastructure, networks, developer and data products: anything about connections, speed or structure.
Engine: DOM (HTML, SVG, CSS 3D), every browser
Render: …
npx shadcn@latest add @sharingan/beam-gridFirst 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.62 0.2 262))","oklch(0.78 0.14 200)"] | The beams' colours; each beam takes one. |
| cell | number (24–160) | 64 | The grid's cell size, in pixels. |
| beams | integer (0–16) | 6 | How many beams run at once. |
| speed | number (0.3–3) | 1 | How fast the beams run. |
| length | number (40–480) | 160 | A beam's length, in pixels. |
| pointer | boolean | true | The grid brightens around the pointer; a click sends four beams from the nearest crossing. |
| calm | number (0–1) | 0.6 | How clear the grid stays behind the headline. |
The same hero as a Web Component
Web Component · no framework
<sg-beam-grid>
The same engine, driven by attributes: a finer grid, warmer and faster beams. Click anywhere on the grid.