-- online Search!

Who's Online

Filed under Design System

Design system sections

11 / WHO'S ONLINE

Globe renderers, visitor tables, interaction states, and privacy boundaries.

Agent Instructions / online

You are extending Who's Online on kirupa.com. Reuse whos-online/clay-globe.js and the appropriate registered renderer, preserving shared camera, geography, visitor semantics, and the Location/Page table. Maintain each skin's distinct material: clay, smooth, vector, dot matrix, woodblock, or pixel planet. Keep location labels and page links readable, keyboard turning usable, reduced motion calm, and loading/empty/error states explicit. Do not claim text-only location labels are focus buttons. Documentation uses fictional rows and must not poll production presence. Do not expose raw IPs, precise personal locations, or new tracking. Preserve the privacy boundary and Natural Earth attribution. Follow WCAG 2.2 AA for new or changed content: semantic HTML, keyboard access, visible focus, readable contrast in every theme, text alternatives, labeled controls, and explicit errors. Support zoom/reflow, respect reduced motion, and keep sound optional. Read /design/sections/accessibility.md for acceptance checks. Report unresolved barriers; automated checks alone do not establish conformance.

The original Pixel view of Who's Online is a shaded low-poly clay globe with raised land, location pillars, clouds, paper planes, and softly moving background shapes. Drag to turn it; keyboard arrows also orient it. The Location/Page table lists the same visitors without requiring map interaction. In this checked-in renderer, location labels are text and page names are links; automatic focus follows a newly arriving visitor after an idle period.

Smooooth rounds the same world. Sci-Fi turns it into a vector navigation display. Minimal uses an ink-dot matrix on paper, solid dots for active visitors, rings for recent arrivals, and no clouds, planes, or shadows. Ukiyo-e uses paper land, wave-pattern sea, mist, sun/moon, cranes, and seal-like cities. Platformer uses an unsmoothed pixel planet with orbiting tiles and coins.

All six renderers share the underlying geography, camera, visitor data, and interaction semantics; changing a skin must not change what a visitor means. Active and recent arrivals from the last 30 minutes appear in the table and count. Production polling and privacy handling belong to the existing presence service.

The specimen below runs the actual renderer against a fixed, explicitly fictional fixture. It never calls the live presence endpoint. Its rows are examples, not visitor statistics. Geography keeps its Natural Earth attribution. Loading, disconnected, empty, and reduced-motion states must stay comprehensible.

The real globe; fictional visitors

LOCAL PREVIEW

Activate this specimen to load its real styles. No saved preferences change.

Do not add a distracting right rail or expose identifying visitor data. The live page's public explanation describes a short-lived private fingerprint and no raw address sent to the browser; preserve that boundary rather than adding client-side location tracking.

  • Do preserve the visitor table, keyboard behavior, tooltips, and a visible error when rendering or data fails.
  • Do keep map geography distinct from location precision; a marker is not somebody's exact address.
  • Do not use real presence data in a design fixture or initialize live tracking from a specimen.
Source mapwhos-online/index.phpwhos-online/clay-globe.jswhos-online/clay-globe.csswhos-online/clay-globe-nature.jswhos-online/clay-globe-scifi.jswhos-online/clay-globe-minimal.jswhos-online/clay-globe-ukiyoe.jswhos-online/clay-globe-platformer.jswhos-online/countries.LICENSE.txt

The KIRUPA Newsletter

Thought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 - delivered weekly to over a bazillion subscribers!

SUBSCRIBE NOW

Creating engaging and entertaining content for designers and developers since 1998.

Follow:

Popular

Loose Ends

:: Copyright KIRUPA 2026 //--