Mascot
A small pixel-art character in the accent colour that idles, thinks, cheers and sleeps — for assistants, empty states and onboarding.
A block from @tectra-ng/blocks — it comes with tectra-ng, or alone: npm install @tectra-ng/blocks.
Basic
On its own the mascot idles: it bobs, blinks, its antenna glows, and every few seconds it plays a short trick. label names it for screen readers; without it the mascot is decorative.
States
state switches the animation: thinking while work is running, happy when it is done, sleeping when nothing happens, walking on the way somewhere.
Tricks
The tricks are states too: set one to play it now. playful plays them on its own while idle; [playful]="false" keeps the mascot calm.
Assistant
In an assistant the mascot follows the work: it thinks while an answer is on the way and cheers when it arrives.
Sizes
size sets the width in px or any CSS length; the pixels stay sharp at every size.
Design tokens
dt recolours one mascot; by default it follows the accent colour of the theme.