A pixel-art companion for your website

Your website, with a little companion.

It lives on the page, looks around and remembers you. Give it something to eat, take it for a walk or let it grumble to itself.

Try the demo Add it to your site

One line of code · Local memory · No dependencies

TV · skin orange

Here's the demo

A cookie.
Then we'll see.

Feed it, give it a cuddle or tease it and see what happens. Mood and energy change, so the same gesture can get a different reaction. Choose an activity: the menu steps aside and you play with the monster right on the page.

Right now

Waiting for the monster…

Mood—

Fullness—

Energy—

It's on its way. Pick something to offer it.

Something to eat

Or something to do

Jumps, flights and other unnecessary things

You can tell it your name, too

Your name stays in this browser, on this site. It can recognise you when you come back. No account needed.

Its lines are written, not generated on the spot. This demo has quite a few, including comments and reactions: it should have something different to say, even when you give it another cookie.

Look who's here.

There were three to start with. Now there are many more: click a character and you'll see it wander around the page. This changes its shape; you can choose the outfit afterwards.

Everyone has a little obsession: you'll find theirs under their name. Poses and colours show how they're feeling, too. Gianni has dedicated drawings for feeling sad or unwell.

Behind the pixels

It all started
with a mixer.

My Little Monster’s characters were created with Pixel Art Sprite Mixer by KingBell. Finding his tool sparked the idea for these little companions to bring to the web.

The mixer lets you combine shapes, outfits and colours to create pixel-art characters and export them as animated sprite sheets. Thank you, KingBell, for giving them a face.

Try Pixel Art Sprite Mixer ↗

What happens as you browse.

The monster perches on the edges of page elements. As you scroll, it has to find somewhere to stand. That's where the jumps, walks and unsolicited comments come from.

Searches and collects

Give it a word and it'll search the page. On a walk, it finds buttons, letters and small objects: it takes a copy, and you decide whether to keep it or throw it. The real thing stays where it is.

Remembers you

It can ask your name. Mood, fullness, energy and affection change with your choices and stay saved in this site's browser storage.

Has its own habits

Pogo looks for an excuse to jump, Utini collects things that might come in handy, and Gianni likes to tell you he's Gianni. Try a walk with a different character.

Take it to your website.

Choose a character and size, then copy the snippet. Use the included lines or upload your own file: that's where you give it something to say about your site.

Choose one of the two tabs above. You can switch whenever you like.

One companion, one line.

Usa il personaggio TV con le impostazioni essenziali. Memoria, umore e widget funzionano già così. Le frasi incluse sono generiche e non portano ai siti di Matteo; puoi cambiare tv con qualsiasi altro character del catalogo.

<script src="https://www.matteobononi.it/my-little-monster/my-little-monster.js" data-character="tv" defer></script>

You decide how it behaves.

The preview shows the shape and outfit. The settings below write the code you'll copy; the monster on this page keeps doing its own demo.

Monster language Italian by default. Changes menus, games and included lines; your custom phrase file stays as you write it. Starting character

Add more characters to the widget

The starting character is already included. Select the others you'd like to choose from.

Starting outfit With automatic changes enabled, it can wear other outfits too. Widget position Movement frequency Size · 2 Change outfit now and then Can ask and remember your name Mood and activities in the widget Phrase file URL Optional · you can create it below

PREVIEW

Your monster

Choose a character and an outfit.

Preview another mood

This only changes the preview. On your site, interactions change the mood.

Want to write its lines?

What it'll say on your site.

Aggiungi battute e, se vuoi, un link. Quando scarichi il JSON, lo snippet si imposta per usarlo: carica anche phrases.json sul tuo sito.

JSON file preview

Want to see all the options?Open the reference snippetThe main settings, ready to copy.

<script
  src="https://www.matteobononi.it/my-little-monster/my-little-monster.js"
  data-characters="*"
  data-character="tv"
  data-language="it"
  data-skin-cycle="on"
  data-widget-position="bottom-right"
  data-scale="2"
  data-platforms="[data-mlm-platform]"
  data-activity="medium"
  data-remember-name="on"
  data-narrative="on"
  defer>
</script>

Per usare un tuo frasario, aggiungi data-phrases="./phrases.json" e carica quel JSON sul tuo sito. Il configuratore può preparare entrambi.