Lumen · invoicing on autopilot
Get paid before your morning coffee
Lumen drafts, sends and chases every invoice from your contracts and time logs, so finance teams stop writing reminders.
Ink flow
Brand-coloured ink that swirls behind the headline and follows the cursor: a fluid simulation in compute passes.
Use when: A bold first screen for a product with a strong brand colour; the ink carries the identity.
Engine: WebGPU, with a CSS fallback
Render: …
npx shadcn@latest add @sharingan/ink-flowFirst 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.72 0.19 330)","oklch(0.8 0.15 200)"] | Ink colours, cycled by the cursor and the ambient currents. |
| background | string | "var(--background, #0b0c10)" | The colour the ink is drawn on. |
| swirl | number (0–60) | 24 | How strongly eddies are kept alive. |
| inkFade | number (0.05–4) | 0.7 | How fast ink fades, per second. |
| flowFade | number (0–4) | 0.25 | How fast the flow calms down, per second. |
| ambient | boolean | true | Slow currents that keep the ink moving when nobody touches it. |
| pointer | boolean | true | The cursor stirs the ink. |
| calm | number (0–1) | 0.7 | How clear the area behind the headline stays. |
| detail | "low" | "medium" | "high" | "medium" | Simulation resolution: lower is lighter on the GPU. |
| poster | string | — | Image shown when WebGPU is unavailable. |
The same hero as a Web Component
Web Component · no framework
<sg-ink-flow>
The same engine, driven by attributes. Its text is the page’s own DOM, slotted over the GPU layer.