Lumen · invoicing on autopilot
Every invoice, clear as glass
Lumen shows what is paid, late and on its way in one view, and chases the late ones for you.
Lumen dashboard: revenue chart, invoices by status and a list of recent payments
Liquid glass
Drops of glass drift over your product screenshot, bending and splitting the light under them; one follows the cursor.
Use when: A product with a strong screenshot that deserves a showcase moment, on a page that can afford a heavier hero.
Engine: WebGPU, with a CSS fallback
Render: …
npx shadcn@latest add @sharingan/liquid-glassFirst 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) | — | |
| media * | object | — | |
| src * | string (≥ 1 chars) | — | Product screenshot, about 16:10, at least 1600 px wide. Same origin, or served with CORS. |
| alt * | string (≤ 140 chars) | — | What the screenshot shows. |
config how it looks and moves; attributes on the Web Component
| Name | Type | Default | Description |
|---|---|---|---|
| colors | string[] (1–2) | ["var(--brand, oklch(0.66 0.2 262))","oklch(0.97 0.02 250)"] | The glass tint, then the colour of its rim light. |
| background | string | "var(--background, #0b0c10)" | The colour around the screenshot. |
| image | string | "/sharingan/product.png" | The image under the glass; the hero component passes `content.media.src`. |
| refraction | number (0–2) | 1 | How strongly the glass bends what is under it. |
| drops | integer (0–5) | 4 | Drops of glass drifting on their own. |
| pointer | boolean | true | A drop follows the cursor. |
| poster | string | — | Image shown when WebGPU is unavailable. |
The same hero as a Web Component
Web Component · no framework
<sg-liquid-glass>
The same engine, driven by attributes. Its text is the page’s own DOM, slotted over the GPU layer.