WebPets
Menu

Installation

Add the component and the GIFs it needs.

Setup

  1. Add the component

    bunx --bun shadcn@latest add https://webpets-flame.vercel.app/r/web-pet.json
    • components/web-pet.tsxcomponent
    • lib/web-pet-engine.tslib
    • lib/pet-manifest.tslib

  2. Add the GIFs

    Pick an animal and color in the playground and download the zip. Unzip it into public.

    public/
└── media/
    └── dog/
        ├── red_idle_8fps.gif
        ├── red_walk_8fps.gif
        └── …
    Open Playground

  3. Render it

    import { WebPet } from "@/components/web-pet";

<WebPet animal="dog" color="red" />

Good to Know

The GIFs are not part of the registry item, so the install is small and you only ship the animals you use. Set mediaBaseUrl if they live on a CDN instead of public.