A mascot for anything.

Describe what you do and a mascot flows into the right object. It blinks, follows the pointer and changes its mood.

All of them

Click any of them and it flows into another object. Each one is a single outline, so any of them can become any other.

Use it

npx @usefluid/cli add mascot

import { Mascot } from "@/components/fluid/mascot/Mascot";
import { pickObject } from "@/components/fluid/mascot/objects";

const object = pickObject("we run a small coffee shop");

<Mascot object={object} mood={saved ? "happy" : "idle"} follow color="var(--fluid-accent)" />

Change the colour

Pass any CSS colour to color: a hex, an oklch() or a variable from your theme. The change is animated, so you can tie it to state, like green when a payment goes through. Pet and Bot take the same prop. Without it, they wear --fluid-accent, so changing that one variable recolours all of them. The eyes are holes in the shape and show the background behind them.

<Mascot object="mug" color="#ff5a1f" />
<Mascot object="mug" color="var(--brand-500)" />
<Mascot object="mug" color={paid ? "#16a34a" : "var(--fluid-accent)"} />

<Pet color="#7c3aed" />
<Bot color="#0ea5e9" state={state} messages={messages} />

:root {
  --fluid-accent: #ff5a1f;
}