Monster

<quiet-monster>

stable

since 5.0

Generates deterministic pixel monsters from an arbitrary string.

Monsters are rendered on a 16×16 pixel grid and feature procedurally generated pixel art bodies with unique color palettes. The same input always produces the same monster, making them a fun alternative to identicons for default avatars or visual identifiers.

<quiet-monster value="mochi@example.com" label="Mochi"></quiet-monster>
<quiet-monster value="bean@example.com" label="Bean"></quiet-monster>
<quiet-monster value="pip@example.com" label="Pip"></quiet-monster>
<quiet-monster value="bubbles@example.com" label="Bubbles"></quiet-monster>
<quiet-monster value="pancake@example.com" label="Pancake"></quiet-monster>

Examples Jump to heading

Basic usage Jump to heading

Provide a value to generate a monster and a label for accessibility. When no label is provided, the monster will be hidden from assistive devices. Nothing will be rendered if value is empty.

Each unique string produces a deterministic monster with a unique body, face, and color palette.

<quiet-monster 
  id="monster__basic"
  value="shadow@example.com" 
  label="Example Monster"
></quiet-monster>

<quiet-text-field 
  id="monster__basic-value" 
  label="Value" 
  value="shadow@example.com" 
  with-clear 
  style="margin-block-start: 1rem;"
></quiet-text-field>

<script>
  (() => {
    const monster = document.getElementById('monster__basic');
    const valueField = document.getElementById('monster__basic-value');

    valueField.addEventListener('input', () => {
      monster.value = valueField.value;
      monster.label = valueField.value;
    });
  })();
</script>

Changing the size Jump to heading

Monsters have a default aspect ratio of 1 / 1, so setting the width is usually all you need.

<quiet-monster
  value="size"
  label="32px"
  style="width: 32px;"
></quiet-monster>

<quiet-monster
  value="size"
  label="64px"
  style="width: 64px;"
></quiet-monster>

<quiet-monster
  value="size"
  label="96px"
  style="width: 96px;"
></quiet-monster>

<quiet-monster
  value="size"
  label="128px"
  style="width: 128px;"
></quiet-monster>

To stretch or squish the monster, override the aspect ratio and set the width and height. Be gentle though — monsters don't like being squished too much!

<quiet-monster value="stretch" label="Stretched" style="width: 100px; height: 50px; aspect-ratio: auto;"></quiet-monster>

<quiet-monster value="squish" label="Squished" style="width: 50px; height: 100px; aspect-ratio: auto;"></quiet-monster>

Custom colors Jump to heading

Use the colors attribute to provide a semicolon-delimited list of colors. The monster's body palette will be derived from these colors instead of the defaults.

<!-- Earth tones -->
<div class="flex-row">
  <quiet-monster value="mochi" label="Mochi" colors="#8B4513; #A0522D; #6B8E23; #D2B48C"></quiet-monster>
  <quiet-monster value="mittens" label="Mittens" colors="#8B4513; #A0522D; #6B8E23; #D2B48C"></quiet-monster>
  <quiet-monster value="tom" label="Tom" colors="#8B4513; #A0522D; #6B8E23; #D2B48C"></quiet-monster>
  <quiet-monster value="cleo" label="Cleo" colors="#8B4513; #A0522D; #6B8E23; #D2B48C"></quiet-monster>
</div>

<!-- Pastels -->
<div class="flex-row">
  <quiet-monster value="mochi" label="Mochi" colors="#BAE1FF; #FFB3BA; #FFFFBA; #BAFFC9"></quiet-monster>
  <quiet-monster value="mittens" label="Mittens" colors="#BAE1FF; #FFB3BA; #FFFFBA; #BAFFC9"></quiet-monster>
  <quiet-monster value="tom" label="Tom" colors="#BAE1FF; #FFB3BA; #FFFFBA; #BAFFC9"></quiet-monster>
  <quiet-monster value="cleo" label="Cleo" colors="#BAE1FF; #FFB3BA; #FFFFBA; #BAFFC9"></quiet-monster>
</div>

<!-- Grayscale -->
<div class="flex-row">
  <quiet-monster value="mochi" label="Mochi" colors="#333333; #666666; #999999; #CCCCCC"></quiet-monster>
  <quiet-monster value="mittens" label="Mittens" colors="#333333; #666666; #999999; #CCCCCC"></quiet-monster>
  <quiet-monster value="tom" label="Tom" colors="#333333; #666666; #999999; #CCCCCC"></quiet-monster>
  <quiet-monster value="cleo" label="Cleo" colors="#333333; #666666; #999999; #CCCCCC"></quiet-monster>
