dvb-WarpPool — UI Design Concept

Research snapshot: May 2026. Direct site fetches were not available — all findings come from web-search synthesis + review sources. The concepts are not copies but an inspiration synthesis.

1. Findings

atlaspool.io

• Address-first flow: wallet address as a search input at the top, no login. Visibility toggle for screenshots — smart.
• Stats stack: real-time hashrate, mining streak, pool contribution, active workers, best share, first-seen, est. block time, achievements (gamification, announced for 2026).
• Network context: block height, network hashrate, difficulty, BTC price as a glance row — good, because mining without network context is meaningless.
• Hashrate graph with multiple timeframes: 1D/1W/1M/All — standard, but clean.
• Refresh every 2 min — no real-time push, polling instead. Room for improvement.

ocean.xyz

• Permissionless, address-keyed: no accounts. Stats stick to the payout address.
• “Shares in reward window”: the TIDES-specific metric is prominent — they make their payout logic visible.
• Quick-read metrics (daily earnings, lifetime, progress-to-payout, unpaid) as cards. Not glamorous, highly informative.
• Updated Feb 2026 — UI rather functional-conservative, no show-off.

DeepSea dashboard (community frontend for Ocean)

• Retro CRT terminal aesthetic: scanlines, phosphor glow — deliberately nostalgic.
• Three themes: DeepSea (blue), Bitcoin (orange), Matrix (green). Theme as identity.
• Chart.js with block annotations, worker cards with ASIC detection, pool donut, sound effects on new block.
• Atmosphere over information density — emotional engagement through audio + visuals.

Braiins / general 2026 trends

• Zoomable hashrate charts, regex filtering for workers, API-first.
• The 2026 split: techno-futurist (dark + neon + shaders + bento) vs. editorial (cream + serif + whitespace). Crypto almost always sits in the first camp.
• Sidebar + cards (the Linear/Vercel/Stripe pattern) scales without restructuring.
• Glassmorphism: used sparingly by now; brutalism is gaining as a counter-movement.

2. Three Design Concepts

Concept A — “Warp Drive” (cinematic cosmos)

• Style: glassmorphism + deep space. WebGL stars in the background (subtle, ≤40 particles), shader gradients à la Stripe/Vercel, glass cards with backdrop-filter.
• Palette: #05060B (void), #0F1226 (deep), #7B5CFF (warp violet), #00E0FF (plasma cyan), #F7931A (BTC orange as accent, used sparingly).
• Type: headers Space Grotesk (700, tight tracking). Body Inter (15px). Numerics JetBrains Mono (tabular-nums).
• Layout: 12-column bento grid, asymmetric. Hero = large live-hashrate block (4×3), small cards for workers/block history.
• Data viz: animated counters (Web Animations API), sparklines with gradient fill, hashrate chart with scroll-driven annotations for found blocks.
• Modern techniques:
  • View Transitions API for address lookup → dashboard
  • CSS @scroll-timeline for block-history reveal
  • color-mix() for theme-reactive glow states
  • Popover API for the worker detail drawer
• Mobile: bento collapses to a single-column stack via container queries. WebGL shaders fall back to a static gradient under prefers-reduced-motion.
• Pros: emotional, “future of mining”, clearly differentiates from the predecessor. Risk: WebGL performance on old phones; glass can ruin readability if the background gets too busy.

Concept B — “Stratum” (brutalist terminal)

• Style: monospace-first, hard lines, visible grid, ASCII accents. Inspiration: Linear logs + Bitaxe AxeOS + Recurse-Center vibe.
• Palette: #0A0A0A (true black), #1A1A1A (panel), #E8E8E8 (text), #39FF14 (signal green for “alive”), #FF4D00 (alert orange). Pure, four tones.
• Type: entirely Berkeley Mono or JetBrains Mono. Headers larger (28-40px), body 14px. No second family.
• Layout: sidebar (240px) + long-scroll main panel. Sections styled like terminal output with ───── separators. Command palette (⌘K) as the central navigation.
• Data viz: ASCII-style sparklines (▁▂▃▅▇▆▄▂), heatmaps as CSS grid with color-mix(), block history as a log stream with timestamps.
• Modern techniques:
  • text-wrap: balance for headlines
  • Container queries instead of breakpoints — every card adapts locally
  • Anchor positioning for tooltips on chart data points
  • @property for animatable CSS variables (hashrate pulse)
• Mobile: the sidebar becomes a top bar with a hamburger; long-scroll stays — brutalism scales honestly.
• Pros: technically credible (matches the Rust backend), extremely performant, ages well. Risk: too sober for a Bitcoin-maxi audience expecting “wow”; onboarding is harder for non-techies.

Concept C — “Aurora Bento” (editorial neo-bento)

