Mascots
The Krizaka flock: five birds (falcon, owl, duck, flamingo, pigeon) in five moods, drawn in the product's brand colours.
Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.
When to use
- To welcome a person on a first screen or an onboarding step (
welcome). - While a long task runs and the person waits for it (
thinking), beside its progress. - When a long task has just finished well (
success): a generation, an import, a verification. - In an empty state the person reaches for the first time (
empty), above its title. - On a full-page or panel error, beside what went wrong and what to do (
error).
When not to use
Installation
Install
npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { Mascot, MASCOT_BIRDS, MASCOT_MOODS } from "@krizaka/ui/mascots";Examples
Moods
One bird in its five moods: welcome, thinking, success, empty, error.
The flock
The five birds in the brand colours of the host.
Signature colours
tone="own": each bird in its colours of the Krizaka story.
In an empty state
The owl above an empty list, the words and the action beside it.
No documents checked yet
Drop a contract or an invoice: every finding comes with the passage it rests on.
During a long task
The pigeon thinking beside the progress of a job.
Rendering the product video
Props
One of the five Krizaka birds in one mood — for the moments a product speaks to a person: a welcome, a long wait,
a success, an empty list, an error. Drawn in the host's brand colours by default (tone="own" for the story's).
| Prop | Type | Default | Description |
|---|---|---|---|
animated | boolean | true | A light idle motion and the mood's gesture. Off with false; always off under prefers-reduced-motion. |
bird | "falcon" | "owl" | "duck" | "flamingo" | "pigeon" | owl | Which bird of the flock: falcon (watch, security), owl (reading, documents), duck (building, code), flamingo (answers, support), pigeon (delivery, notifications). |
mood | "success" | "error" | "empty" | "welcome" | "thinking" | welcome | What the moment is: welcome (onboarding), thinking (a long task running), success (it is done), empty (nothing here yet), error (it failed). |
size | number | 96 | Width and height in pixels. |
title | string | — | An accessible name (the bird becomes an image); without it the mascot is decorative. |
tone | MascotTone | brand | brand (default): the host's accent, so the bird wears the product it is in. own: the bird's signature colours of the Krizaka story. |
Accessibility
- Decorative by default (
aria-hidden): the text next to it carries the meaning. Withtitleit becomes an image with that name. - Every gesture (idle bob, blink, wave, dots, hop) stops under
prefers-reduced-motion, and withanimated={false}. - The success and error badges are not the only signal: say it in words beside the bird.
Best practices
- One mascot per screen, and only at a moment that matters: a welcome, a wait, a success, an empty list, an error.
- Keep the bird's role: the owl reads (documents), the falcon watches (security), the duck builds (code), the flamingo answers (support), the pigeon delivers (notifications, packages).
- Leave
tone="brand"in a product: the bird wears the product's accent;ownis for the Krizaka story. - The words stay beside it (a title, a line, an action): the mascot never carries the message alone.
Related components
Generated from the code of @krizaka/ui 2.3.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Loader
A wait from start to end: nothing for the first instants, then the Krizaka glyph with its words, a percentage and an ETA, held long enough to read, ending on a check or a cross that is drawn and announced — and LoadingRegion, which hands a region over to a skeleton of its shape.
Progress
How far a task or a goal has come: a bar or a ring — with its words and time left, what is buffered ahead, its steps as segments, and a paused or failed state that says where it stopped.