Screen Pet
A tiny character lives at the bottom of your site: walks, sits, sleeps, chases your cursor and talks.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Cat · Orange tabby with a waving tail. kind="cat"
A small state machine (walk / sit / sleep / chase / jump) with speech bubbles. It trots over when your cursor comes near the floor and jumps when clicked. Pick cat, robot or blob, or bring a sprite.
Installation
$ npm i @guetix/screen-pet
Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.
vanilla.ts · any framework
import { screenPet } from "@guetix/screen-pet";
const pet = screenPet({ kind: "cat", phrases: ["hi!", "nice site"] });
pet.say("welcome back!");
// custom character: screenPet({ sprite: "<svg>…</svg>" }) or an image URLUsage
example.tsx
import { ScreenPet } from "@/components/guetix/screen-pet";
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<>
{children}
<ScreenPet fullscreen kind="robot" color="#94a3b8" />
</>
);
}Personal sitesKids & educationSaaS mascotsEaster eggs
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01Characters are inline SVG with CSS-animated legs, so it stays crisp at any size and needs no assets.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| kind | "cat" | "robot" | "blob" | "cat" | Character. |
| sprite | string | — | Your SVG markup or image URL. |
| phrases | string[] | — | What it says when clicked. |
| color | string | — | Body color. |
| size | number | 64 | Height (px). |
| speed | number | 50 | Walk speed (px/s). |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- The pet is a focusable button (Enter to say hi).
- Reduced motion: it just sits.