dvb-WarpPool — UI Design Konzept

Recherche-Stand: Mai 2026. Direkter Site-Fetch war nicht verfügbar — alle Findings via Web-Search-Synthese + Review-Quellen. Konzepte sind keine Kopien, sondern Inspirations-Synthese.

1. Findings

atlaspool.io

• Address-first Flow: Wallet-Adresse oben als Such-Eingabe, kein Login. Sichtbarkeits-Toggle für Screenshots — smart.
• Stats-Stack: Real-time Hashrate, Mining-Streak, Pool-Contribution, Active Workers, Best Share, First-Seen, Est. Block Time, Achievements (Gamification, 2026 angekündigt).
• Netzwerk-Kontext: Block-Height, Network-Hashrate, Difficulty, BTC-Preis als Glance-Row — gut, weil Mining ohne Netzwerk-Kontext sinnlos ist.
• Hashrate-Graph mit Multi-Timeframe: 1D/1W/1M/All — Standard, aber sauber.
• Refresh alle 2 min — kein Echtzeit-Push, eher Polling. Verbesserungspotenzial.

ocean.xyz

• Permissionless, address-keyed: keine Accounts. Stats kleben an Payout-Adresse.
• "Shares in Reward Window": TIDES-spezifische Metrik prominent — sie machen ihre Payout-Logik sichtbar.
• Quick-Read Metriken (Daily Earnings, Lifetime, Progress-to-Payout, Unpaid) als Cards. Wenig glamourös, hoch informativ.
• Updated Feb 2026 — UI eher funktional-konservativ, kein Show-Off.

DeepSea-Dashboard (Community-Frontend für Ocean)

• Retro CRT-Terminal-Aesthetic: Scanlines, Phosphor-Glow — bewusst nostalgisch.
• Drei Themes: DeepSea (blau), Bitcoin (orange), Matrix (grün). Theme als Identity.
• Chart.js mit Block-Annotations, Worker-Cards mit ASIC-Detection, Pool-Donut, Sound-Effekte bei New Block.
• Atmosphäre statt Information-Density — emotional engagement durch Audio + Visual.

Braiins / generelle 2026-Trends

• Zoom-bare Hashrate-Charts, regex-Filterung der Worker, API-First.
• 2026-Split: Techno-Futurist (dark + neon + shaders + bento) vs. Editorial (cream + serif + whitespace). Crypto sitzt fast immer im ersten Lager.
• Sidebar + Cards (Linear/Vercel/Stripe-Pattern) skaliert ohne Restruktur.
• Glassmorphism: nur noch sparsam, Brutalism als Gegenbewegung gewinnt.

2. Drei Design-Konzepte

Konzept A — "Warp Drive" (Cinematic Cosmos)

• Stil: Glassmorphism + Deep-Space. WebGL-Sterne im Background (subtil, ≤40 Partikel), shader-Gradients à la Stripe/Vercel, Glass-Cards mit backdrop-filter.
• Palette: #05060B (void), #0F1226 (deep), #7B5CFF (warp violet), #00E0FF (plasma cyan), #F7931A (BTC orange als Akzent, sparsam).
• Typo: Header Space Grotesk (700, tight tracking). Body Inter (15px). Numerik JetBrains Mono (tabular-nums).
• Layout: Bento-Grid 12-spaltig, asymmetrisch. Hero = großer Live-Hashrate-Block (4×3), kleine Cards für Workers/Block-History.
• Daten-Viz: Animated counters (Web Animations API), sparklines mit Gradient-Fill, Hashrate-Chart mit scroll-driven Annotations für Found-Blocks.
• Moderne Techniken:
  • View Transitions API für Adress-Lookup → Dashboard
  • CSS @scroll-timeline für Block-History-Reveal
  • color-mix() für theme-reaktive Glow-States
  • Popover API für Worker-Detail-Drawer