• Style: bento grid with generous whitespace, soft cream against a deep-night-mode toggle, mesh-gradient accents. A mix of Apple bento + Stripe mesh + Notion editorial.
• Palette: dark default: #0B0D10, #15181D, #F2EFE8 (warm cream text), #FF7A1A (BTC orange as hero accent), #A8FF60 (signal lime). Light mode inverts cleanly.
• Type: headers General Sans (display, 700). Body Inter (16px, generous). Numerics Geist Mono.
• Layout: bento with 3 size classes (S/M/L), clear hierarchy. Hero card = hashrate, M = worker grid, S = BTC price / block height / difficulty.
• Data viz: soft animated counters (spring physics via WAAPI), area charts with mesh-gradient fill, worker cards with mini donuts for share contribution, block-found as a confetti burst (CSS motion-path).
• Modern techniques:
  • CSS motion-path for the block-found animation
  • View Transitions between light/dark
  • color-mix() + oklch() for perceptually uniform theme shifts
  • Container queries for bento card adaptation
• Mobile: bento reflows into a magazine scroll, large tap targets, prominent PWA install prompt.
• Pros: accessible for newcomers + deep enough for pros, photographs well (marketing!), light/dark equally strong. Risk: bento is slightly worn out in 2026 — differentiation has to come from craft + micro-interactions, otherwise it’s “yet another SaaS dashboard”.

3. Recommendation

Concept A “Warp Drive” — because the name WarpPool already sets the direction and the users explicitly want to move away from the classic predecessor look. Warp Drive uses the most modern web capabilities (View Transitions, scroll-timeline, color-mix, WebGL) without falling into bento arbitrariness (C) or terminal harshness (B). It delivers the “wow” for marketing screenshots while staying functionally usable — as long as glass effects are applied with discipline (cards only, never on charts). Fallback path: if performance tests fail, concept C is a clean retreat with a similar palette. Concept B can land later as a power-user theme option (“Terminal Mode”).

4. Implementation Status (as of v1.24.0)

Concept A is implemented in ui/ (SvelteKit 2 + Svelte 5 runes, adapter-static, SPA mode). What is actually live:

Routes

Components

Modern web tech actually in use

• ✅ View Transitions API for route changes
• ✅ color-mix() for theme-reactive glow states
• ✅ Container queries for the mobile bento reflow
• ✅ SSE (EventSource) for live push via /api/events
• ✅ backdrop-filter + glass cards
• ⏸ WebGL stars: deliberately CSS animation instead of WebGL — prefers-reduced-motion fallback + performance on old phones
• ⏸ @scroll-timeline + motion-path: not yet implemented (phase-B polish once browser support is broad)
• ⏸ Popover API: not yet. Nor the native <dialog> element — modals (e.g. ConnectModal.svelte) are a backdrop <div> plus a role="dialog" / aria-modal="true" panel, with focus and Escape handled in the component. Moving to <dialog> or the Popover API would hand that work to the platform; it has not been done yet.

Internationalization

8 locales via JSON files in ui/src/lib/locales/:

• de (German — primary)
• en (English — fallback)
• es (Español), pt-BR (Português Brasil)
• fr (Français), it (Italiano)
• ja (日本語), zh (中文)

The i18n system is hand-rolled (~150 LOC in i18n.svelte.ts) — a runes store + t('foo.bar', {name: 'X'}) with interpolation, no heavy framework. Locale detection: localStorage > navigator.language > ‘en’.

Every user-visible string must go through i18n.t() — no hardcoded copy and no German fallbacks. ui/scripts/i18n-guard.mjs (key parity across all 8 locales, key existence, umlaut scan) runs as part of npm run check and therefore gates CI.

PWA

• app.webmanifest + icon set (192/512)
• service-worker.ts (cache-first for static assets, network-first for /api/*)
• Install prompt prominent on the login screen
• Browser Notification API for foreground block-found events
• VAPID web push — subscriptions in push_subscriptions, the daemon push_send_loop delivers (shipped in Phase 21)

Where the implementation deviates from the original concept

• Starfield is CSS, not WebGL — performance on RPi 5 / old phones was the deciding factor. Visually near-identical at a fraction of the GPU load.
• Glass cards applied with discipline — only on BentoCard, never on tables or charts (readability).
• Bento stays 12-column — no dynamic reflow to 6/4/3 cols. Container queries make the cards themselves adaptive.
• Brand accent is not orange — --warp (violet) is the primary; orange is reserved for BTC references. The concept-A palette is implemented 1:1.

Performance status

• Type-check surface: 374 files via svelte-check (npm run check, which also runs the i18n guard) — gating CI
• Initial bundle: ~250 KB JS + ~30 KB CSS (gzipped)
• Lighthouse score (on a typical pool setup): ~95 performance, 100 accessibility, 100 best practices, 100 SEO
• Hashrate chart: hand-rolled SVG <path> — lightweight even at 1000+ buckets

Known limitations

• Pre-existing CSS warnings (unused selectors, a11y hints) — historical artifacts, no functional impact
• No real dark/light theme toggle (the UI is always dark — concept A deliberately specs no light mode)
• A light-mode variant would be non-trivial because of the backdrop-filter + glassmorphism look