Flock

The Krizaka birds standing on a stage, alive: each at ease in character, two neighbours glancing at each other, the pigeon carrying its parcel across, a bird looking up when you come near or tap it — and, with scenes, a short scene for each bird.

Web · ✓Mobile · n/aDesktop · ✓BetaBlocks

import { Flock } from "@krizaka/ui/flock";

Web only — React, from @krizaka/ui/flock. Beta: its API may still change in a minor version.

Mobile · n/a. A decorative stage for a public page's first screen; an app screen speaks with MascotState. → Mascot state

Why it is here. Used by krizaka.com.

When to use

On a company's home, where the flock is the scene: five birds on a ridge, under the words.
On an about or story page, where the birds are the subject and a still drawing would feel dead.

When not to use

A bird that answers a state (a wait, an error, an empty list).Use instead: Mascot state
One bird at ease inside a card or beside a rule.Use instead: Mascots
The flock as a still plate with its promises.Use instead: Bird plate

Installation

Install

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

Styles

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

Import

import { Flock } from "@krizaka/ui/flock";

Examples

The flock on its ridge

Five birds across a stage, each at ease; neighbours glance, the pigeon delivers.

The scenes

The owl reads, the flamingo and the lovebird talk, the crane bows, the beaver taps a log, the magpie takes a shiny point, and the pigeon hands its parcel over.

Two birds

The owl and the duck: they look at each other now and then.

Props

The flock on its stage, alive. Decorative (aria-hidden): put the words beside it. Each bird idles in character; every few seconds two neighbours glance at each other; every half minute the pigeon carries its parcel to another bird and returns; a bird looks up when you come near. All of it pauses off screen and in a hidden tab, and the flock is still under prefers-reduced-motion.

Prop	Type	Default	Description
`birds`required	`readonly FlockBird[]`	—	The birds on the stage.
`active`	`"falcon" \| "owl" \| "duck" \| "flamingo" \| "pigeon" \| "lovebird" \| "crane" \| "magpie" \| "beaver" \| null`	`null`	A bird the page points at (a product the reader is on): it looks up and jumps once each time it changes.
`courier`	`boolean`	`true`	The pigeon, when the flock has one, carries its parcel across to another bird and comes back. Default `true`.
`glance`	`boolean`	`true`	Two neighbours look at each other now and then. Default `true`.
`greet`	`boolean`	`false`	The birds greet the reader once as the flock first comes into view: each jumps in turn, left to right.
`random`	`(() => number)`	`Math.random`	The source of chance (default `Math.random`): give it a fixed one in a test.
`ratio`	`number`	`16 / 9`	The stage's shape, width over height (default 16 / 9). It keeps its ratio at any width, so the birds keep their places.
`react`	`boolean`	`true`	A bird looks up when the pointer comes near, and jumps a little when tapped. Default `true`.
`scenes`	`boolean`	`false`	Scenes, true to each bird's promise: the owl reads a book, the flamingo and the lovebird talk with a speech mark, the crane steps and bows, the beaver taps a log, the magpie takes a shiny point, the duck builds, the falcon scans — and the pigeon hands its parcel over, which the receiver opens in its own way. One at a time, at random. Default `false`.
`tempo`	`number`	`1`	How lively the moments are: 1 is calm (default), 2 doubles how often neighbours glance and the pigeon delivers.
`tone`	`"brand" \| "own"`	`brand`	The birds' colours: the host's accent (`brand`, default) or the Krizaka story's (`own`).

Accessibility

Decorative (aria-hidden): it never carries information; put the words beside it.
Under prefers-reduced-motion the birds are still: no idle motion, no glance, no delivery, no scene, no reaction.
It waits for the page to settle (html[data-motion="settling"]) and pauses off screen (the stage is a data-motion-scope).
The moments pause while the flock is off screen and while the tab is hidden; there is no frame loop.

Best practices

One flock per page, under the words and never behind them: the birds are the scene, not the message.
Give the stage the ratio of its backdrop (ratio) and the birds' places in percent: they keep their positions at any width.
Keep each bird to its job: the falcon watches, the owl reads, the duck builds, the flamingo answers, the pigeon delivers.
Make it the page's own: active is the bird of the product the reader is on (it looks up and jumps), greet has every bird jump once as the flock comes into view, tempo makes the moments more frequent.
scenes gives each bird a short scene true to its promise (the owl reads a book, the flamingo and the lovebird talk, the crane bows, the beaver taps a log, the magpie takes a shiny point, the duck builds, the falcon scans) and has the pigeon hand its parcel over, which the receiver opens in its own way. One at a time, at random, with long pauses now and then: leave tempo near 1 to 1.7.
Turn a moment off with glance={false}, courier={false} or react={false} on a page that already moves.

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