options
Every option, as a prop, attribute, query parameter or flag.
The components share the options below, as do the attributes and properties on <glorpie-face>. The image route and CLI accept the options that apply to image files.
A numeric name is a seed; a string is hashed into one. name={42} and name="42" are different faces. On the element, use face.name = 42 for a seed: HTML attributes, URL query parameters and CLI arguments are strings.
| prop | type | default | |
|---|---|---|---|
| name | string | number | required | Any string, or a seed in [0, 2^53). The same name always gives the same face. |
| look | "auto" | look id | "auto" | auto resolves to watercolour at 72px and up, ink below. See looks. |
| size | number | CSS length | 48 | Pixels, or any CSS length such as "100%". Repaints at the new resolution when it grows. |
| shape | "circle" | "squircle" | "rounded" | "square" | "circle" | The crop. Ignored when background is false. |
| background | boolean | string | true | false draws only the face, on transparency: no backdrop, pencil guides or crop. A CSS colour puts the face on that colour instead of its paper, inside its crop. |
| state | idle | thinking | working | waiting | blocked | done | "idle" | Changes the expression and motion, and adds a mark beside the head. See states. |
| alive | boolean | true | Breathing, blinking and glancing at the pointer. Defaults to false under prefers-reduced-motion. |
| pokeable | boolean | false | Clicking or tapping the face makes it wobble. |
| label | string | "Avatar" | The accessible name; the face has role="img". |
| priority | number | 1 | Paint order when many faces are queued; higher paints first. Raise it for faces above the fold. |
errors
A failed paint is reported once per face, and goes to console.error unless handled:
| where | how |
|---|---|
| React, Svelte, Solid, Preact | onError={(error) => …} |
| Vue | @error="…" |
<glorpie-face> | a cancellable glorpie-error event; preventDefault() suppresses the log |
mount() | the onError option |