Loading page…
Loading page…
The recovery phrase renders exactly once, in one component. Hidden masks every word behind blurred dots with a hold-to-reveal affordance; revealed shows the numbered grid; verify turns chosen slots into a quiz with choice chips and a danger shake on the wrong word.
The default whenever the grid is on screen — words masked, screen readers told only that the phrase is hidden. Nothing readable ships to a shoulder-surfer or a screenshot.
<SeedWordGrid words={seedWords} state="hidden" />--ch-surface--ch-border--ch-fg-muted--ch-radius-pillBlurred dot masks with the hold-to-reveal pill. Numbers stay visible so the user can orient before revealing.
Write-it-down mode: every word numbered in mono, two columns on mobile, three from sm up.
<SeedWordGrid words={seedWords} state="revealed" />--ch-surface--ch-border--ch-fg--ch-fg-faintThe only state in which the phrase is legible. Leaving the screen returns to hidden.
The backup quiz: words 4, 11, and 18 become dashed slots and the chips below mix the right answers with decoys. Placed words render primary; a wrong set flips the slots to danger and shakes.
<SeedWordGrid words={seedWords} state="verify" verifyIndices={[3, 10, 17]} choices={choices} />--ch-bg-raised--ch-border-strong--ch-fg-faintAll three slots open; every chip available.
<SeedWordGrid … verifyFilled={{ 3: "adjust" }} />--ch-primary--ch-bg-raised--ch-border-strongFirst slot filled with "adjust" — the used chip disables, the placed word reads primary.
That’s not the right word — try again.
<SeedWordGrid … verifyFilled={filled} verifyError />--ch-danger--ch-danger-muted--ch-border"abandon" placed at word 11 — danger borders, shake, and the retry line under the grid.
<SeedWordGrid … onChoiceSelect={placeWord} />--ch-primary--ch-danger--ch-border-strongInteractive — tap chips to fill the slots in order. A wrong set shakes and resets; the right set holds.
The revealed grid (first twelve words) under dark, light, and Harbor Mode — mono legibility holds on every layer.
<SeedWordGrid words={seedWords} state="revealed" />--ch-surface--ch-border--ch-fg--ch-fg-faint