Catalog
Core
The smallest loading states for text: a shimmer and typing dots.
The core is the smallest object: loading states for text, a shimmer while content generates and dots while someone types.
See every core pattern liveWhen to use which pattern
| Pattern | pattern | When to use it |
|---|---|---|
| Generating | generating | Content is being generated: a shimmering skeleton line. |
| Typing | typing | Someone is typing: three bouncing dots. |
Props
Every prop, per pattern. Values are your app's data; everything else is style. Defaults can differ per size (20 · 32 · 64).
The core component is SinuaCore. 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) |
|---|---|---|---|
Generating (generating) | shimmer | 1× | — |
Typing (typing) | dots | 1× | — |
Generating
pattern: "generating" · mode shimmer · speed 1× · sizes 20, 32, 64
| Prop | Category | Type | Range | Default | Description |
|---|---|---|---|---|---|
highlightFill | Appearance | boolean | 0 | Draw the highlight as one smooth gradient band instead of stepped layers. | |
highlightLength | Appearance | number | 0.05–1 (UI 0.1–0.8) fraction | 0.35 | Highlight length as a fraction of the track. |
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). |
thickness | Appearance | number | 0.01–0.5 (UI 0.02–0.3) fraction | 0.12 | Track thickness as a fraction of the frame. |
trackOpacity | Appearance | number | 0–1 (UI 0–0.6) fraction | 0.18 | Opacity of the track behind the highlight (0 = highlight only). |
period | Motion | number | 0.05–30 (UI 0.5–4) s | 1.5 | Seconds per highlight sweep. |
Advanced props (1)
| Prop | Category | Type | Range | Default | Description |
|---|---|---|---|---|---|
length | Appearance | number | 0.1–1 fraction | 0.84 | Track length as a fraction of the frame. |
Typing
pattern: "typing" · mode dots · speed 1× · sizes 20, 32, 64
| Prop | Category | Type | Range | Default | Description |
|---|---|---|---|---|---|
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). |
bounceAmplitude | Motion | number | 0–0.5 (UI 0–0.3) fraction | 0.12 | Bounce height as a fraction of the frame. |
delay | Motion | number | 0–5 (UI 0–0.6) s | 0.2 | Seconds between one dot's bounce and the next. |
period | Motion | number | 0.05–30 (UI 0.4–3) s | 1.2 | Seconds per bounce cycle. |
Advanced props (3)
| Prop | Category | Type | Range | Default | Description |
|---|---|---|---|---|---|
dotCount | Appearance | integer | 1–6 | 3 | Number of bouncing dots. |
dotSize | Appearance | number | 0.01–0.3 fraction | 0.06 | Dot radius as a fraction of the frame. |
spacing | Appearance | number | 0.02–0.5 fraction | 0.22 | Gap between dots as a fraction of the frame. |