Bird plate

The flock as a naturalist's plate: each bird a numbered figure, a hairline from the drawing to its caption, and the caption is its promise as the film says it.

Web · ✓Mobile · ✗ à construireBureau · ✓BêtaBlocs

import { BirdPlate } from "@krizaka/ui/bird-plate";

Plate I · The flockfive promises, as the film says them

fig. 1 · the falcon keeps watch: security comes first.
fig. 2 · the owl reads every page and knows every face.
fig. 3 · the duck builds, line by line, in the open.
fig. 4 · the flamingo answers, and the payment follows.
fig. 5 · the pigeon delivers, every time.

Web uniquement — React, depuis @krizaka/ui/bird-plate. Bêta : son API peut encore changer à une version mineure.

Mobile · ✗ à construire. An app's welcome or empty state can carry its bird as a plate; it comes with the native paper roles. issue #421

Pourquoi il est là. The Cahier (ADR-004): the flock and each product's bird with its promise on www.krizaka.com, then /story and the product sites.

Quand l’utiliser

The promises of the family on a home or a story page: the five birds of the film, numbered.
The subject of a page, one bird large with its promise (layout="single"): the owl on a reading product.

Quand ne pas l’utiliser

A rule said in a sentence inside a card or a section.À la place : Mascot quote
A bird reacting to a state (a wait, an error, an empty list).À la place : Mascot state

Installation

Installer

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

Styles

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

Importer

import { BirdPlate } from "@krizaka/ui/bird-plate";

Exemples

The flock

Plate I: the five birds of the film, each numbered with its promise.

Plate I · The flockfive promises, as the film says them

fig. 1 · the falcon keeps watch: security comes first.
fig. 2 · the owl reads every page and knows every face.
fig. 3 · the duck builds, line by line, in the open.
fig. 4 · the flamingo answers, and the payment follows.
fig. 5 · the pigeon delivers, every time.

One bird

layout="single": one bird, large, its caption beside it.

fig. 2 · the owl reads every page and knows every face.

Props

A naturalist's plate of the flock: numbered figures, a leader line from each bird to its caption, its promise.

Prop	Type	Défaut	Description
`figures`requis	`readonly PlateFigure[]`	—	The figures, in order: each is numbered `fig. n`.
`animated`	`boolean`	`false`	The birds' idle loops (they pause off screen and stop under reduced motion).
`figureLabel`	`string`	`fig.`	The word before the number.
`layout`	`"grid" \| "single"`	`grid`	`grid` — the figures side by side (two to five); `single` — one large figure, its caption beside it.
`separator`	`string`	`·`	The separator between the figure number and its label.
`start`	`number`	`1`	The first figure's number (a page that continues a plate).
`subtitle`	`ReactNode`	—	One line under the title.
`title`	`ReactNode`	—	The plate's title: `Plate I · The flock`.

Accessibilité

The plate is a figure with its title as figcaption; the figures are an ordered list, each caption real text.
The birds are decorative (aria-hidden): the caption says who they are and what they promise.
With animated, the loops pause off screen and stop under prefers-reduced-motion.

Bonnes pratiques

One bird per subject, its promise word for word as the film says it (the brand reference, §2): never a new promise line.
Keep the birds' own colours (tone="own") on a plate; brand only when the plate sits in a product's world.
Number from where the page left off (start): a story that continues Plate I starts at fig. 6.
The birds stay still by default; turn animated on for one plate per page at most.

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