--- title: "Detox Quest" url: "https://denniswagner.de/projekte/detox-quest" language: "de" description: "Detox Quest macht weniger Bildschirmzeit zum Spiel: 180 Quests, XP und Level, ein virtueller Pixel-Hund als Begleiter – installierbare Web-App ohne Server, ohne Konto, ohne Tracking." published: "2026-10-06T15:44:00+02:00" updated: "2026-10-06T18:40:08+02:00" --- # Detox Quest Detox Quest macht weniger Bildschirmzeit zum Spiel: 180 Quests, XP und Level, ein virtueller Pixel-Hund als Begleiter – installierbare Web-App ohne Server, ohne Konto, ohne Tracking. - **Untertitel:** Weniger scrollen, mehr leben – Digital Detox als Spiel mit Quests, Leveln und einem Pixel-Hund. - **Link zur App:** [detoxquest.denniswagner.de/](https://detoxquest.denniswagner.de/) - **Farbschema:** salbei Eigenes Projekt # Detox Quest Weniger scrollen, mehr leben – Digital Detox als Spiel mit Quests, Leveln und einem Pixel-Hund. ## Digital Detox, das Spaß macht Detox Quest ist eine installierbare Web-App, die beim bewussten Umgang mit dem Smartphone hilft – nicht mit Verboten, sondern mit einem Spiel: Tages-, Wochen- und Monats-Quests wie „Frühstück ohne Handy“, „Buch statt Feed“ oder „48 Stunden ohne Social Media“ bringen XP, Level und eine Streak. Dahinter steht ein Katalog von 180 handgeschriebenen Quests in sechs Themen – Achtsamkeit, Draußen, Lesen & Lernen, Verbindung, Kreativität und Schlaf. Beim Onboarding wählt man „Was möchtest du erreichen?“ und bekommt passende Quests bevorzugt. Erledigt wird per Wisch-Geste oder Tap auf die Checkbox, getauscht per Wisch nach links. Die verdienten Punkte haben ein Ziel: einen Pixel-Hund (Golden Retriever, Schäferhund oder Shih Tzu), den man füttert, mit dem man Ball und Knochen wirft und dem man im Shop Hütte bis Schloss, Spielzeug und Leckerlis kauft. Alles läuft komplett lokal im Browser – ohne Server, ohne Konto, ohne Tracking, zweisprachig (Deutsch/Englisch). - PWA - Offline-first - 100 % Vanilla-Web - Gamification - Pixel-Art ![Startbildschirm mit Tagesziel-Ring (40 von 100 XP), 6-Tage-Streak und Tages-Quests wie „Abendrunde ums Viertel“](https://denniswagner.de/media/83/conversions/02-home-hell-large.webp) Detox Quest direkt ausprobieren – kostenlos im Browser, ohne Konto. [App öffnen](https://detoxquest.denniswagner.de/) ## Funktionen Quests & Fortschritt ### Kleine Schritte, echtes Spiel - 180 Quests in drei Rhythmen (täglich/wöchentlich/monatlich) und sechs Themen-Kategorien – von „Fünf stille Minuten“ bis „Plan ein Mikroabenteuer“ - Jede Quest mit Begründung („Warum es zählt“) und 3–4 konkreten Schritten - XP, Level mit Rängen, Tagesziel mit Fortschrittsring, Streak und Konfetti beim Erreichen des Tagesziels - Wisch-Gesten: rechts erledigen, links gegen neue Quest tauschen; Pull-to-Refresh würfelt alle Quests neu - Fokus-Themen aus dem Onboarding steuern, welche Quests nachrücken Privatsphäre als Grundprinzip ### Kein Server, kein Konto, kein Tracking Alle Daten – Fortschritt, XP, Hund – liegen ausschließlich im Browser des Geräts (localStorage). Es gibt keinerlei Verbindung zu einem Server: Nach der Installation funktioniert die App vollständig offline. Buddy ### Ein Pixel-Hund als Begleiter - Ab 50 Punkten zieht ein Hund ein – wählbar aus drei Rassen mit handgemachten 48-Pixel-Sprites - Sechs Leckerli-Sorten mit je eigener Animation: Pirouetten, Rückwärtssalto, Zoomies quer durch die Szene, Schneeflocken beim Hunde-Eis - Ball und Knochen werfen: das Spielzeug fliegt im Bogen, der Hund apportiert - Shop mit vier Kategorien und Pixel-Produktfotos; sechs Behausungen von der Holzhütte bis zum Schloss Lebendige Szene ### Die Szene kennt Uhrzeit und Jahreszeit - Morgen-, Tag-, Abend- und Nachthimmel – nachts mit Mond und Sternen - Saisonale Böden: Blumen im Frühling, Laub im Herbst, Schnee im Winter - Dark Mode und sechs Akzentfarben, alle Szenenfarben passen sich an Offline & App-Gefühl ### Installieren und loslegen - PWA mit Service Worker: startet und funktioniert offline, installierbar auf iOS, Android und Desktop - Edge-Swipe zum Zurücknavigieren, Toasts, Konfetti – App-Gefühl ohne App-Store - Responsive: Vollbild-Layout vom Smartphone bis zum Desktop mit mehrspaltigen Quest-Grids ## Für wen? Vier Beispiel-Personas Als UX-Designer denke ich in Personas – auch beim eigenen Projekt. Vier Szenarien zeigen, wie unterschiedlich Detox Quest genutzt wird: Die Doomscrollerin ### Sarah, 27 – Social-Media-Managerin *„Beruflich muss ich online sein – privat will ich es nicht mehr.“* Beruflich den ganzen Tag in Feeds, abends scrollt die Hand von allein weiter. Mit Detox Quest hat der Feierabend jetzt ein Gegenprogramm: „Bildschirm aus um neun“, „Abendrunde ums Viertel“ – und die Streak will niemand reißen lassen. - Tagesziel - Streak - Schlaf-Quests Mehr erfahren →#### Situation Acht Stunden am Tag betreut Sarah Feeds, Kommentare und Kampagnen. Das berufliche Scrollen färbt auf den Feierabend ab: Der Daumen macht einfach weiter, obwohl der Kopf längst abschalten will. #### So nutzt sie Detox Quest - Ihre Fokus-Themen aus dem Onboarding: Schlaf und Draußen – die App legt ihr passende Quests bevorzugt vor - Das Tagesziel von 100 XP ist ihr Feierabend-Ritual: „Bildschirm aus um neun“, „Abendrunde ums Viertel“ - Die Streak hält sie bei der Stange – sechs Tage in Folge reißt man nicht freiwillig ab - Abends füttert sie ihren Shih Tzu mit den verdienten Punkten Der Familienvater ### Markus, 38 – Projektleiter *„Ich will, dass meine Kinder mich ansehen – nicht mein Handy.“* Abendessen ohne Handy, Spieleabend, Spaziergang zu zweit – Markus nutzt die Verbindungs-Quests als Familienprogramm. Den Pixel-Hund füttern dürfen die Kinder, das Schloss ist das gemeinsame Sparziel. - Verbindungs-Quests - Buddy - Familien-Ritual Mehr erfahren →#### Situation Das Handy liegt beim Abendessen neben dem Teller, „nur kurz Mails checken“ wird zur halben Stunde. Markus merkt selbst, was für ein Vorbild das abgibt – und will es ändern, ohne dass es sich nach Verzicht anfühlt. #### So nutzt er Detox Quest - Sein Fokus-Thema: Verbindung – Quests wie „Abendessen ohne Handy“ werden zum Familienprogramm - Wochen-Quests wie „Plan einen Spieleabend“ strukturieren das Wochenende - Die Punkte spart er mit den Kindern für neue Behausungen – das Schloss ist das gemeinsame Sparziel - Die App läuft auf dem Familien-Tablet im Vollbild, füttern dürfen die Kinder Die Studentin ### Lisa, 21 – Lehramtsstudium *„Zwischen zwei TikToks ist noch nie eine Hausarbeit fertig geworden.“* Lisa ersetzt Prokrastinations-Scrollen durch Mikro-Quests: „Buch statt Feed“, „Lern fünf Vokabeln“, „Eine Stunde offline“. Die Belohnung wartet im Buddy-Tab – ihre Zoomies-Kekse sind Legende. - Lesen & Lernen - Quest-Tausch - Leckerli-Animationen Mehr erfahren →#### Situation Bibliothek, Hausarbeit, Kapitel drei – und das Handy zieht. Jede kleine Denkpause endet im Feed, aus fünf Minuten werden vierzig. Lisa braucht keinen Blocker, sondern etwas, das ihr die Pause schöner macht als den Feed. #### So nutzt sie Detox Quest - Ihr Fokus-Thema: Lesen & Lernen – „Buch statt Feed“, „Lern fünf Vokabeln“, „Eine Stunde offline“ - Passt eine Quest gerade nicht, wischt sie nach links und tauscht, bis die richtige dabei ist - Die Leckerli-Animationen sind ihr Belohnungs-Ritual nach jeder Lerneinheit – die Zoomies-Kekse sind Legende - Kostenlos und ohne Abo – fürs Studierenden-Budget genau richtig Der Datensparsame ### Jörg, 52 – Systemadministrator *„Eine App gegen Handysucht, die meine Daten absaugt? Ironie pur.“* Jörg installiert nichts mit Konto-Zwang. Detox Quest läuft bei ihm, weil es genau nichts will: kein Login, kein Server, kein Tracking – alle Daten bleiben im Browser, der Quelltext ist überschaubares Vanilla-JS. - Kein Konto - Offline - Vanilla-JS Mehr erfahren →#### Situation Jörg prüft bei jeder App zuerst, wohin sie funkt. Die meisten Digital-Wellbeing-Apps fallen durch: Konto-Zwang, Analytics, Cloud-Sync. Genau die Kategorie App, die weniger Bildschirmzeit verspricht und dafür maximale Daten will. #### So nutzt er Detox Quest - Installiert als PWA – danach läuft die App komplett offline - Alle Daten liegen im localStorage statt in einer Cloud; es gibt schlicht keinen Server - Den Quellcode hat er quergelesen: kein Framework, keine einzige Dependency - Kein Login, kein Tracking – die App will genau nichts von ihm ## Einblicke in die App ![Onboarding-Schritt „Was möchtest du erreichen?“ mit sechs wählbaren Themen-Kacheln, Draußen und Schlaf sind ausgewählt](https://denniswagner.de/media/84/conversions/01-onboarding-ziele-hell-large.webp)Onboarding: Ziele wählen, Quests folgen![Startbildschirm mit Tagesziel-Ring (40 von 100 XP), 6-Tage-Streak und Tages-Quests wie „Abendrunde ums Viertel“](https://denniswagner.de/media/83/conversions/02-home-hell-large.webp)Start: Tagesziel, Streak und heutige Quests![Detailansicht der Quest „Abendrunde ums Viertel“ mit Themen-Badge, „Warum es zählt“ und nummerierten Schritten](https://denniswagner.de/media/85/conversions/03-quest-detail-hell-large.webp)Jede Quest erklärt, warum sie zählt![Fortschrittsansicht mit Level 3, Gesamt-XP, Wochen-XP und Fortschrittsbalken zum nächsten Level](https://denniswagner.de/media/86/conversions/04-punkte-hell-large.webp)Level, Ränge und Wochenfortschritt![Erledigt-Liste mit abgehakten Quests, Datumsangaben und Summe der verdienten XP](https://denniswagner.de/media/87/conversions/05-quests-erledigt-hell-large.webp)Erledigte Quests mit XP-Bilanz![Buddy-Tab: Pixel-Golden-Retriever vor Deluxe-Hütte mit Ball, Ente und Quietsche-Ente, darunter Leckerli-Leiste und Shop-Kategorien](https://denniswagner.de/media/88/conversions/06-buddy-hell-large.webp)Der Buddy-Tab: Hund, Leckerlis und Shop![Shop-Kategorie Wohnen mit sechs Behausungen als Pixel-Produktfotos, von Hundehütte (100 Punkte) bis Schloss (600 Punkte)](https://denniswagner.de/media/89/conversions/07-buddy-shop-wohnen-hell-large.webp)Shop: sechs Behausungen von Hütte bis Schloss![Fütterungs-Animation: Der Hund hüpft mit herausgestreckter Zunge, rote Pixel-Herzen steigen auf](https://denniswagner.de/media/90/conversions/08-buddy-fuettern-hell-large.webp)Füttern mit Herzchen-Animation![Darstellungs-Einstellungen mit Hell/Dunkel/Auto und sechs Farbthemen](https://denniswagner.de/media/91/conversions/09-darstellung-hell-large.webp)Sechs Farbthemen, hell und dunkel![Startbildschirm im Dunkelmodus](https://denniswagner.de/media/92/conversions/10-home-dunkel-large.webp)Dunkelmodus![Buddy-Szene bei Nacht: dunkelblauer Himmel mit Pixel-Mond und Sternen, abgedunkelte Szene](https://denniswagner.de/media/93/conversions/11-buddy-nacht-dunkel-large.webp)Nachts wacht der Mond über den Buddy![Buddy-Szene im Winter mit verschneitem, weißem Boden](https://denniswagner.de/media/94/conversions/12-buddy-winter-hell-large.webp)Im Winter liegt Schnee in der Szene ![Detox Quest auf dem Desktop: Vollbild-Layout mit mehrspaltigem Quest-Grid](https://denniswagner.de/media/95/conversions/13-desktop-home-hell-large.webp)Desktop: Vollbild mit mehrspaltigen Quest-Grids ## Design: Ruhe trifft Pixel-Art Zwei Welten, ein System: Die Quest-Seiten sind bewusst ruhig gestaltet – Salbeigrün, weiche Radien, viel Weißraum. Der Buddy-Tab kontrastiert mit liebevoller Pixel-Art: Alle Sprites, von den drei Hunderassen à 48×32 Pixel über die Häuser bis zu den Produktfotos im Shop, sind eigens entworfen. Die Szene lebt: Tageszeit und Jahreszeit steuern Himmel, Boden und Deko – vom Sonnenaufgang bis zum Sternenhimmel, von Frühlingsblumen bis Schnee. Sechs Akzentfarben und Hell-/Dunkelmodus (auch automatisch) machen die App zur eigenen; das Onboarding startet mit einer visuellen Ziel-Auswahl. Durchgängig responsive vom iPhone bis zum Desktop. ![Buddy-Szene bei Nacht: dunkelblauer Himmel mit Pixel-Mond und Sternen, abgedunkelte Szene](https://denniswagner.de/media/93/conversions/11-buddy-nacht-dunkel-large.webp)Nachtszene im Dunkelmodus ![Buddy-Szene im Winter mit verschneitem, weißem Boden](https://denniswagner.de/media/94/conversions/12-buddy-winter-hell-large.webp)Winter in der Buddy-Szene ![Buddy-Szene bei Nacht auf dem Desktop im Dunkelmodus](https://denniswagner.de/media/96/conversions/14-desktop-buddy-nacht-dunkel-large.webp)Die Nachtszene zieht sich bis aufs Desktop durch ## Technik unter der Haube - **100 % Vanilla-Web:** HTML, CSS, JavaScript – kein Framework, kein Build-Schritt, keine einzige Laufzeit-Dependency - **PWA mit Service Worker:** Network-First mit Offline-Fallback, installierbar auf iOS, Android und Desktop; Inhalts-Updates ganz ohne Versions-Gymnastik - **Quests als Daten:** 180 zweisprachige Quests (DE/EN) liegen als editierbare Datendatei neben der App – neue Quests erscheinen ohne Rebuild, auch per Skript oder KI-Agent pflegbar - **Pixel-Art als Code:** Alle Sprites sind Zeichen-Matrizen, gerendert als scharfe SVG-Rects; die Hunde entstehen aus einem eigenen Generator (Formen → Auto-Outline → Schattierung) - **Animationen nur mit CSS:** Schwanzwedeln per steps()-Framewechsel, Wurf-Parabeln, sechs Fütter-Animationen, Herzchen – ohne Animations-Library - **Gesten selbst gebaut:** Swipe zum Erledigen/Tauschen, Pull-to-Refresh und Edge-Swipe-Back über Pointer Events - **Lokal by Design:** Zustand in localStorage mit sanften Migrationen – Updates erhalten XP, Streak und Hund - Service Worker - Pointer Events - SVG - CSS-Animationen - localStorage - i18n (DE/EN) - Pixel-Art-Generator - Zero Dependencies [← Zurück zur Expertise](https://denniswagner.de/expertise)