Achievement

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

Installation

Installer

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

Styles

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

Importer

import { Achievement, AchievementList, Emblem } from "@krizaka/ui/achievement";

Exemples

Props

Accessibilité

• AchievementList is an ordered list; replaced is a del element, read as removed text.
• Emblems and icons are decorative. The badges arrive once in a stage and never under prefers-reduced-motion.

Bonnes pratiques

• The title is the outcome in a few words; replaced what it removed — struck through, so the change reads at a glance.
• Say a locked step in its badge (“Locked”), not only by the muted colour.
• Use Emblem (sword, mirror, jewel) as the glyphs of a set, or your own icons from @krizaka/icons.

Composants liés

• Goal gaugeA goal counted in steps — 6 of 10 backers, 3 dares done, 3 seats left: a meter whose reached steps light one by one (or whose spent ones drain) when its chapter plays.
• BadgeA short status or label: a tone, two sizes, an optional dot that can pulse.
• Argument cardA compact card that argues — about a third of a full card: who (icon, name, the bird in the corner), the trap in one line, facts and one short action; the long version lives on a detail page or unfolds in place.
• Scroll stageThe conductor of a told page: chapters (Scene) that play their entrance once, in order, as they scroll into view — the visual, then the announcement, then the words — with one slow loop each, running only while on screen.

Générée depuis le code de @krizaka/ui 2.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub