Northlight · sleep coaching
Fall asleep in twelve minutes, not forty
Northlight learns your evenings and dims everything that keeps you up: screens, lights, and the thoughts you have not written down yet.
Aurora mesh
Slow bands of coloured light drifting behind the headline; the cursor bends them gently. The quiet one.
Use when: A calm, premium first screen: wellbeing, finance, anything where motion should soothe, not excite.
Engine: WebGPU, with a CSS fallback
Render: …
npx shadcn@latest add @sharingan/aurora-meshFirst 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–4) | ["var(--brand, oklch(0.66 0.2 262))","oklch(0.78 0.14 175)","oklch(0.62 0.2 305)"] | One colour per band of light, from top to bottom. |
| background | string | "var(--background, #0b0c10)" | The sky behind the light. |
| speed | number (0.1–3) | 1 | How fast the bands drift. |
| intensity | number (0.2–2) | 0.75 | How bright the bands are. |
| pointer | boolean | true | The cursor bends the light toward it. |
| calm | number (0–1) | 0.55 | How clear the area behind the headline stays. |
| poster | string | — | Image shown when WebGPU is unavailable. |
The same hero as a Web Component
Web Component · no framework
<sg-aurora-mesh>
The same engine, driven by attributes. Its text is the page’s own DOM, slotted over the GPU layer.