Pixel Avatar

Usage

import { PixelAvatar } from '@wdzyi/ui';

<PixelAvatar character='king' name='Maya Chen' size={32} />

// Without a character or a tint, each is picked from the name, the same one every time.
<PixelAvatar name='Sam Rivera' size={36} />

// A hue of your own, or none, for the text colour on a grey plate.
<PixelAvatar name='Ivy Okafor' tint='teal' size={36} />
<PixelAvatar name='Theo Grant' tint='none' size={36} />

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

characterPixelAvatarCharacter = picked from the name

Who to draw: robot, alien, ghost, cat, fox, frog, bear, panda, owl, octopus, astronaut, ninja, wizard, knight, skull or punk, or for a table, dealer, high-roller, lucky-cat, joker, king, queen, shark or whale.

drawingPixelAvatarDrawing

A drawing of your own, written the way the characters are: twelve rows of twelve, the lid its eyes shut to, its grey plate as a share of the text colour, and the rows that change when it pulls a face. It’s drawn in place of character, and takes a tint, blinks and pulls a face as they do.

namestring

Whose avatar it is, read out by screen readers, and what picks its character and its hue when they aren’t given. Without one, the avatar is decoration.

sizenumber = 36

Its side, in px. The drawing snaps to whole pixels inside it, and is sharpest at multiples of twelve.

tint'red' | 'green' | 'teal' | 'blue' | 'violet' | 'pink' | 'auto' | 'none' = 'auto'

The colour of its plate, with an ink of the same hue that reads on it in either theme. auto picks the hue from the name, the same one every time, and none draws it in the text colour on a grey plate, as auto does without a name.

palettePixelAvatarPalette

Colours of your own in place of the tint, for any of ink, mid, soft, white and plate, such as a gold plate for first place. What it leaves out is drawn as it would be untinted, in the text colour on a grey plate.

stillboolean = false

Holds it still: no blinking, and no change of face under the pointer.

reactboolean

Shows its other face, as the pointer resting on it does, such as for the row someone is pointing at. Pass false to keep it from changing.

classNamestring

Added to its plate.

pixelAvatarCharacters, pixelAvatarForPixelAvatarCharacter[], (name: string) => PixelAvatarCharacter

Every character, the general ones then the casino ones, and the pick from a name.

Notes

• Each character is twelve rows of twelve, written in the file as text, a character a pixel: ink, mid and soft are its ink at 88%, 56% and 24%, eyes and teeth are cut out in the page colour, and a crown, a chain or a glint is foil. So they hold in either theme, and a new one is a dozen lines to draw.
• Each plate is one of six flat hues, red, green, teal, blue, violet or pink, picked from the name apart from the character, so two cats can still be told apart. The ink is the same hue, deep on a pale plate in the light theme and pale on a deep one in the dark, at 7:1 on its plate in the light theme and at least 5.7:1 in the dark. There’s no yellow, so a foil crown always stands off its plate. Untinted, each plate is its own grey, from 7% to 12% of the text colour.
• Runs along each row are joined with the same runs below them, so a character is one SVG of twenty to forty rectangles. The grid is drawn at a whole number of pixels a cell and centred on its plate, and its empty outer ring takes up the difference, so the edges stay sharp at any size.
• While it’s on screen it blinks for 120ms every 2.4 to 6.8 seconds, sometimes twice, at a pace seeded by who it is, so a row of them never blinks together. Off screen, with reduced motion, or still, it doesn’t blink.
• Resting the pointer on it, or react, swaps its face at once: a grin, a wink, a jaw that drops, a whale that spouts. The face holds for 280ms after the pointer goes, so running along a row leaves a little wave behind it.
• The Pixel Characters page, at /pixels, has five hundred more, dressed from these drawings in hats, shades and chains, alongside chips, cards and kits, each ready to take away.