Zero dependencies
Plain DOM and SVG, so it goes anywhere a webview does: React, Vue or Svelte web apps, Electron and Tauri desktop apps, or a hand-written HTML page. There are optional React bindings too.
@markwylde/pet · v0.1
A tiny friend
for your app.
Little animated pets for web apps, desktop apps and websites. They idle, blink, fly when you drag them, nap when you ignore them, and chat with whatever AI you plug in. Zero dependencies.
psst, the little guy is real. Drag him. Throw him. Click him.
What's in the box
Small library. Big personality.
Drag, throw, fly
Drag slowly and his propeller comes out. Drag fast and he goes turbo. Let go and he glides, bouncing off the edges of the screen.
Chats with any AI
Hand him an assistant function and he'll think, then talk while the reply streams in. Bring your own backend.
Awaitable everything
await pet.moveTo('center'), await pet.play('happy'), await pet.say('hi'). Script little scenes, and they stop cleanly when someone grabs him.
Naps in a dock
Leave him alone and he dives into a dock of your choice, like a tray icon. One click brings him bouncing back.
Accessible & typed
Keyboard-operable (arrow keys fly him), labelled for screen readers, follows reduced motion. TypeScript with docs on every option.
Meet the crew
Pick a pal. Or build your own.
Toasty isn't in the library. He's made with defineCharacter() in about 40 lines on this page.
17 animations
Every mood, beautifully blended.
Hover a card to preview it, or click to make the real one do it. Animations are pure functions of time, so they blend smoothly into each other, and you can add your own.
Five lines to a friend
Ridiculously easy to adopt.
Plug in a brain
He thinks. He talks. He streams.
Your assistant can return a string, a promise, or an async iterable of chunks. While it waits he looks busy,
while words arrive his mouth flaps, and when it's done he reacts with whatever { mood } you yield.
- Stop button aborts your request via
AbortSignal - Resizable balloon that sticks to him and stays on-screen
- History and size can persist in localStorage
Nap time
Out of the way when you're busy.
Give him a dock, any element, and hide() sends him diving into it. With autoHide he
tucks himself in after a while on his own. Click the dock to wake him.