The Krizaka valley at dusk — peaks, a phoenix over a river of two flames, trees of light and the flock at work: a decorative backdrop in its own colours or in the host brand's.

WebBetaBlocks

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

When to use

Behind the end of a told page or a home's first screen, under the last words.
A product's about page, in its own accents (tone="brand", flock={false} for a calmer one).

When not to use

Behind a section's content: the brand's gradient and grid are the section backdrop.Use instead: Section backdrop
In a working screen, or behind text that must be read.

Installation

Install

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

Styles

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

Import

import { Landscape } from "@krizaka/ui/landscape";

Examples

A page's end

The valley behind the last words, faded into the surface.

Built in the open, in Montréal.

In the brand's colours

tone="brand" without the flock: the sky and the peaks in the host's accents.

Props

The Krizaka landscape: a decorative backdrop for a hero or a page's end (aria-hidden).

Prop	Type	Default	Description
`animated`	`boolean`	`true`	The slow loops (the sun, the stars, the flames, the birds). `false` holds the first frame; always held under `prefers-reduced-motion` and while off screen (with `MotionObserver`).
`fade`	`boolean`	`true`	Fades the bottom into the page's surface.
`flock`	`boolean`	`true`	The flock at work in the valley (hidden under 1024 px wide either way).
`phoenix`	`boolean`	`true`	The phoenix and its river of two flames.
`position`	`"absolute" \| "relative"`	`absolute`	`absolute`: fills its positioned parent, anchored at the bottom (a backdrop). `relative`: a block in the flow — give it a height.
`tone`	`"brand" \| "own"`	`own`	`own`: the Krizaka dusk (indigo, cyan and magenta peaks). `brand`: the sky and the peaks in the host brand's accents (`.brand-<id>`). The birds and the phoenix keep their own colours.

Accessibility

Decorative (aria-hidden): it never carries information.
Every loop holds its first frame under prefers-reduced-motion, with animated={false}, and while off screen.

Best practices

Place it at the bottom of a positioned parent with room under the words; it fades into the surface.
Hold it still (animated={false}) on a page that already moves; it pauses off screen with MotionObserver.
The birds are hidden under 1024 px: on a phone the valley stays calm.

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

Landscape