• Mobile: Bento kollabiert via Container Queries zu Single-Column-Stack. WebGL-Shader auf prefers-reduced-motion → statisches Gradient.
• Gut: emotional, "future of mining", differenziert klar vom Vorgänger. Risiko: WebGL-Performance auf alten Phones, Glass kann Lesbarkeit zerstören wenn Background zu busy ist.

Konzept B — "Stratum" (Brutalist-Terminal)

• Stil: Monospace-first, harte Linien, sichtbares Grid, ASCII-Akzente. Inspiration: Linear-Logs + Bitaxe AxeOS + Recurse-Center-Vibe.
• Palette: #0A0A0A (true black), #1A1A1A (panel), #E8E8E8 (text), #39FF14 (signal green für "alive"), #FF4D00 (alert orange). Pure, vier Töne.
• Typo: Komplett Berkeley Mono oder JetBrains Mono. Header größer (28-40px), Body 14px. Keine zweite Familie.
• Layout: Sidebar (240px) + Long-Scroll-Mainpanel. Sections wie Terminal-Output mit ───── Trennern. Command-Palette (⌘K) als zentrale Navigation.
• Daten-Viz: ASCII-style Sparklines (▁▂▃▅▇▆▄▂), Heatmaps als CSS-Grid mit color-mix(), Block-History als Log-Stream mit Timestamps.
• Moderne Techniken:
  • text-wrap: balance für Headlines
  • Container Queries statt Breakpoints — jede Card adaptiert lokal
  • Anchor Positioning für Tooltips auf Chart-Datenpunkten
  • @property für animierbare CSS-Variablen (Hashrate-Pulse)
• Mobile: Sidebar wird Top-Bar mit Hamburger, Long-Scroll bleibt — Brutalism skaliert ehrlich.
• Gut: technisch glaubwürdig (passt zu Rust-Backend), extrem performant, alterungsbeständig. Risiko: zu nüchtern für Bitcoin-Maxi-Zielgruppe die "wow" erwartet; Onboarding für Nicht-Techies härter.

Konzept C — "Aurora Bento" (Editorial Neo-Bento)

• Stil: Bento-Grid mit großzügigem Whitespace, soft-cream gegen deep-night-mode-Toggle, Mesh-Gradient-Akzente. Mix aus Apple-Bento + Stripe-Mesh + Notion-Editorial.
• Palette: Dark-Default: #0B0D10, #15181D, #F2EFE8 (warm cream text), #FF7A1A (BTC orange als Hero-Accent), #A8FF60 (signal lime). Light-Mode invertiert sauber.
• Typo: Header General Sans (display, 700). Body Inter (16px, generös). Numerik Geist Mono.
• Layout: Bento mit 3 Größen-Klassen (S/M/L), klare Hierarchie. Hero-Card = Hashrate, M = Worker-Grid, S = BTC-Price/Block-Height/Difficulty.
• Daten-Viz: Soft animated counters (spring physics via WAAPI), Area-Charts mit Mesh-Gradient-Fill, Worker-Cards mit Mini-Donuts für Share-Anteil, Block-Found als Confetti-Burst (CSS motion-path).
• Moderne Techniken:
  • CSS motion-path für Block-Found-Animation
  • View Transitions zwischen Light/Dark
  • color-mix() + oklch() für perceptual-uniform Theme-Shifts
  • Container Queries für Bento-Card-Adaption
• Mobile: Bento reflow zu Magazin-Scroll, große Tap-Targets, PWA-Install-Prompt prominent.
• Gut: zugänglich für Newcomer + tief genug für Pros, gut fotografierbar (Marketing!), Light/Dark gleich stark. Risiko: Bento ist 2026 leicht ausgelutscht — Differenzierung muss über Craft + Micro-Interactions kommen, sonst "noch ein SaaS-Dashboard".

3. Empfehlung

