Overscan silhouette avatars

OVERSCANUI KIT

An empty seat is never drawn as someone. Filled silhouettes beside names, with no inner detail: humans (non-gendered by default, female, male), a helmeted suit, and four aliens and four robots told apart by their outline alone. An unassigned slot is a dashed empty well, a name with no kind is a question mark rather than the likeliest person, and a status handed to an empty seat is refused in words. The status mark is supplied by whatever watches the seat; the avatar decides nothing.

demo/avatar.html, from this page

import 'overscan'
import 'overscan/overscan.css'

<ov-avatar
  kind="human"
  name="NON-GENDERED"
></ov-avatar>

import { OvAvatar } from 'overscan/react'

<OvAvatar
  kind="human"
  name="NON-GENDERED"
/>

import { OvAvatar } from 'overscan/vue'

<OvAvatar
  kind="human"
  name="NON-GENDERED"
/>

import OvAvatar from 'overscan/svelte/OvAvatar.svelte'

<OvAvatar
  kind="human"
  name="NON-GENDERED"
/>

Humans

variation: variant="female" name="FEMALE"

import 'overscan'
import 'overscan/overscan.css'

<ov-avatar
  kind="human"
  variant="female"
  name="FEMALE"
></ov-avatar>

import { OvAvatar } from 'overscan/react'

<OvAvatar
  kind="human"
  variant="female"
  name="FEMALE"
/>

import { OvAvatar } from 'overscan/vue'

<OvAvatar
  kind="human"
  variant="female"
  name="FEMALE"
/>

import OvAvatar from 'overscan/svelte/OvAvatar.svelte'

<OvAvatar
  kind="human"
  variant="female"
  name="FEMALE"
/>

Aliens

variation: variant="male" name="MALE"

import 'overscan'
import 'overscan/overscan.css'

<ov-avatar
  kind="human"
  variant="male"
  name="MALE"
></ov-avatar>

import { OvAvatar } from 'overscan/react'

<OvAvatar
  kind="human"
  variant="male"
  name="MALE"
/>

import { OvAvatar } from 'overscan/vue'

<OvAvatar
  kind="human"
  variant="male"
  name="MALE"
/>

import OvAvatar from 'overscan/svelte/OvAvatar.svelte'

<OvAvatar
  kind="human"
  variant="male"
  name="MALE"
/>

Robots

variation: kind="crew" name="CREW, SUITED"

import 'overscan'
import 'overscan/overscan.css'

<ov-avatar
  kind="crew"
  name="CREW, SUITED"
></ov-avatar>

import { OvAvatar } from 'overscan/react'

<OvAvatar
  kind="crew"
  name="CREW, SUITED"
/>

import { OvAvatar } from 'overscan/vue'

<OvAvatar
  kind="crew"
  name="CREW, SUITED"
/>

import OvAvatar from 'overscan/svelte/OvAvatar.svelte'

<OvAvatar
  kind="crew"
  name="CREW, SUITED"
/>

Humans

Aliens

Robots

Who is flying each system

The refusals

Status marks, by shape

terminal

industrial

cyber

antiseptic

esper

neo

machina

holo

aegis

vector