Relay · hosting dashboard
Every deploy, every domain, on one screen
Builds stream live, rollbacks take one click, and your traffic sits next to the commit that changed it.
App window
Your product's screen, drawn in HTML, builds itself panel by panel (numbers count up, the chart draws), then leans toward the pointer in light 3D.
Use when: SaaS and dashboards: when the product screen is the promise and a static screenshot feels flat.
Engine: DOM (HTML, SVG, CSS 3D), every browser
Render: …
npx shadcn@latest add @sharingan/app-windowFirst 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) | — | |
| app * | object | — | |
| label * | string (8–200 chars) | — | What the screen shows, read by screen readers instead of its parts. |
| name * | string (2–20 chars) | — | The product's name, top of the sidebar. |
| nav * | string[] (2–6) | — | Sidebar items; the first is the current page. |
| title * | string (2–32 chars) | — | The page's title. |
| stats * | object[] (2–4) | — | Key numbers. Values starting with a number count up when the screen builds. |
| label * | string (2–20 chars) | — | |
| value * | string (1–10 chars) | — | |
| delta | string (≤ 8 chars) | — | |
| chart * | object | — | |
| label * | string (2–40 chars) | — | |
| points * | number[] (6–32) | — | The series, left to right; scaled to fit. |
| columns * | string[] (2–5) | — | |
| rows * | object[] (2–5) | — | Table rows; `status` colours the second cell as a badge. |
| cells * | string[] (2–5) | — | |
| status | "ok" | "warn" | "error" | "neutral" | "neutral" |
config how it looks and moves; attributes on the Web Component
| Name | Type | Default | Description |
|---|---|---|---|
| accent | string | "var(--brand, oklch(0.62 0.2 262))" | The chart, the current page and the highlights. |
| stagger | number (0–300) | 110 | Milliseconds between two panels as the screen builds. |
| tilt | boolean | true | The window leans toward the pointer and its panels shift at different depths. |
| countUp | boolean | true | Numbers count up from zero as their card appears. |
The same hero as a Web Component
Web Component · no framework
<sg-app-window>
The same engine, driven by attributes. This screen is plain HTML with a data-points chart the engine draws.