Case Study // Experiment
Halloween-Counter: eine Nacht, ein Zähler
Ein Handy-Zähler für die Tür in der Halloween-Nacht. Zwei Leute, Süßes in der Hand, ein Daumen frei.
- Next.js 16
- React 19
- TypeScript
- Tailwind 4
- Docker
01Ausgangslage
An Halloween stehen zwei Leute an derselben Tür, einer davon mit Süßigkeiten in der Hand. Ein Zähler muss sich mit dem Daumen bedienen lassen, bei grellem Lichterkettenlicht lesbar sein und niemanden zum Zielen zwingen.
Und danach sollte die Nacht einen Abschluss haben, der auch Monate später noch funktioniert.
02Wie es gebaut ist
Eine Next-App mit genau zwei Flächen: eine Zählseite mit Daumenzone am unteren Rand und eine reine Anzeigeseite für den zweiten Bildschirm im Fenster, die den Stand ohne Interaktion mitliest.
Jedes zehnte Kind löst einen Vollbild-Schocker aus, reines CSS mit pointer-events: none, damit das Zählen weitergeht; prefers-reduced-motion schaltet auf eine ruhige Textvariante.
Nach der Nacht wurde das Ergebnis eingefroren: Redis und der Schreib-Endpunkt kamen raus, jede Route rendert seither statisch aus den Jahr-Dateien. Die Nächte 2024, 2025 und 2026 sind als eigene Seiten abrufbar.
Der Zähler ist im Container gebaut, mit gepinntem Image und derselben Prüfkette wie die anderen Projekte: Lint, Typecheck, Build, Smoke-Test.
03Was ich gelernt habe
Der Fehler steckte im Effekt, nicht im Design: eine Modulo-Prüfung verschluckte den Auslöser genau an der Zehnergrenze, und ein fixiertes Deko-Element verträgt keinen Screenshake auf einem gemeinsamen Vorfahren. Beides steht als eigener Fix-Commit im Verlauf.
04Ergebnis
191 gezählte Kinder und 6 verlorene Seelen am 31.10.2026, ausgeliefert als statische Seiten mit unter einer Sekunde Antwortzeit.