Section backdrop
The backdrop of a page section: the brand's gradient, a light dome, an optional perspective grid and a blurred foreground.
Web only — React, from @krizaka/ui/section-backdrop. Beta: its API may still change in a minor version.
Why it is here. Used by Orazaka, Yasakia, krizaka.com.
When to use
- Behind the hero of a marketing page (
grid, the dome). - Behind a closing call to action (
direction="up"). - To chain sections: each one ends on the page surface where the next begins.
When not to use
- Inside an app's screens: a working view needs a calm surface.Use instead: Page header
- To frame one item.Use instead: Card
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { SectionBackdrop } from "@krizaka/ui/section-backdrop";Examples
Hero
The gradient, the dome and the grid behind a headline.
Sovereign by design
Your models, your data, your servers.
Plain
The gradient alone.
The gradient alone, ending on the page surface.
Closing call to action
direction="up": the tint at the bottom.
Start in minutes.
Sequence
Two sections in a row.
One section
The next one
Depth of field
A blurred foreground behind the content (media).
Depth of field
Props
A section of a page in the Krizaka visual language: the brand's section gradient (--kz-brand-gradient-*, so it
follows the brand theme and dark/light), a light dome, an optional perspective grid and a blurred foreground. Every
section ends on the page surface, so consecutive sections glide from one tint to the next. Text on it reads at AA
(tested in
| Prop | Type | Default | Description |
|---|---|---|---|
animated | boolean | true | The very slow drift of the light (40 s); always still under prefers-reduced-motion. Default true. |
as | "div" | "footer" | "header" | "section" | section | The element: section (default), header, footer or div. |
direction | "down" | "up" | down | Where the brand tint sits: down (default) starts tinted and ends on the page surface; up ends tinted (a closing call to action). |
dome | boolean | true | The light dome above the content (the halo of a hero). Default true. |
grid | boolean | false | A floor of perspective lines under the content. Default false. |
media | ReactNode | — | A foreground illustration or image, blurred for depth of field, behind the content (decorative: hidden from assistive technology). |
Accessibility
- Every layer is decorative and hidden from assistive technology;
mediatoo. - The drift of the light stops under
prefers-reduced-motion.
Best practices
- One strong backdrop per screen: the hero, or the closing call to action — not every section.
- The colours come from the brand theme (
.brand-*): never pass a colour. - Keep text on it in the text roles (
text-fg,text-fg-secondary).
Related components
Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub