Customizing

How part selections resolve, which colors are recolorable, and how to build a picker UI on top of the manifest.

Selections

There are five selection slots: head, body, bottom, item, and glasses. Each holds exactly one part. A value can be written three ways, and they all resolve to the same part.

{
  head: 'braids';
} // name, scoped to the slot
{
  head: 'head-braids';
} // global alias
{
  head: 'hm1-p-000020';
} // canonical part ID

Names read well in code and in prompts. Canonical IDs are the stable choice for anything you store — see Saving state. Browse every name on Parts.

item and glasses both include a part named none. Select it when the avatar should carry nothing.

Colors

Six color slots are recolorable. Regions that do not reference a slot are fixed by construction, so accessories keep their own palette and only bind their outlines to stroke.

background also accepts 'transparent'. Hex values are accepted with or without a leading #.

Build a picker from the manifest

The manifest already lists the parts in each UI group and can render a preview for each one. Map over that data to build a picker without maintaining a separate part list or thumbnail set.

import { createPartPreview, getPartsForUiGroup } from '@humation/core';
import { humation1 } from '@humation/assets-humation-1';

const bodyOptions = getPartsForUiGroup(humation1, 'body').map((part) => ({
  id: part.id,
  name: part.name,
  previewSrc: createPartPreview(humation1, part).toDataUri(),
}));

See the avatar builder for a complete multi-group implementation.