Usage

Render a pet and see it move.

Basic

Move the cursor over the dog to see the hover action and bubble.

Whole Page

The default position="fixed" walks along the bottom of the viewport. Put it in your root layout once.

app/layout.tsx

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

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <WebPet animal="fox" color="white" />
      </body>
    </html>
  );
}

Inside a Box

Use position="absolute" inside a relative container. The pet roams that box instead.

<div className="relative h-64 overflow-hidden">
  <WebPet animal="chicken" color="brown" position="absolute" />
</div>