Avatar Stack

Usage

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

<AvatarStack
  max={5}
  people={[
    { name: 'Alex Kim', character: 'cat' },
    { name: 'Sam Rivera', src: '/people/sam.webp' },
    { name: 'Jordan Lee', tint: 'violet' },
  ]}
/>

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

Props

peopleAvatarStackPerson[]

A name each, a photo if there is one, and if there isn’t, the pixel character to draw them as and the tint of their plate. Without a character or a tint, each is picked from the name, the same one every time.

maxnumber = 5

The most tiles it shows, counting the last one, which counts the rest.

sizenumber = 36

Each tile’s side, in px. The overlap and the lift follow it. Four over a multiple of twelve, such as 28, 40 or 52, leaves a little plate round each drawing, which keeps its eyes clear of the next tile.

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

The colour of the plates of everyone without a tint of their own. auto gives each the hue their name picks, unless the person beside them already has it, and none leaves them grey.

labelstring

Beside the stack while nothing is lifted, and its name for screen readers. By default it counts the people.

liftednumber | null = null

Lifts the tile at that place as if the pointer were on it, for a demo or anything else pointing at someone.

fallback'pixel' | 'initials' = 'pixel'

How someone without a photo is drawn: as a pixel character, or by their initials, either way on their plate.

Notes

• The pointer lifts the tile it’s over the most and its neighbours less, falling away with distance, so moving along the stack runs a wave through it.
• Each tile is a spring in one frame loop: firm while it follows the pointer, looser once it’s let go, so they overshoot and bounce down. The loop stops once they’re still.
• The gap around the lifted tile turns to foil, a shade deeper in the light theme so it holds against the pale plates beside it, and its name morphs in beside the stack, fading at the edge if there isn’t room. Set --avatar-stack-ring to the colour behind it if that isn’t the card.
• Everyone without a photo is on a flat plate in one of the Pixel Avatar’s six hues, picked from their name, and initials take its ink too. Two side by side never share a hue: the second moves on round the wheel to the next that neither neighbour has, though a tint asked for by name is kept. The tile that counts the rest stays grey, so the people are the colour.
• People without a photo are Pixel Avatars. They blink now and then, and whoever’s lifted pulls a face, which holds for a beat after the wave moves on. Each tile tucks under the next just short of most faces’ eyes, though the fox, frog, owl and skull have theirs set wider, so the demo leaves them out.
• A finger can run along it too, and a swipe up or down still scrolls the page. With reduced motion, the tiles stay put, the faces don’t blink, and only the name and the face change.