Source Sweep

Written for the variant you picked above: Dark

Build an AI 'searching several sources' indicator. Props: a query and a list of runs, each { id: google | notion | reddit | github | wikipedia, status: waiting | searching | done, found, results[] } — the caller drives the order. Above it: 'Searching for' + the query (query in the ink colour, weight 500). Each source is a 44px tile (radius 14px, a 1px inset hairline) holding its 20px mark (Simple Icons paths, CC0; brand colour where it reads on the theme, otherwise the ink colour) with its name under it in 12.5px. Waiting: the mark greyscale at 40%. Searching: the tile scales to 1.08 and three 5px dots of falling size and opacity circle it on a ring 7px outside the tile, 1.15s a turn. Done: the tile springs (0.92 and back) and a count badge pops into its top-right corner; if it found nothing the mark stays grey and the name is struck through, with no badge. While running, a line under the row reads 'Looking in Reddit · 2 of 5' (the source name fades in as it changes). When all are done it becomes a button, 'Searched 5 sources · 23 results', with a chevron that turns; it opens the results grouped by source — a small 26px mark, the source name and its count (or 'nothing found'), then each result's title and a muted meta line. The row wraps; under a 360px container the tiles shrink to 38px. A polite status region says what's being searched and the final summary; each tile's name carries its state for screen readers. The dots pause off screen and in hidden tabs; with reduced motion nothing moves and the dots hold still in an arc over the active source. Selected variant — Dark (dark): Palette for this theme (Dark): --srsw-dot #ececec; --srsw-faint #5a5a5a; --srsw-hover #1c1c1c; --srsw-ink #ececec; --srsw-line #2a2a2a; --srsw-muted #8c8c8c; --srsw-tile #1b1b1b. 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: Watch it search; when it's done, click the summary (or press Enter/Space) to open the results by source. Motion: Orbit 1.15s per turn on the active source; tile spring 450ms and badge pop 400ms when a source lands; summary fade 300ms. Paused off screen. Reduced motion: no movement, dots held in an arc. Accessibility: A polite status region announces the source being searched and the final summary; each source's name includes its state; the summary is a button with aria-expanded and aria-controls. Responsive behavior: Sized by container query: the row of tiles wraps, and below 360px the tiles shrink and the result list loses its indent. Touch: The summary is a normal button. 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

Watch it search; when it's done, click the summary (or press Enter/Space) to open the results by source.

Motion

Orbit 1.15s per turn on the active source; tile spring 450ms and badge pop 400ms when a source lands; summary fade 300ms. Paused off screen. Reduced motion: no movement, dots held in an arc.

Accessibility

A polite status region announces the source being searched and the final summary; each source's name includes its state; the summary is a button with aria-expanded and aria-controls.

Responsive

Sized by container query: the row of tiles wraps, and below 360px the tiles shrink and the result list loses its indent.

On touch

The summary is a normal button.