Mascots

The Krizaka flock: seven birds (falcon, owl, duck, flamingo, pigeon, lovebird, crane) in five moods, drawn in the product's brand colours — and the phoenix, the comeback.

Web + MobileBêtaRetours

Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. Used by Orochia, Orazaka, Yasakia, krizaka.com.

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

In the middle of working content (a list row, a toolbar, a form): a mascot is for a moment, not decoration.À la place : Badge
For a short wait of a second or two.À la place : Spinner
To announce a result that needs no celebration.À la place : Toast

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { Mascot, MASCOT_BIRDS, MASCOT_MOODS, Phoenix } from "@krizaka/ui/mascots";

Exemples

Moods

One bird in its five moods: welcome, thinking, success, empty, error.

welcome

thinking

success

empty

error

The flock

The seven birds in the brand colours of the host.

falcon

owl

duck

flamingo

pigeon

lovebird

crane

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

An introduction

The lovebird celebrates a mutual interest: two people who chose each other meet.

You are both interested

Your introduction is open for seven days.

The phoenix

The sixth figure: a comeback — a relaunch, a recovered account — in its own colours or the brand's.

Listening

The crane stands still and listens: a calm opening, the words and one action beside it.

Take your time

Say it in your own words. One question at a time.

Props

Mascot

One of the seven 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" \| "lovebird" \| "crane"`	`owl`	Which bird of the flock: `falcon` (watch, security), `owl` (reading, documents), `duck` (building, code), `flamingo` (answers, support), `pigeon` (delivery, notifications), `lovebird` (introductions, two people who meet), `crane` (listening, a calm moment).
`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.

Phoenix

The phoenix: the comeback, beside the five birds of the flock (Mascot). Decorative unless titled.

Prop	Type	Défaut	Description
`animated`	`boolean`	`true`	A slow float and a breathing core. Off with `false`; always off under `prefers-reduced-motion`.
`size`	`number`	`120`	Width and height in pixels.
`title`	`string`	—	An accessible name (the phoenix becomes an image); without it, it is decorative.
`tone`	`"brand" \| "own"`	`own`	`own` (default): the violet wing and the gold wing of the Krizaka story. `brand`: the host's accent and accent-2.

Accessibilité

Decorative by default (aria-hidden): the text next to it carries the meaning. With title it becomes an image with that name.
Every gesture (idle bob, blink, wave, dots, hop) stops under prefers-reduced-motion, and with animated={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), the lovebird introduces (matches, two people who meet), the crane listens (a quiet moment, someone who takes their time).
The phoenix (Phoenix) does no job: keep it for a comeback — a relaunch, a recovered account, a second chance — never as one more helper.
Leave tone="brand" in a product: the bird wears the product's accent; own is for the Krizaka story.
The words stay beside it (a title, a line, an action): the mascot never carries the message alone.

Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub