Peetty
star

A little anime character,
right on your page.

Meet your new favorite little anime character. She walks along cards, hops between buttons, waves hello and curls up for a nap—all right on your web page.

Add her to a page View the source

She is on this page now. Drag her, click her, or hover for a few things to do.

Reading

A long article, a quiet afternoon.

Notes

Three ideas worth keeping.

Music

Something soft in the background.

Try typing here — she will make room.

Six original characters.

Each has her own look and her own pace. Switch here; your choice is remembered on this site.

A little more cute,
on every page.

Movement runs locally in the page. Nothing is sent anywhere to make her walk, jump or blink.

At home on the page.
She stands on the visible top edges of cards, images and buttons, follows them as you scroll, and falls to the next one when an edge disappears.
Out of your way.
Text and controls above an edge stay uncovered. She may sit on a field you are not using, but jumps off as soon as you focus it, and stays still while you type.
Make your own character.
A character is a JSON figure pack: layered vector parts on a standard skeleton, a palette, and expressions. The SDK animates any figure; recolour one by changing its palette.
Chat and memories. Unavailable
Chat with your own API key, customize her personality and memories, and bring them with you using import and export.

One script tag.

Add this to any page. Mark good spots with data-peetty="perch" and keep her away from an area with data-peetty="avoid".

<script src="https://peetty.idy.dev/sdk/peetty.global.js"
        data-peetty-auto data-figure="shiori" defer></script>

Options: data-figure (a character id such as miru or amara, or a figure JSON URL), data-size (height in pixels), data-activity (calm, normal, lively), data-language (en, zh), data-greet="false".

Install from GitHub Packages. Registry authentication is required.

npm install @idy/peetty --registry=https://npm.pkg.github.com
import { createPeetty } from '@idy/peetty'

const pet = createPeetty({ figure: 'koharu', activity: 'calm' })
await pet.mount()
pet.say('Hello!')

A few things to know.

Does she send anything from my page?

Finding edges and animating happen locally in your browser. No page content is sent anywhere for movement or animation.

What about reduced motion?

When your system asks for reduced motion, she stops walking and jumping and mostly sits where she is. You can still move her by dragging.

How do I make her go away?

Hover over her and choose Hide. On your own pages, call pet.hide() or pet.destroy().

Can I use the characters?

The code is MIT licensed. All Peetty characters are original and licensed CC BY 4.0, so you can use and adapt them with attribution.