Globe Search

Written for the variant you picked above: Dark

Build the 'searching the web' state of an AI assistant around a small globe. Props: query, results ({ title, site, place: { lat, lon } }), found (how many have arrived), state (searching | done), size (globe px, default 22) and theme. A `Globe` export works on its own (size, spinning, pings, settle). The globe: an SVG on a 100×100 board, a sphere of radius 46 with a radial sea gradient (lighter at 38%/32%), a hairline rim, and a graticule of meridians and parallels every 30° (every 45° below 32px) drawn by real orthographic projection: x = cos φ sin(λ−λ₀), y = cos φ₀ sin φ − sin φ₀ cos φ cos(λ−λ₀), on the near side when sin φ₀ sin φ + cos φ₀ cos φ cos(λ−λ₀) > 0, with the viewer tilted 18° above the equator. Near lines at 78% opacity, far lines at 16% (10% when small), non-scaling 1.1px strokes. While searching it turns 34°/s on requestAnimationFrame. Each result lands as a ping at its place: a 3.4-unit dot in the accent with a ring that expands from 0.3 to 1.6 and fades once (0.9 s); below 32px the dot and ring are drawn larger (6.5 and 14) so they still show. Pings ride the globe round and fade as they turn away. When the search ends the globe eases to face the last result along the shortest turn, then the loop stops; it pauses off screen and in hidden tabs. The line: the globe, 'Searching the web' with a 2.2 s sheen moving across the words, the query in a small chip that truncates first, and a live count on the right ('7 found', each new number rolling up). Done: 'Searched the web' and a '12 results' button with a chevron that turns; it opens the list underneath, indented to the text: a letter favicon, the title (ellipsised) and the site in mono. Keyboard: the results toggle is a real button (Enter/Space) with aria-expanded and aria-controls and a 2px focus ring. Touch: it's a 26px-tall tap target, and nothing depends on hover (hover only tints rows). Below 520px the site column hides and the list loses its indent. A polite status region says 'Searching the web for …' and then '…: 12 results', not every count; the globe itself is decorative. Reduced motion: no turning, rings or sheen; the globe stands facing the latest result and the label is plain text. Selected variant — Dark (dark): Dark theme colour tokens: --glbs-ink #ececec; --glbs-muted #8c8c8c; --glbs-faint #5a5a5a; --glbs-line #2a2a2a; --glbs-chip #1d1d1d; --glbs-sea #10161f; --glbs-sea-hi #1c2836; --glbs-grid #9fb4cf; --glbs-ping #5f87f7; --glbs-focus #8ab4f8. 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 the search; when it's done, open the results with the count button (Enter or Space). In the demo, 'Search again' replays it. Motion: The globe turns 34°/s while searching and eases to rest facing the last result; pings ring once (0.9s); the count rolls up; the label carries a 2.2s sheen. Paused off screen and in hidden tabs; reduced motion holds still. Accessibility: The globe is decorative; a polite status region announces the start and the result count; the results toggle is a button with aria-expanded controlling an ordered list. Responsive behavior: The line truncates the query first; below 520px the result list drops the site column and its indent. The globe scales from 20px inline to 64px. Touch: The results toggle is a tap target; nothing depends on hover. 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 the search; when it's done, open the results with the count button (Enter or Space). In the demo, 'Search again' replays it.

Motion

The globe turns 34°/s while searching and eases to rest facing the last result; pings ring once (0.9s); the count rolls up; the label carries a 2.2s sheen. Paused off screen and in hidden tabs; reduced motion holds still.

Accessibility

The globe is decorative; a polite status region announces the start and the result count; the results toggle is a button with aria-expanded controlling an ordered list.

Responsive

The line truncates the query first; below 520px the result list drops the site column and its indent. The globe scales from 20px inline to 64px.

On touch

The results toggle is a tap target; nothing depends on hover.