Composants
Waveform
The bars of a sound, drawn on their own: decorative by default, in the brand's accent or a quiet tone, breathing gently while it plays and still under reduced motion.
import { Waveform } from "@krizaka/ui/waveform";Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.
Pourquoi il est là. Used by krizaka.com.
Quand l’utiliser
- On a card or a banner, to show that a product speaks: a voice, a sound, a call.
- Beside a sound's title when the shape is the identity (a voice note, a podcast episode) and nothing is seekable.
Quand ne pas l’utiliser
- For a sound a person plays, seeks or speeds up.À la place : Audio player
- For a figure on its own, with its trend.À la place : Stat
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { Waveform } from "@krizaka/ui/waveform";Exemples
On a card
A voice's waveform beside its name, moving while the sound plays.
Sizes and tones
Small, medium and large, in the accent and in a neutral tone.
Props
A decorative waveform: the bars of a sound, in the accent or a neutral tone, breathing gently while it plays.
| Prop | Type | Défaut | Description |
|---|---|---|---|
bars | number | 32 | How many bars. Default 32. |
className | string | — | Classes merged last. |
label | string | — | When given, it is an image named by this (“Voice note, 0:42”); otherwise decorative and hidden from assistive technology. |
peaks | readonly number[] | — | The peaks, between 0 and 1, as many as you like (resampled to bars). Without them: a flat line. |
playing | boolean | false | Moves gently while true (a sound playing); still otherwise. |
size | "sm" | "lg" | "md" | — | sm · md (default) · lg: the height of the drawing. |
tone | "neutral" | "accent" | — | accent (default, the brand's colour) · neutral (a quiet line beside text). |
Accessibilité
- Decorative by default:
aria-hidden, so a screen reader skips it. With alabelit is an image named by that label. - The motion is a gentle breathing of the bars, declared only under
prefers-reduced-motion: no-preference; it pauses when the waveform leaves the screen. - Colour comes from the tokens (the accent or the neutral border), never a fixed value: it reads in dark and light.
Bonnes pratiques
- Leave it decorative (no
label) when the text beside it already says what it is; give it alabelonly when the shape carries information. - Pass the peaks of the real sound when you have them; without peaks it is a flat line, which reads as a quiet placeholder.
- Move it only while the sound plays (
playing): a still waveform is the calm default.
Composants liés
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