Activity Glyphs

Written for the variant you picked above: Dark

Build a set of activity indicators for an AI agent: an inline 24×24 SVG glyph (1.4em, 1.7px round strokes in the ink colour, frames at 55%) beside a label and an optional quieter detail ('Writing late-fees.ts'). Props: activity, state (active | done | error), label, detail. All motion in CSS: - Reading: an open book; two copies of the right page flip over the spine (scaleX 1 → −1 about x=12, 1.8s, 0.9s apart) with a faint fill. - Writing code: '< >' brackets with three short lines between them that type out in four steps each, 0.45s apart, hold, then fade and start again (2.1s). - Running a command: a rounded terminal frame; three '>' chevrons march right and fade, 0.4s apart, and an underscore cursor blinks at 1s. - Generating an image: a 4×4 pixel grid where cells resolve from 12% to 90% opacity (and 0.6 → 1 scale) in a scattered fixed order, 70ms apart, hold and fade (2.4s). - Analysing data: four bars on a baseline rising and falling to different heights (35%, 85%, 55%, 100%), each a quarter cycle out of step (1.9s). - Uploading: a tray with an arrow that lifts out of it and fades (1.5s) while a line inside the tray fills across (3s). Done replaces the glyph with a green tick drawn by stroke-dashoffset in 450ms; error draws a red cross in 350ms, shakes it once by ±1.5px and turns the label red — the label should carry the reason ('Upload failed: Drive is out of space'). Each is a status element whose label says the text plus 'in progress', 'done' or 'failed'. Animations pause off screen and in hidden tabs; under reduced motion each holds a recognisable still: the page half-turned, one chevron, a checkerboard of resolved pixels, bars at three heights, the tray part-filled. Selected variant — Dark (dark): Palette for this theme (Dark): --acgl-err #f2644f; --acgl-ink #ececec; --acgl-muted #8c8c8c; --acgl-ok #3cc28c. Treat these as the root colour tokens, one value per role, and name them to suit your code. Select it with the theme option set to "dark". Keep every dimension, spacing value, state and motion from the brief unchanged, and keep text at 4.5:1 contrast or better on these surfaces. 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: Nothing to operate: it shows what the agent is doing. Set `activity` and `state`. Motion: Reading 1.8s, writing 2.1s, running 1.2s with a 1s cursor blink, image 2.4s, analysing 1.9s, uploading 1.5s/3s, all looping; tick 450ms, cross 350ms plus a 400ms shake. Paused off screen. Reduced motion: still poses. Accessibility: Each glyph is a status element labelled with its text and its state (in progress, done or failed); the drawing is hidden from assistive technology, and errors are stated in words, not just colour. Responsive behavior: Sized in em, so it follows the text it sits in; labels wrap normally. Touch: No interaction. 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

Nothing to operate: it shows what the agent is doing. Set `activity` and `state`.

Motion

Reading 1.8s, writing 2.1s, running 1.2s with a 1s cursor blink, image 2.4s, analysing 1.9s, uploading 1.5s/3s, all looping; tick 450ms, cross 350ms plus a 400ms shake. Paused off screen. Reduced motion: still poses.

Accessibility

Each glyph is a status element labelled with its text and its state (in progress, done or failed); the drawing is hidden from assistive technology, and errors are stated in words, not just colour.

Responsive

Sized in em, so it follows the text it sits in; labels wrap normally.

On touch

No interaction.