Catalog
Beacon
Status in place: a ping, connection quality, location accuracy, a radar scan or a broadcast.
The beacon shows status in place: a notification ping, connection quality, location accuracy, a radar scan or a broadcast.
See every beacon pattern live
| Pattern | pattern | When to use it |
|---|
| Notifying | notifying | Something happened: a ping ripple (can play once). |
| Reconnecting | reconnecting | Connection quality: a pulse with lit segments. |
| Locating | locating | Position with uncertainty: a halo that shrinks as accuracy rises. |
| Scanning | scanning | Scanning an area: a radar sweep with blips. |
| Broadcasting | broadcasting | Sending out: waves from a centre, driven by level. |
Every prop, per pattern. Values are your app's data; everything else is style. Defaults can differ per size (20 · 32 · 64).
The beacon component is SinuaBeacon. Pick a look with pattern; each pattern reads the props below. Sizes are engine sizes (20, 32, 64): defaults can differ per size.
| Pattern | Mode | Speed | Values (app data) |
|---|
Notifying (notifying) | ping | 1× | once |
Reconnecting (reconnecting) | pulse | 1× | quality |
Locating (locating) | halo | 1× | accuracy |
Scanning (scanning) | radar | 1× | — |
Broadcasting (broadcasting) | broadcast | 1× | level |
pattern: "notifying" · mode ping · speed 1× · sizes 20, 32, 64
| Prop | Category | Type | Range | Default | Description |
|---|
dotSize | Appearance | number | 0.01–0.4 (UI 0.04–0.25) fraction | 0.12 | Centre dot radius as a fraction of the frame. |
hue | Appearance | number | 0–360 deg | 200 | Ink hue in degrees; applies once saturation is above 0. |
ink | Appearance | number | 0–1 fraction | 1 | How present the whole visual is: 1 draws it as the pattern defines it, lower fades everything including its halos. A voice assistant rests below 1 when idle and comes to full ink when it listens. |
ringCount | Appearance | integer | 1–4 | 2 | Ripples per ping. |
saturation | Appearance | number | 0–1 fraction | 0 | How far the ink moves from grey toward the hue (0 = the grey ink). |
period | Motion | number | 0.05–30 (UI 0.4–3) s | 1 | Seconds between pings. |
once | Inputs | boolean | | 0 | Play one ripple and stop (restart the clock to replay). |
Advanced props (2)
| Prop | Category | Type | Range | Default | Description |
|---|
ringReach | Appearance | number | 0.05–0.5 fraction | 0.41 | How far the ripples travel, as a fraction of the frame. |
ringWidth | Appearance | number | 0.005–0.2 fraction | 0.03 | Ripple stroke width as a fraction of the frame. |
pattern: "reconnecting" · mode pulse · speed 1× · sizes 20, 32, 64
| Prop | Category | Type | Range | Default | Description |
|---|
dotSize | Appearance | number | 0.01–0.4 (UI 0.04–0.25) fraction | 0.12 | Centre dot radius as a fraction of the frame. |
hue | Appearance | number | 0–360 deg | 200 | Ink hue in degrees; applies once saturation is above 0. |
ink | Appearance | number | 0–1 fraction | 1 | How present the whole visual is: 1 draws it as the pattern defines it, lower fades everything including its halos. A voice assistant rests below 1 when idle and comes to full ink when it listens. |
saturation | Appearance | number | 0–1 fraction | 0 | How far the ink moves from grey toward the hue (0 = the grey ink). |
quality | Inputs | number | 0–1 fraction | 0 | Connection quality 0 to 1: lit segments and a calmer pulse as it rises. |
Advanced props (4)
| Prop | Category | Type | Range | Default | Description |
|---|
segmentGap | Appearance | number | 0–60 deg | 14 | Gap between quality segments, in degrees. |
segmentRadius | Appearance | number | 0.05–0.5 fraction | 0.3 | Radius of the quality arc as a fraction of the frame. |
segmentWidth | Appearance | number | 0.005–0.2 fraction | 0.04 | Stroke width of the quality segments. |
period | Motion | number | 0.05–30 s | 2 | Seconds per pulse. |
pattern: "locating" · mode halo · speed 1× · sizes 20, 32, 64
| Prop | Category | Type | Range | Default | Description |
|---|
dotSize | Appearance | number | 0.01–0.4 (UI 0.04–0.25) fraction | 0.1 | Centre dot radius as a fraction of the frame. |
hue | Appearance | number | 0–360 deg | 200 | Ink hue in degrees; applies once saturation is above 0. |
ink | Appearance | number | 0–1 fraction | 1 | How present the whole visual is: 1 draws it as the pattern defines it, lower fades everything including its halos. A voice assistant rests below 1 when idle and comes to full ink when it listens. |
saturation | Appearance | number | 0–1 fraction | 0 | How far the ink moves from grey toward the hue (0 = the grey ink). |
accuracy | Inputs | number | 0–1 fraction | 0.5 | Location accuracy 0 to 1: the halo shrinks as it rises. |
Advanced props (3)
| Prop | Category | Type | Range | Default | Description |
|---|
haloOpacity | Appearance | number | 0–1 fraction | 0.14 | Opacity of the accuracy halo. |
ringWidth | Appearance | number | 0.005–0.2 fraction | 0.025 | Halo edge stroke width as a fraction of the frame. |
period | Motion | number | 0.05–30 s | 2 | Seconds per halo breath. |
pattern: "scanning" · mode radar · speed 1× · sizes 20, 32, 64
| Prop | Category | Type | Range | Default | Description |
|---|
blipCount | Appearance | integer | 0–12 | 3 | Contacts that light up as the sweep passes. |
dotSize | Appearance | number | 0.004–0.08 (UI 0.008–0.05) fraction | 0.018 | Scope dot radius as a fraction of the frame. |
hue | Appearance | number | 0–360 deg | 200 | Ink hue in degrees; applies once saturation is above 0. |
ink | Appearance | number | 0–1 fraction | 1 | How present the whole visual is: 1 draws it as the pattern defines it, lower fades everything including its halos. A voice assistant rests below 1 when idle and comes to full ink when it listens. |
ringCount | Appearance | integer | 1–8 | 4 | Concentric range rings on the scope. |
saturation | Appearance | number | 0–1 fraction | 0 | How far the ink moves from grey toward the hue (0 = the grey ink). |
seed | Appearance | integer | 0–∞ (UI 0–20) | 0 | Seed for where the blips sit. |
trailFill | Appearance | boolean | | 0 | Draw the trail as one filled gradient wedge. |
trailLength | Appearance | number | 0–360 (UI 10–180) deg | 90 | Length of the sweep's fading trail, in degrees. |
period | Motion | number | 0.05–30 (UI 0.8–8) s | 3.2 | Seconds per radar sweep. |
pattern: "broadcasting" · mode broadcast · speed 1× · sizes 20, 32, 64
| Prop | Category | Type | Range | Default | Description |
|---|
cumulative | Appearance | boolean | | 0 | Waves stay lit as they build up instead of travelling. |
dotSize | Appearance | number | 0.01–0.3 (UI 0.02–0.2) fraction | 0.07 | Centre dot radius as a fraction of the frame. |
hue | Appearance | number | 0–360 deg | 200 | Ink hue in degrees; applies once saturation is above 0. |
inactiveOpacity | Appearance | number | 0–1 (UI 0–0.5) fraction | 0.18 | Opacity of the waves that aren't lit. |
ink | Appearance | number | 0–1 fraction | 1 | How present the whole visual is: 1 draws it as the pattern defines it, lower fades everything including its halos. A voice assistant rests below 1 when idle and comes to full ink when it listens. |
saturation | Appearance | number | 0–1 fraction | 0 | How far the ink moves from grey toward the hue (0 = the grey ink). |
sides | Appearance | integer | 1–2 | 2 | Broadcast to one side or both. |
waveCount | Appearance | integer | 1–8 (UI 1–4) | 2 | Waves per side. |
period | Motion | number | 0.05–30 (UI 0.4–4) s | 1.2 | Seconds per broadcast cycle. |
reversing | Motion | boolean | | 0 | Waves travel inward. |
level | Inputs | number | -1–1 (UI -0.05–1) fraction | -1 | Signal level 0 to 1 (how many waves are lit); below 0 = animate on its own. |
Advanced props (2)
| Prop | Category | Type | Range | Default | Description |
|---|
strokeWidth | Appearance | number | 0.01–0.4 fraction | 0.07 | Wave stroke width as a fraction of the frame. |
waveSweep | Appearance | number | 10–180 deg | 90 | Arc of each wave in degrees. |