bch_qzjqnzgjz7w9tdflpz6u/deviant
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
deviant/snapshots/0102-shell-splash-manifesto-ux.md
walerikus 6ea6279d13 docs(snapshots): backfill domain/summary/tags frontmatter + enhance index 
Phase 1 of the docs-by-domain reorg. Every snapshot now carries YAML
frontmatter (domain + summary + tags); the auto-guess was hand-corrected
against the full index (T6/interchain -> cross-chain, CDP/MBA/stablecoin
-> fiatm, CitizenToken/Ballot -> governance, etc.). No file renamed/moved.

build-snapshot-index.mjs now reads the frontmatter and emits a greppable
INDEX.md: a top Quick-find table (No | domain | tags | summary) plus
per-domain sections with summary + tags. 224/224 tagged, 8 domains, zero
uncategorised.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-06 20:12:24 +02:00

3.7 KiB
Raw Blame History

domain summary tags
wallet Shell splash + manifesto UX

Snapshot 0102 — Shell splash + manifesto UX

Date: 2026-06-01 Track: shells/app (web PWA shell) Status: ✅ tsc clean, build clean, verified live in-browser

Captured 2026-06-01T05:09:41Z · rev d1bc0f0

File counts

Area Files
src/ 66
contracts/ 56
test/ 57

What shipped — splash + onboarding welcome polish

A run of UX refinements on the loading splash and the onboarding welcome screen, plus a shared Manifesto component so the two read continuously.

Loading splash (index.html)

  • Phone-framed, not full-bleed: the splash is sized/positioned to match the .phone frame (rounded + bordered on desktop), with a solid deep-sky backdrop so there is no white flash before the React stylesheet loads.
  • Tap-to-enter, no timer: the splash stays until the user taps/clicks (or Enter/Space). All auto-dismiss timers and the React boot-dismiss were removed. A pulsing "TAP ANYWHERE TO ENTER ›" hint sits at the bottom.
  • Three regions via space-between: title (top), manifesto (middle), complementary line + footer (bottom).

Manifesto (shared) — src/components/Manifesto.tsx (new)

  • The manifesto text now persists onto the onboarding welcome screen after the splash is dismissed, and stays there until the user picks Create / Restore.
  • "Deviation" is highlighted inline within the running paragraph (acid colour + weight, upright).
  • Rotating closing word (captured → compromised → constrained) is a typewriter: types out, holds, deletes, types the next. It lives in a fixed-width (12ch) slot with the word centered in it, so the surrounding text never reflows. Hold time is 5 s per word.
  • Typewriter driven by a DOM ref, not React state — the paragraph renders exactly once, so the inline "Deviation" never re-renders/repaints (this killed a reported italic↔normal glitch at its root; proven by node-identity probing).

No italic

  • Per request, no manifesto words are italic — "Deviation", the rotating word, and the splash's emphasized phrase are all upright, emphasized by colour/weight. (The Fraunces ital axis is still loaded in the font URL but currently unused by the manifesto — harmless; left in case other CosmoGenesis surfaces use italic.)

Onboarding welcome (src/screens/Onboarding.tsx)

  • Donut illustration removed from the welcome view.
  • The "A response to a default trajectory" label is pinned at the top (under the wordmark); the manifesto paragraph is vertically centered in the middle (flex spacers above and below); Create / Restore buttons at the bottom.

CSS (src/shell.css)

  • .manifesto, .mf-label / .mf-label-top, .mf-body, .mf-deviation (inline highlight), .mf-rot (fixed-width centered typewriter slot + blinking caret).

Verification

  • tsc --noEmit: 0 errors; vite build: clean (code-split, no size warning).
  • Confirmed live (preview MCP): splash phone-framed + tap-to-enter; welcome shows label-top / manifesto-middle / buttons-bottom; computed font-style: normal on all emphasized elements (splash + welcome); Deviation DOM node proven stable across typewriter ticks (marker + identity survive).

What's next (unchanged launch gates)

Priority Item
High Native device build (cap add android/ios) — needs a machine with the SDK; NATIVE_BUILD.md is ready
High External security audit before any mainnet
Med Mainnet protocol validation (risk register is chipnet-validated only)
Low PNG icon set (iOS apple-touch-icon); drop the unused Fraunces ital axis if no surface needs italic