Esplora davvero
Segue gli elementi della pagina. Se gli chiedi di esplorare, si avvicina a un titolo, un bottone o un link e lo commenta senza attivarlo.
Una mascotte pixel-art per il tuo sito
Il tuo sito, con un piccolo compagno.
Abita la pagina, osserva quello che trova e si ricorda di te. Dagli qualcosa da mangiare, fallo esplorare o lascialo brontolare per conto suo.
Una riga da includere · Memoria locale · Nessuna dipendenza
TV · skin orange
Una creatura, non un adesivo.
Scegli le superfici su cui può camminare. Da lì gira, salta, riposa e qualche volta commenta quello che vede.
Si ricorda di te
Può chiederti il nome. Umore, sazietà, energia e affetto cambiano con le tue scelte e restano salvati nel browser di questo sito.
Ha più facce
Tre personaggi, vestiti diversi e varianti visive per rabbia, tristezza, malessere ed euforia. Anche il passo segue l’umore.
Laboratorio aperto
Prova a conoscerlo.
Il mostro è già su questa pagina. Cliccalo per aprire il suo widget: lì trovi cibo, giochi e i suoi indicatori. Oppure prova qualche gesto qui sotto e guarda cosa cambia.
01 / INTERAZIONIProva più volte: può reagire diversamente
Prima il biscotto.
Poi vediamo.
Il cibo aumenta la sazietà; le attività cambiano umore, energia e rapporto con te. Quando è troppo pieno, rifiuta altri bocconi.
Nel widget trovi anche torta, gelato, ciambella, lecca-lecca e una sfida.
03 / MEMORIA
Come ti chiami?
Prima o poi te lo chiede lui. Puoi anche dirglielo adesso: alla prossima visita lo ricorderà solo in questo browser.
04 / ASPETTO & SCENA
Non sta mai fermo.
Cambia personaggio e vestito, oppure fagli commentare qualcosa: durante l’esplorazione nota i titoli, i link e i bottoni che vede.
Portalo sul tuo sito.
La riga pronta funziona subito. Se scegli il suo carattere, le frasi e come si muove, diventa davvero parte del tuo sito.
Scegli una delle due schede qui sopra. Puoi cambiare strada quando vuoi.
Vuoi vedere tutte le possibilità?Apri l’esempio completoUno snippet con tutte le opzioni, pronto da esplorare e copiare.
<script
src="https://www.matteobononi.it/my-little-monster/my-little-monster.js"
data-characters="tv, dyno, utini"
data-character="tv"
data-skin="orange"
data-phrases="./phrases.json"
data-skin-cycle="on"
data-widget-position="bottom-right"
data-scale="4"
data-platforms="[data-mlm-platform]"
data-activity="medium"
data-remember-name="on"
data-narrative="on"
defer>
</script>data-phrases usa un file JSON caricato sul tuo sito; togli la riga se vuoi usare le frasi generiche già incluse.
Una mascotte, una riga.
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 dyno o utini.
<script src="https://www.matteobononi.it/my-little-monster/my-little-monster.js" data-character="tv" defer></script>Decidi tu come si comporta.
Configura personaggi, movimento e posizione. Aggiungi un tuo file JSON solo se vuoi frasi e link personalizzati: la demo usa il suo file, non incluso dallo script pubblico.
Personaggi disponibili · seleziona quelli che vuoi nel widget
ANTEPRIMA
Il tuo mostro
Scegli un personaggio e un vestito.
Qui cambi solo l’anteprima: sul sito l’umore cambia con le interazioni.
Crea le frasi della mascotte.
Aggiungi battute e, se vuoi, un link. Quando scarichi il JSON, lo snippet si imposta per usarlo: carica anche phrases.json sul tuo sito.
Anteprima del file JSON