Mascots
The Krizaka flock: five birds (falcon, owl, duck, flamingo, pigeon) in five moods, drawn in the product's brand colours.
Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- 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).
Quand ne pas l’utiliser
Installation
Installer
npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { Mascot, MASCOT_BIRDS, MASCOT_MOODS } from "@krizaka/ui/mascots";Exemples
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 | Défaut | 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. |
Accessibilité
- 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.
Bonnes pratiques
- 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.
Composants liés
Générée depuis le code de @krizaka/ui 2.3.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur 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.