Get started
Characters

Mascot

Over thirty object mascots, from a coffee mug to a dumbbell, that blink, follow the pointer and flow into each other.

Preview

Installation

Terminal
npx @usefluid/cli add mascot

Usage

Mascot.tsx
import { Mascot } from "./Mascot";
import { objects, pickObject } from "./objects";

<div style={{ width: 120, height: 120 }}>
  <Mascot object="mug" mood={saved ? "happy" : "idle"} follow label="Lume, our helper" />
</div>

const object = pickObject("we run a small coffee shop");
<Mascot object={object} color="var(--fluid-accent)" />

Your own object

Mascot
const kettle = {
  id: "kettle",
  name: { en: "Kettle", pt: "Chaleira" },
  d: "M30 50H90V100H30Z",
  eyes: { x: 60, y: 74, gap: 12, size: 1 },
  color: "#0d9488",
  words: ["tea", "chá"],
};
<Mascot object={kettle} />

Draw it filled in a 120 x 120 box. Parts must not overlap: where two parts overlap, the overlap becomes a hole. Put eyes on the largest flat area.

Colours

Each object comes with its own colour. To change it:

Mascot
<Mascot object="mug" color="#ff5a1f" />

<Mascot object="mug" color="var(--fluid-accent)" />

<Mascot object="mug" color="var(--brand-500)" />

Any CSS colour works: hex, rgb(), oklch() or a variable from your theme. The colour change is animated, so you can tie it to state, for example green when a payment succeeds. The eyes are holes cut out of the shape and show the background behind the mascot.

API reference

PropTypeDefaultDescription
objectstring | MascotObject—An id from objects (mug, dumbbell, controller, plant...) or your own object. Changing it flows one into the other.
mood"idle" | "happy" | "surprised" | "sleepy" | "curious""idle"Each mood changes the eyes and the pose.
colorstringthe object's colourPass var(--fluid-accent) to wear your brand.
followbooleanfalseThe eyes follow the pointer, and on touch look at each tap.
look{ x, y }—Where the eyes look, from -1 to 1.
stillbooleanfalseNo breathing or blinking.
labelstring—Accessible name. Without it the mascot is decorative.
classNamestring—It fills its box.

Keyboard and screen readers

Decorative unless labelled; with label it is an image with that name. Reduced motion stops breathing, blinking and the pose changes. Never the only way information is given.

How it is made

Each object is one silhouette in a 120 box with its own eye spot. Changing the object is Metamorph: the outline flows from a mug into a dumbbell. The eyes are cut out of the body by a mask and move on springs, and each mood changes the pose: it stretches when surprised, sinks when sleepy, tilts when curious and hops when happy.

For your agent

For your agent

Add Mascot to my project with the Fluid library. Give my product a mascot with Mascot. Pick the object that matches what we do with pickObject, wear our accent colour and tie its moods to real events. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.