ⵡhtml & js

the element

<glorpie-face> is a standard custom element. It works in any page, template or CMS, and in any framework that renders HTML.

1<script type="module" src="https://unpkg.com/glorpies"></script>2 3<glorpie-face name="ada@lovelace.dev" size="48"></glorpie-face>4<glorpie-face name="agent-47" size="48" look="sticker" state="thinking"></glorpie-face>

With a bundler, import the element once instead:

1import 'glorpies/element';

Every option is both an attribute and a reflected property. Changing one updates the face in place. name, look and state trigger a repaint, and so does background going on or off the face's paper (one colour for another is only CSS); a larger size repaints at the new resolution; anything else is CSS.

1const face = document.querySelector('glorpie-face');2face.state = 'done';3face.name = 42; // a numeric seed; the string '42' is a different face4face.addEventListener('glorpie-error', (event) => report(event.detail));

HTML attributes are strings. Use the name property for a numeric seed; the components preserve numeric props automatically.

The canvas is exposed as ::part(canvas). To register the element under another tag, call defineGlorpie('my-face').

a canvas of your own

mount() runs a face on a canvas you own. Size the canvas with CSS:

1import { mount } from 'glorpies';2 3const face = mount(canvas, { name: 'agent-47', look: 'gouache', state: 'working' });4 5face.update({ state: 'done' });6face.poke();7face.destroy();

The backing store tracks the canvas's CSS size times devicePixelRatio and repaints when it grows or the browser zoom changes. Animation pauses while the canvas is off screen or the tab is hidden.

pictures

Still images, with no animation loop:

1import { faceCanvas, faceColors, faceSVG } from 'glorpies';2 3const canvas = faceCanvas('agent-47', { look: 'ink', size: 256, shape: 'circle' });4const svg = faceSVG('agent-47', { size: 256, state: 'thinking' });5const { bg, accent } = faceColors('agent-47');

faceColors returns the face's palette, for theming the UI around it. In a watercolour SVG, pen lines, hatching and solids are vector paths, while the glazes and paper are embedded images; other looks are a single embedded image.