</div>

Effects Jump to heading

Use the effect attribute to add a retro animation to the monster. Available effects are bounce, idle, shake, spin, wobble, and float.

<quiet-monster value="bounce" label="Bounce" effect="bounce"></quiet-monster>
<quiet-monster value="idle" label="Idle" effect="idle"></quiet-monster>
<quiet-monster value="shake" label="Shake" effect="shake"></quiet-monster>
<quiet-monster value="spin" label="Spin" effect="spin"></quiet-monster>
<quiet-monster value="wobble" label="Wobble" effect="wobble"></quiet-monster>
<quiet-monster value="float" label="Float" effect="float"></quiet-monster>

Using as avatars Jump to heading

Monsters work nicely as default avatars when placed inside a <quiet-avatar> using the icon slot.

                  
                  whiskers@example.com
                
                  mittens@example.com
                
                  shadow@example.com

<div id="monster__avatars">
  <div class="avatar-row">
    <quiet-avatar label="Whiskers">
      <quiet-monster slot="icon" value="whiskers@example.com"></quiet-monster>
    </quiet-avatar>
    <span>whiskers@example.com</span>
  </div>

  <div class="avatar-row">
    <quiet-avatar label="Mittens">
      <quiet-monster slot="icon" value="mittens@example.com"></quiet-monster>
    </quiet-avatar>
    <span>mittens@example.com</span>
  </div>

  <div class="avatar-row">
    <quiet-avatar label="Shadow">
      <quiet-monster slot="icon" value="shadow@example.com"></quiet-monster>
    </quiet-avatar>
    <span>shadow@example.com</span>
  </div>
</div>

<style>
  #monster__avatars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    .avatar-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
  }
</style>

Gallery Jump to heading

Every string produces a completely different monster with unique body shapes, facial features, and color palettes.

<div id="monster__gallery">
  <quiet-monster value="alice" label="alice"></quiet-monster>
  <quiet-monster value="bob" label="bob"></quiet-monster>
  <quiet-monster value="charlie" label="charlie"></quiet-monster>
  <quiet-monster value="noodle" label="noodle"></quiet-monster>
  <quiet-monster value="edgar" label="edgar"></quiet-monster>
  <quiet-monster value="fiona" label="fiona"></quiet-monster>
  <quiet-monster value="george" label="george"></quiet-monster>
  <quiet-monster value="hannah" label="hannah"></quiet-monster>
  <quiet-monster value="ivan" label="ivan"></quiet-monster>
  <quiet-monster value="julia" label="julia"></quiet-monster>
  <quiet-monster value="kevin" label="kevin"></quiet-monster>
  <quiet-monster value="luna" label="luna"></quiet-monster>
  <quiet-monster value="mars" label="mars"></quiet-monster>
  <quiet-monster value="nova" label="nova"></quiet-monster>
  <quiet-monster value="oscar" label="oscar"></quiet-monster>
  <quiet-monster value="penny" label="penny"></quiet-monster>
</div>

<style>
  #monster__gallery {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    justify-items: center;
    gap: 1rem;

    quiet-monster {
      width: 64px;
      height: 64px;
    }
  }

  @media (max-width: 640px) {
    #monster__gallery {
      grid-template-columns: repeat(4, 1fr);
    }
  }
</style>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN

Self-hosted

To manually import <quiet-monster> from the CDN, use the following code.

import 'https://cdn.quietui.org/v5.0.0/components/monster/monster.js';

To manually import <quiet-monster> from a self-hosted distribution, use the following code. Remember to replace /path/to/quiet with the appropriate local path.

import '/path/to/quiet/components/monster/monster.js';

Properties Jump to heading

Monster has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property	Description	Type	Default
`value`	The input string to generate the monster from. The same string always produces the same visual.	`string`	`''`
`label`	An accessible label for the monster. This won't be visible, but it will be read to assistive devices. When no label is provided, the monster is treated as decorative and hidden from assistive devices.	`string undefined`
`colors`	A semicolon-delimited list of colors to use for the monster. You can use any valid CSS color format. Defaults to the Quiet UI theme palette.
`effect`	An optional animation effect to apply to the monster.	`'bounce' 'idle' 'shake' 'spin' 'wobble' 'float' undefined`

Monster

Examples Jump to heading #

Basic usage Jump to heading #

Changing the size Jump to heading #

Custom colors Jump to heading #

Effects Jump to heading #

Using as avatars Jump to heading #

Gallery Jump to heading #

API Jump to heading #

Importing Jump to heading #

Properties Jump to heading #