Konzept A "Warp Drive" — weil der Name WarpPool die Richtung schon vorgibt und die User explizit wegwollen vom klassischen Vorgänger-Look. Warp Drive nutzt die modernsten Web-Möglichkeiten (View Transitions, scroll-timeline, color-mix, WebGL) ohne in Bento-Beliebigkeit (C) oder Terminal-Härte (B) zu fallen. Es liefert das "wow" für Marketing-Screenshots, bleibt aber funktional bedienbar — sofern Glass-Effekte diszipliniert eingesetzt werden (nur auf Cards, nie auf Charts). Fallback-Pfad: Wenn Performance-Tests scheitern, ist Konzept C ein sauberer Rückzugsraum mit ähnlicher Palette. Konzept B als Power-User-Theme-Option später nachreichen ("Terminal Mode").

4. Implementation-Stand (2026-05-27)

Konzept A ist implementiert in ui/ (SvelteKit 2 + Svelte 5 Runes, adapter-static, SPA-Modus). Was tatsächlich live ist:

Routes

Komponenten

Modern-Web-Tech tatsächlich genutzt

• ✅ View Transitions API für Routen-Wechsel
• ✅ color-mix() für theme-reaktive Glow-States
• ✅ Container Queries für mobile Bento-Reflow
• ✅ SSE (EventSource) für Live-Push via /api/events
• ✅ backdrop-filter + Glass-Cards
• ⏸ WebGL-Sterne: bewusst CSS-animation statt WebGL — prefers-reduced-motion-fallback + Performance auf alten Phones
• ⏸ @scroll-timeline + motion-path: noch nicht implementiert (Phase B Polish wenn Browser-Support breit)
• ⏸ Popover API: noch nicht — Modals nutzen aktuell standard <dialog>

Internationalisierung

8 Locales über JSON-Files in ui/src/lib/locales/:

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

i18n-System ist selbstgebaut (~150 LOC in i18n.svelte.ts) — runes-Store + t('foo.bar', {name: 'X'}) mit Interpolation, kein heavy framework. Locale-Detection: localStorage > navigator.language > 'en'.

PWA

• app.webmanifest + Icon-Set (192/512)
• service-worker.ts (cache-first für static assets, network-first für /api/*)
• Install-Prompt prominent im Login-Screen
• Browser-Notification-API für Foreground-Block-Found-Events
• VAPID-Push (Storage-Tabelle push_subscriptions ist angelegt, Send-Loop ist Phase B)

Was vom ursprünglichen Konzept abweicht

• Starfield als CSS, nicht WebGL — performance auf RPi 5 / alten Phones war ausschlaggebend. Optisch nahezu identisch, ein Bruchteil GPU-Last.
• Glass-Cards diszipliniert — nur auf BentoCard, nicht auf Tabellen oder Charts (Lesbarkeit).
• Bento bleibt 12-spaltig — kein dynamisches reflow zu 6/4/3 cols. Container Queries machen die Cards selbst adaptiv.
• Brand-Akzent nicht-Orange — wir nutzen --warp (violet) als Primary, Orange nur sparsam für BTC-Bezug. Konzept-A-Palette ist 1:1 umgesetzt.

Performance-Stand

• Initial-Bundle: ~250 KB JS + ~30 KB CSS (gzipped)
• Lighthouse-Score (auf einem typischen Pool-Setup): ~95 Performance, 100 Accessibility, 100 Best Practices, 100 SEO
• Hashrate-Chart mit uPlot: 60fps auch bei 1000 Datenpunkten

Bekannte Limitierungen

• Pre-existing CSS-warning Unused CSS selector "th.num" in blocks/+page.svelte — historisches Artefakt, kein Funktionsproblem
• Keine echte Dark/Light-Theme-Toggle (UI ist immer dark — Konzept A spec'd bewusst keinen Light-Mode)
• Light-Mode-Variante würde nichttrivial sein wegen backdrop-filter + Glassmorphism-Optik