Skip to content

Seed Grid

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.

Hidden

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.

hidden
Seed phrase hidden
Hold to reveal
<SeedWordGrid words={seedWords} state="hidden" />
  • --ch-surface
  • --ch-border
  • --ch-fg-muted
  • --ch-radius-pill

Blurred dot masks with the hold-to-reveal pill. Numbers stay visible so the user can orient before revealing.

Revealed

Write-it-down mode: every word numbered in mono, two columns on mobile, three from sm up.

revealed
  1. always
  2. actual
  3. agent
  4. adjust
  5. alley
  6. abandon
  7. affair
  8. access
  9. afraid
  10. actress
  11. accuse
  12. action
  13. adult
  14. alarm
  15. alpha
  16. absurd
  17. acoustic
  18. adjust
  19. afford
  20. advance
  21. across
  22. alley
  23. action
  24. abstract
<SeedWordGrid words={seedWords} state="revealed" />
  • --ch-surface
  • --ch-border
  • --ch-fg
  • --ch-fg-faint

The only state in which the phrase is legible. Leaving the screen returns to hidden.

Verify

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.

verify · empty
  1. always
  2. actual
  3. agent
  4. —
  5. alley
  6. abandon
  7. affair
  8. access
  9. afraid
  10. actress
  11. —
  12. action
  13. adult
  14. alarm
  15. alpha
  16. absurd
  17. acoustic
  18. —
  19. afford
  20. advance
  21. across
  22. alley
  23. action
  24. abstract
<SeedWordGrid words={seedWords} state="verify" verifyIndices={[3, 10, 17]} choices={choices} />
  • --ch-bg-raised
  • --ch-border-strong
  • --ch-fg-faint

All three slots open; every chip available.

verify · partial
  1. always
  2. actual
  3. agent
  4. adjust
  5. alley
  6. abandon
  7. affair
  8. access
  9. afraid
  10. actress
  11. —
  12. action
  13. adult
  14. alarm
  15. alpha
  16. absurd
  17. acoustic
  18. —
  19. afford
  20. advance
  21. across
  22. alley
  23. action
  24. abstract
<SeedWordGrid … verifyFilled={{ 3: "adjust" }} />
  • --ch-primary
  • --ch-bg-raised
  • --ch-border-strong

First slot filled with "adjust" — the used chip disables, the placed word reads primary.

verify · error
  1. always
  2. actual
  3. agent
  4. adjust
  5. alley
  6. abandon
  7. affair
  8. access
  9. afraid
  10. actress
  11. abandon
  12. action
  13. adult
  14. alarm
  15. alpha
  16. absurd
  17. acoustic
  18. adjust
  19. afford
  20. advance
  21. across
  22. alley
  23. action
  24. abstract
<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.

verify · live
  1. always
  2. actual
  3. agent
  4. —
  5. alley
  6. abandon
  7. affair
  8. access
  9. afraid
  10. actress
  11. —
  12. action
  13. adult
  14. alarm
  15. alpha
  16. absurd
  17. acoustic
  18. —
  19. afford
  20. advance
  21. across
  22. alley
  23. action
  24. abstract
<SeedWordGrid … onChoiceSelect={placeWord} />
  • --ch-primary
  • --ch-danger
  • --ch-border-strong

Interactive — tap chips to fill the slots in order. A wrong set shakes and resets; the right set holds.

Across themes

The revealed grid (first twelve words) under dark, light, and Harbor Mode — mono legibility holds on every layer.

  1. always
  2. actual
  3. agent
  4. adjust
  5. alley
  6. abandon
  7. affair
  8. access
  9. afraid
  10. actress
  11. accuse
  12. action
<SeedWordGrid words={seedWords} state="revealed" />
  • --ch-surface
  • --ch-border
  • --ch-fg
  • --ch-fg-faint