Pet Picker

Let visitors click the pet and choose their own.

Install

Pulls in web-pet and the shadcn Popover if you do not have them yet.

bunx --bun shadcn@latest add https://webpets-flame.vercel.app/r/pet-picker.json

Usage

import { PetPicker } from "@/components/pet-picker";

<PetPicker defaultAnimal="deno" hoverMessage="click me" />

The pet is clickable. The menu lists every animal in the manifest, the choice is saved in localStorage, and None hides the pet behind a small trigger. Ship the GIFs for every animal you offer.

<PetPicker
  animals={["deno", "fox", "chicken", "totoro"]}
  colors={{ fox: "white" }}
  defaultAnimal={null}
  storageKey="my-site:pet"
/>

Props

Prop	Type	Default	Description
animals	string[]	all	Animals offered in the menu.
colors	Record<string, string>	first color	Color to use per animal.
defaultAnimal	string \| null	animals[0]	Shown before a choice is made. null shows only a small trigger.
storageKey	string \| null	"webpet:animal"	Where the choice is saved in localStorage. null disables it.
onChange	(animal: string \| null) => void	—	Fires on every pick.
…WebPetProps		—	Everything else is passed to WebPet.