Halcyon · evening sound baths
Ten quiet minutes, then the night is yours
Guided sound baths recorded in Accra and Kyoto, timed to the end of your shift. Put your phone face down and let the room go dim.
Conic rays
Soft rays of coloured light turn slowly from above the headline and lean toward the pointer: the calm one, for every browser.
Use when: Calm, premium first screens (wellbeing, finance, launches) where `aurora-mesh` would fit but every browser must get the light.
Engine: DOM (HTML, SVG, CSS 3D), every browser
Render: …
npx shadcn@latest add @sharingan/conic-raysFirst 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.66 0.2 262))","oklch(0.78 0.14 175)","oklch(0.7 0.18 305)"] | One colour per layer of rays. |
| rays | integer (4–24) | 10 | How many rays go round the circle, per layer. |
| spread | number (0.15–0.85) | 0.42 | How wide a ray is, from a thin beam to a broad fan. |
| speed | number (0.1–3) | 1 | How fast the rays turn. |
| origin | "top" | "center" | "bottom" | "top" | Where the light comes from. |
| intensity | number (0.2–1.5) | 0.8 | How strong the light is. |
| pointer | boolean | true | The rays lean toward the pointer. |
| calm | number (0–1) | 0.45 | How clear the area behind the headline stays. |
The same hero as a Web Component
Web Component · no framework
<sg-conic-rays>
The same engine, driven by attributes: warmer light from below, thinner rays, turning faster.