Lumen

Written for the variant you picked above: Dark

Build an avatar for an AI agent: a soft coloured drop with two eyes, drawn as one SVG on a 100×100 board and used at any size from 20px (a header pill) to 160px (an empty chat). Props: name, hue, form, state, size, focusTarget (a ref to look at while it has focus), label, decorative. Shape: each form is a closed Catmull–Rom spline through 11–14 points, so agents differ by silhouette as well as colour. Seven forms: bean (a soft bean, crown right of centre), drop (the crown draws up to a soft point), pebble (wide and low), egg (tall), lump (a small nub on the left shoulder), tilt (the bean mirrored, looking out from the left) and pear (narrow shoulders, wide base). Shading, clipped to the silhouette: a radial body gradient centred at 38%/30% from the light tone to the body colour at 62%; a deep-tone pool at the lower right (72%/96%, 50% → 0); a soft white highlight ellipse (15×9, rotated −38°) near the upper left; and a black 8% hairline edge so pale hues hold their shape on pale pages. Seven hues, each with light, body, deep, eye, `on` (the colour of anything drawn on the body) and `ring` (the state-dot colour): rose #e2457f, blue #3d6cf0, amber #f59a3f, white #efebe4, umber #8c5a3a, red #ec4a36, green #27b07a. Eyes: two near-black vertical ovals with no pupils, placed per form (for the bean at 63/39, 13.5 apart), slanted 10° with the eye nearer the crown 2.5 units higher; mirrored forms swap the slant. They grow at small sizes so they still read: rx 4.8 / ry 8.6 below 32px, 4.2 / 8.2 below 64px, 3.8 / 8 above. Gaze, in order of priority: the busy state's own look (below); the focus target while it has focus; the pointer while it's within four avatar widths (plus 40px); otherwise idle glances every 4–9 s, a third of them straight ahead, from a per-instance seeded generator so a row of avatars never moves in step. The look is a unit offset that moves the eyes up to 9 units across and 7 down and leans the drop up to 3° around its base, eased by a critically damped spring (stiffness 140) on requestAnimationFrame. Frames run only while it moves or is busy, and stop off screen and in hidden tabs. One pointer listener is shared by every avatar; touch pointers are ignored. Blinks: each avatar on its own 3–7 s clock, a 150ms squeeze to 8% height, with a 15% chance of a double blink. States, each with its own gaze, body and dots in the hue's ring colour. Dots ride an ellipse in perspective: on the far side they're drawn behind the body, smaller and fainter, and come back in front. Below 28px every state keeps just three dots. - idle: a slow 5 s breath (1.2% wider, 2.2% taller). - thinking: eyes up and away, drifting; breath quickens to 2.6 s; three round dots of falling size (6.4, 4.8, 3.5) circle the crown (centre 50/2, radii 36×10) every 2.6 s, faster at the front. - searching: eyes scan side to side; a ring of nine small dots round the waist (50/58, 64×19) sweeps every 1.3 s like radar, a bright head and a fading tail. - working: eyes down at the work; a 0.9 s squash; four small rounded squares orbit the base (50/93, 48×9) every 1.9 s, turning as they go. - done: one squash (0.6 s), a pleased squint (1.3 s), and the last state's dots draw into the body and vanish (0.45 s). - error: the body tightens, the eyes flatten, and a dark circle with a white '!' sits at the lower right, so it's never colour alone. The demo is a chat shell with four agents: pilot (blue drop), chalk (white egg), cocoa (umber lump) and fern (green pear). The sidebar lists them with their last message; on phones it becomes a row of small drops. An empty chat shows the agent at 150px looking at the message field. Sending runs thinking (1.5 s), 'Searching your files' (1.9 s) and 'Building <file>.md' (1.9 s), then replies with a file chip. The round send button fills with the agent's body colour and its arrow takes the `on` colour; hover darkens it to the deep tone, and it's at 30% while empty or busy. The shell is sized to the viewport so the message field is always visible without scrolling. It's an image labelled with the agent's name plus its state ('pilot, thinking'), or decorative when the name is written beside it. Reduced motion: no blinking, idle glances, lean or breathing; each state's dots hold one still pose, and the eyes still turn to the focused field, without easing. Selected variant — Dark (dark): Show the avatars in a dark chat shell: page #060606, shell #0b0b0b with a #1e1e1e border, sidebar #131313, selected row #262626, text #ededed and #8a8a8a, message field #1a1a1a. The drops themselves keep their own hues in every theme. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Focus the message field and the large avatar looks at it; move the pointer near any avatar and it follows; otherwise each glances around on its own. Pick an agent in the sidebar (or the row of drops on phones), type and send (Enter or the arrow button) to watch it think, search and build a file. Motion: Gaze and lean ease on a critically damped spring and stop when settled; blinks 150ms every 3–7 s; idle glances every 4–9 s; idle breath 5 s. State dots: thinking 2.6 s, searching 1.3 s, working 1.9 s per turn; done squash 0.6 s, squint 1.3 s, dots gather 0.45 s. Paused off screen and in hidden tabs. Reduced motion: still poses, and a direct turn towards the focused field. Accessibility: Each Lumen is an image labelled with the agent's name, or aria-hidden when the name is already written next to it (lists, pills). The label also carries the state ('pilot, searching'), and the error state adds a visible mark, so nothing depends on the eyes, the dots or colour alone. The demo announces each step in a polite status region. Responsive behavior: Sizes from 20px to 200px share one shape; small sizes get larger eyes and three state dots. In the demo the sidebar becomes a row of drops below 640px and the chat shell is sized to the viewport, so the message field stays in view. Touch: On touch there's no pointer to follow (touch pointers are ignored): the avatars look at the focused field and otherwise glance on their own; agents and send are ordinary tap targets. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Focus the message field and the large avatar looks at it; move the pointer near any avatar and it follows; otherwise each glances around on its own. Pick an agent in the sidebar (or the row of drops on phones), type and send (Enter or the arrow button) to watch it think, search and build a file.

Motion

Gaze and lean ease on a critically damped spring and stop when settled; blinks 150ms every 3–7 s; idle glances every 4–9 s; idle breath 5 s. State dots: thinking 2.6 s, searching 1.3 s, working 1.9 s per turn; done squash 0.6 s, squint 1.3 s, dots gather 0.45 s. Paused off screen and in hidden tabs. Reduced motion: still poses, and a direct turn towards the focused field.

Accessibility

Each Lumen is an image labelled with the agent's name, or aria-hidden when the name is already written next to it (lists, pills). The label also carries the state ('pilot, searching'), and the error state adds a visible mark, so nothing depends on the eyes, the dots or colour alone. The demo announces each step in a polite status region.

Responsive

Sizes from 20px to 200px share one shape; small sizes get larger eyes and three state dots. In the demo the sidebar becomes a row of drops below 640px and the chat shell is sized to the viewport, so the message field stays in view.

On touch

On touch there's no pointer to follow (touch pointers are ignored): the avatars look at the focused field and otherwise glance on their own; agents and send are ordinary tap targets.