Orb Face
betaA cartoon assistant orb whose gaze follows the pointer, who blinks, and whose expression tells its state — listening, thinking, speaking, done or broken.
- AI
- 1 file
- 1 npm package
- Accessibility notes
- Animates with motion
Loading the example…
pnpm dlx @dowel-ui/cli add orb-facenpm packages installed: motion.
import { OrbFace } from "@/components/ui/orb-face";Default
Gallery
Custom Colours
<OrbFace>
| Prop | Type | Default |
|---|---|---|
amplitudeLive audio level, 0–1: while listening, the body swells with the voice. | number | — |
colorsAny CSS colours — theme tokens by default. | OrbFaceColors | — |
gazeFollow the pointer with its gaze. Turn it off in dense UI, where a dozen faces tracking the cursor would be noise. | boolean | true |
sizeRendered size. A number is pixels; a string is any CSS length. | number | string | 128 |
stateWhat the assistant is doing, told by expression. | OrbFaceState | "idle" |
Plus every attribute of <svg> except children, color.
Decorative: aria-hidden unless given aria-label or aria-labelledby, when it becomes role="img" — keep that label in step with `state`, and keep a text status nearby, because an expression is not a word. It is never a live region. Under reduced motion the gaze, blinking and thinking glances are switched off and every keyframe stops, leaving each state's settled face; the gaze spring is the only use of `motion`.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes