Design exploration in `design/wraith.pen` — hero & chains

[truthixify]

Labels: Stellar Wave, design, needs-design, drips, help-wanted
Tier: M (2–4 days)
Type: design

Context

The current hero is solid but conservative. The Chains section under-sells the multichain story. Before writing more code, we want a Pencil-driven exploration of alternatives.

This is a sibling to demo/09 but focused on the marketing site.

Scope

In design/wraith.pen:

1. Hero exploration — produce three directions:
   • Direction A: Code-first (current) but with the code editor more prominent, taking 60% of viewport width
   • Direction B: Visual-first — replace the code editor with an interactive stealth-flow animation
   • Direction C: Identity-first — lead with "alice.wraith" identity-style copy and a sample meta-address card
2. Chains section exploration — three directions:
   • Direction A: Current 4-column grid, refined typography
   • Direction B: Stellar-prominent variant (Stellar logo + Drips Wave context featured; other chains secondary)
   • Direction C: Comparison-table variant (rows: send time, fees, max metadata, ledger model; columns: chains)
3. For each direction:
   • Desktop (1440px) and mobile (375px) frames
   • All states represented (loading isn't applicable; idle/hover/focus are)
4. Export PNGs to design/explorations/2026-XX-hero-chains/.
5. Write RATIONALE.md recommending one direction per section with reasoning.

Constraints

• Stay within design tokens.
• Hero direction B (interactive animation) — sketch only; don't commit to building it unless we pick it.
• Chains direction B (Stellar-prominent) — keep tasteful, not promotional. We're crediting the program, not slapping a logo on the homepage.

Acceptance criteria

• wraith.pen updated and committed.
• Six PNG exports under design/explorations/2026-XX-hero-chains/.
• RATIONALE.md with recommendation.
• Implementation issues filed for the chosen direction(s) after maintainer review.

Why this matters

Visual direction at the homepage level affects every downstream marketing decision. Doing this properly in design first — instead of iterating live in code — saves rework.

Resources

• Pencil docs: https://pencil-app.com/
• Current implementation: www/src/components/Hero.tsx, www/src/components/Chains.tsx
• Token reference: www/src/index.css (@theme block)