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 + MobileBetaFeedback

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Why it is here. Used by Orochia, Orazaka, Yasakia, krizaka.com.

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

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

Installation

Install

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

Styles

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

Import

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

Examples

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	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" \| "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	Default	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.

Accessibility

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.

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), 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.

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub