glowmoji — deterministic glowing avatars

install

npm install glowmoji

no build step? no problem. drop a script tag and go:

html

<script src="https://unpkg.com/glowmoji/dist/glowmoji.global.js"></script>
<body>
  <div id="avatar"></div>
  <script>
    glowmoji.mount(document.getElementById('avatar'), { name: 'Alice' });
  </script>
</body>

usage

vanilla js

works anywhere — no framework required.

ts

import { mount } from 'glowmoji';

// sets innerHTML, auto-blinks, click-to-blink
const stop = mount(document.getElementById('avatar'), { name: 'Alice' });

// with a click animation
const stop = mount(el, { name: 'Bob' }, { onClickAnimation: 'hurt' });

// or manually for more control
import { glowmoji, autoBlink, blink } from 'glowmoji';
const { svg } = glowmoji({ name: 'Alice', transparent: true });
el.innerHTML = svg;
el.addEventListener('click', () => blink(el));
const stop = autoBlink(el);

click animations

pass onClickAnimation to mount() or the React component to change what happens on click.

ts

import { mount, hurt, kiss } from 'glowmoji';

// via mount
mount(el, { name: 'Alice' }, { onClickAnimation: 'kiss' });

// or call directly
hurt(container);
kiss(container);

react

import from the /react subpath for a typed component.

tsx

import { Glowmoji } from 'glowmoji/react';

// basic
<Glowmoji name="Alice" />

// with options
<Glowmoji name="Alice" size={48} shape="circle" color="#a78bfa" />

// with click animation
<Glowmoji name="Alice" onClickAnimation="hurt" />

// render as <img> instead of inline SVG
<Glowmoji name="Alice" asImg />

requires React 17+. works with whatever version your project already has.

playground

type a name, pick a color, change the shape. click any avatar to see the animation.

color

click animation

sizes

name variations

api

options

prop	type	default	description
name	`string`	—	seed for the avatar. same name = same result
size	`number`	`64`	width & height in px
shape	`Shape`	`rounded`	square · rounded · circle
color	`string`	—	hex color override. glow is derived automatically
transparent	`boolean`	`false`	skip the dark bg — use on light pages

click animations

value	description
blink	default — a quick blink
hurt	X eyes, round open mouth, slight squish
kiss	one eye winks, ε pucker lips, floating heart

return value

ts

interface GlowmojiResult {
  svg:     string;   // raw SVG markup
  dataUri: string;   // data URI for <img src>
  palette: Palette;  // colors that were used
}

react props

prop	type	description
asImg	`boolean`	render as <img> instead of inline SVG
onClickAnimation	`ClickAnimation`	blink · hurt · kiss
className	`string`	class on the wrapper element
style	`CSSProperties`	inline styles on the wrapper