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

• Mobile · ✗ à construire. It comes with the native paper roles of the Cahier. issue #421

Pourquoi il est là. The tool sites (krizaka/krizaka-ui#548): the motion lab's live demo, then the heroes of the other tool sites.

Installation

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

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

import { SpeedLines } from "@krizaka/ui/speed-lines";

Exemples

Props

Accessibilité

• The lines are decoration: the SVG is hidden from assistive technology, the content in front is the real element.
• The lines are static; the optional pulse is removed under prefers-reduced-motion.
• The ink is a quiet text colour at low opacity, so it never competes with the content for contrast.

Bonnes pratiques

• One burst per screen, behind one element; the lines are quiet by design (a fraction of the text's ink).
• Keep clear large enough that the lines never touch the text: the content is always the first thing read.
• Use horizontal behind a live demo that moves, and radial behind a title that arrives.
• Leave animated off unless the page needs a pulse: it stops under reduced motion anyway.

Composants liés

• Section backdropThe backdrop of a page section: the brand's gradient, a light dome, an optional perspective grid and a blurred foreground.
• DoodleA doodle in the margin ink of the Cahier: an arrow pointing at a block, a circled word, a star, a wavy underline or a small sketch of the site's bird — inline SVG, the same on the server and on the client. Beside a block on a wide screen, or in the flow around a real word.
• Versus cardAn arcade « character select » card: two subjects face to face, a bird as each fighter, stat bars from real data, and a « VS » between them.

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