Geburtstagseinladung – Save-the-Date als Retro-Website mit Geschenkeliste
Als privates Projekt für den 30. Geburtstag aus meinem Freundeskreis gebaut: Die Save-the-Date-Karte im Pixel-Look wird zur Website mit Boot-Screen, Countdown, Kart-Anmeldung, Zusage und gemeinsamer Geschenkeliste. Für die Veröffentlichung habe ich Namen, Alter, Daten und Ort ausgetauscht – „Mila wird 20“ und die Location sind erfunden.
- Zeitraum
- Oktober 2026
- Status
- Original privat online; für die Veröffentlichung Namen, Alter, Daten und Ort ausgetauscht – Demo ohne Backend
- Art
- Privates Projekt, kein Auftrag
- Umfang
- One-Pager mit Zusage, Kart-Anmeldung und Geschenkeliste
- Technik
- HTML/CSS/JS, Cloudflare Worker + D1, Telegram
- Schriften
- Press Start 2P, JetBrains Mono, VT323 (self-hosted)
- Getestet
- WebKit und Chromium, 320–1440 px
Privates Projekt: für Familie oder Freunde gebaut, nicht als bezahlter Auftrag.
Ausgangslage
Zu einem 30. Geburtstag aus meinem Freundeskreis gab es eine gedruckte Save-the-Date-Karte im Pixel- und Terminal-Look: „SAVE THE DATE – ICH WERDE 30“ in grüner Pixelschrift, Terminal-Zeilen und eine Pac-Man-Reihe. Dazu sollte eine Einladungsseite kommen, auf der die Gäste alles finden und direkt zusagen können.
Die Aufgabe: aus der Karte eine Website machen, die sich genauso anfühlt – kein Formular mit Partyhütchen, sondern dieselbe Pixel-Welt zum Anklicken. Und sie sollte praktische Fragen lösen: Wer kommt mit wie vielen Begleitpersonen? Wer fährt Kart und zahlt vor Ort selbst? Und wie verhindert man, dass drei Gäste dasselbe Geschenk mitbringen?
Wichtig: Das ist ein privates Projekt, kein Kundenauftrag. Die echte Einladung läuft auf einer eigenen Domain und bleibt privat. Für die Veröffentlichung habe ich die Informationen ausgetauscht: Name, Alter, Termine, Ort und Preise sind erfunden („Mila wird 20“ in der „Pixel Arena“). Die Demo läuft ohne Backend und sendet nichts – Zusage, Kart-Anmeldung und Geschenkeliste bleiben nur im Browser.
Ziele
6 Ziele, an denen sich das Projekt messen lässt
- Die Website soll sich anfühlen wie die gedruckte Karte: gleiche Schriften, Farben und Pixel-Motive.
- Alle Infos auf einer Seite: Termine, Countdown, Location und was vor Ort geboten ist.
- Zusagen in unter einer Minute, inklusive Begleitpersonen.
- Kart-Anmeldung mit klarem Preis, weil jeder Gast vor Ort selbst zahlt.
- Eine gemeinsame Geschenkeliste ohne Login, auf der nichts doppelt verschenkt wird.
- Flüssig auf dem iPhone, obwohl überall etwas blinkt und läuft.
Lösung
Was gebaut wurde – Baustein für Baustein
Boot-Screen „PRESS START“
Die Seite startet wie eine alte Konsole: Systemzeilen, Ladebalken, dann „PRESS START“. Per Tippen oder Enter geht es weiter; wer in derselben Sitzung wiederkommt, landet direkt auf dem Poster.
Pixel-Poster in HTML und CSS
Das Motiv der Karte ist nachgebaut, nicht als Bild eingefügt: Pixelschrift mit Druck-Struktur und Glow, Terminal-Zeilen, die sich selbst tippen. So bleibt alles scharf und lesbar, auf jedem Bildschirm.
Pac-Man-Reihe
Pac-Man und vier Geister laufen als Sprite-Streifen, bewegt nur per transform. Sie pausieren, sobald sie aus dem Bild sind oder gerade gescrollt wird – damit das Scrollen auf dem Handy flüssig bleibt.
HUD-Countdown
Tage, Stunden, Minuten und Sekunden bis zur Feier im Stil einer Spielanzeige, dazu ein XP-Balken für das Jahr seit dem letzten Geburtstag. Gerechnet wird mit festen Zeitstempeln, damit Safari dieselbe Zeit zeigt wie Chrome.
Zusage mit Begleitpersonen
Name, Ja oder Nein und 0 bis 5 Begleitpersonen per Plus und Minus, angezeigt als kleine Pixel-Spieler. Die Antwort lässt sich später ändern; der Browser merkt sich, dass schon geantwortet wurde.
Kart-Anmeldung mit Preis
Neben dem Partyraum liegt eine Indoor-Kartbahn, jeder zahlt selbst. Die Karte zeigt Preis pro Person und Zusatzkosten, die Anmeldung nimmt bis zu fünf Fahrer pro Eintrag auf.
Gemeinsame Geschenkeliste
Gäste reservieren einen Wunsch mit ihrem Vornamen oder tragen ein eigenes Geschenk ein. Alle sehen „Noch zu haben“ und „Schon vergeben“ – so landet nichts doppelt unterm Geschenkpapier. Freigeben kann nur der Browser, der reserviert hat.
Meldung per Telegram
Zusagen, Kart-Anmeldungen und Reservierungen gehen an einen Cloudflare Worker, der sie speichert und sofort per Telegram meldet. In der Seite selbst stehen keine Schlüssel oder Passwörter.
Design
Die Farben kommen direkt von der Karte: ein fast schwarzer Grund (#060706), ein Pixel-Grün (#8CC63E) für alles Wichtige und helles Grau (#E6E6E6) für Text. Gelb (#F2C21B) und Rot (#E8302A) aus der Arcade-Welt setzen Akzente bei Pac-Man, Hinweisen und der Punkteleiste. Kästen haben abgeschrägte Ecken wie alte Spielautomaten.
Drei Schriften, alle self-hosted: Press Start 2P trägt Überschriften, Buttons und das große Poster. JetBrains Mono ist der Lauftext und die Terminal-Zeilen. VT323 gibt dem Boot-Screen und der Spielanzeige den Röhrenmonitor-Look.
Bewegung läuft bewusst in Stufen statt weich, wie auf einer Konsole: Einblendungen, Tipp-Effekt und Fortschrittsbalken springen Schritt für Schritt. Wer reduzierte Bewegung eingestellt hat, sieht alles sofort und ohne Endlos-Animationen.
Technik
8 Bausteine – und warum genau diese
Vanilla HTML/CSS/JS
Eine einzige Datei ohne Framework und ohne Build-Schritt. Lädt schnell und lässt sich auf jede Domain legen.
Press Start 2P, JetBrains Mono, VT323
Pixel-, Mono- und Röhrenschrift self-hosted, die Lizenzen liegen daneben. Kein Aufruf von Google Fonts.
Pixel-Art als SVG aus Zeichen-Rastern
Pac-Man, Geister, Kart und Spiel-Icons stehen als kleine Text-Raster im Code und werden zu scharfen SVGs gebaut. Keine Bilddateien.
Cloudflare Worker + D1
Speichert Zusagen, Kart-Anmeldungen und Reservierungen. Ob ein Wunsch noch frei ist, entscheidet der Server, nicht der Browser.
Telegram Bot API
Jede Zusage und jede Reservierung kommt sofort als Nachricht aufs Handy.
Zufalls-Schlüssel im Browser
Wer reserviert, bekommt einen Schlüssel im localStorage. Nur damit lässt sich die eigene Reservierung wieder freigeben – ganz ohne Login.
IntersectionObserver
Endlos-Animationen laufen nur, solange sie sichtbar sind; Einblendungen starten erst beim Scrollen.
PNG-Kacheln statt Filter
Scanlines und Korn sind winzige, einmal dekodierte PNG-Kacheln. Der frühere SVG-Rauschfilter wurde in Safari bei jedem Scroll-Frame neu gerechnet.
Antippen zeigt, warum ich mich dafür entschieden habe.
SEO
5
- Bewusst noindex: Die Einladung ist nur für Gäste mit Link gedacht und soll nicht in Suchmaschinen auftauchen.
- Eigenes Vorschaubild (1200 × 630) im Poster-Look, damit der Link in WhatsApp und Co. sofort als Einladung erkennbar ist.
- Titel und Beschreibung für die Link-Vorschau geschrieben, nicht für Google.
- Klare Überschriften und sprechende Sprungmarken zu Zusage, Kart-Anmeldung und Geschenkeliste.
- Favicon und Homescreen-Icon als Pixel-Geist.
Barrierefreiheit
5
- Boot-Screen als Dialog ausgezeichnet und per Enter, Leertaste oder Escape überspringbar; der Rest der Seite ist so lange inert.
- Formulare mit sichtbaren Labels, Fehlermeldungen als Alert und Eingabefeldern in 16 px, damit iOS nicht hineinzoomt.
- Touch-Ziele mindestens 44 Pixel; Plus- und Minus-Schalter sind für Screenreader beschriftet.
- Pixel-Grafiken sind für Screenreader ausgeblendet, der Countdown wird nicht jede Sekunde vorgelesen.
- prefers-reduced-motion schaltet Tipp-Effekt, Pac-Man und alle Endlos-Animationen ab.
Datenschutz
5
- Schriften liegen auf dem eigenen Server, keine Verbindung zu Google Fonts.
- Kein Tracking und keine Analytics auf der Einladung.
- Gespeichert werden nur Name, Antwort und Reservierung – im eigenen Cloudflare Worker statt bei einem Formulardienst.
- Keine Schlüssel oder Passwörter im Seitencode; die Telegram-Zugangsdaten liegen nur im Worker.
- Einzige externe Einbindung im Original ist die Karte, die erst lädt, wenn sie in die Nähe kommt. Die Demo ersetzt sie durch eine gezeichnete Karte und stellt gar keine externen Anfragen.
Performance
Gemessen am 10. Oktober 2026, mobil (simulierte 4G-Drosselung) mit Lighthouse.
- Hauptthread im Leerlauf
- 1027 ms → rund 110 ms je 3 sChromium, CPU 4-fach gedrosselt, vor und nach der Performance-Runde
- Bildrate WebKit
- Ø 25 → 75 fpsGeräteprofil iPhone 14, vor und nach der Performance-Runde
- Getestet
- WebKit und ChromiumBildschirmbreiten von 320 bis 1440 px
- Externe Anfragen der Demo
- 0nur eigene Dateien: Seite, Schriften, zwei Struktur-Kacheln, Favicon
Der Lighthouse-SEO-Wert ist hier bewusst reduziert: Die Seite trägt „noindex", weil sie als Konzept bzw. privates Projekt nicht in Suchmaschinen erscheinen soll. Alle übrigen SEO-Prüfungen bestehen.
Ablauf
6 Schritte von der Idee bis online
Karte als Vorlage
Die gedruckte Save-the-Date-Karte war der Styleguide: Farben, Schriften, Pixel-Motive und Sprüche direkt übernommen.
Poster nachbauen
Pixel-Poster, Terminal-Zeilen und Pac-Man-Reihe in HTML, CSS und SVG nachgebaut statt als Bild eingesetzt.
Inhalte und Formulare
Countdown, Termine, Location, Spiele, Zusage, Kart-Anmeldung und Geschenkeliste auf einer Seite.
Backend
Cloudflare Worker mit D1 für Zusagen und Reservierungen, Meldung per Telegram, Schutz vor doppelten Reservierungen.
Performance-Runde
Rauschfilter und Vollbild-Overlay durch PNG-Kacheln ersetzt, Animationen pausieren außerhalb des Bildes und beim Scrollen. Gemessen in Chromium und WebKit.
Demo fürs Portfolio
Anonymisierte Kopie mit erfundenen Daten: „Mila wird 20“, gezeichnete Karte, kein Backend – alles bleibt im Browser.
Ergebnis
Was am Ende belegbar dasteht
- Hauptthread-Last im Leerlauf von 1027 ms auf rund 110 ms je 3 Sekunden gesenkt (Chromium, CPU 4-fach gedrosselt).
- 75 fps im Schnitt statt vorher 25 – gemessen in WebKit mit dem Geräteprofil eines iPhone 14.
- Gäste reservieren Geschenke ohne Login; doppelte Reservierungen lehnt der Server ab.
- Die echte Einladung läuft privat auf eigener Domain, Zusagen und Reservierungen kommen per Telegram an.
- Demo ohne Backend: 0 externe Anfragen, Zusage, Kart-Anmeldung und Geschenkeliste funktionieren nur im Browser.
Learnings
Was ich mitnehme
Eine Einladung ist auch ein Design-Projekt: Sieht die Website aus wie die Karte, gehört sie für die Gäste sofort dazu.
Effekte, die auf dem Desktop nichts kosten, können ein iPhone ausbremsen. Der größte Bremsklotz war ein Rauschfilter, den Safari bei jedem Scroll-Frame neu berechnet hat.
Messen statt raten: Erst die Zahlen aus Chromium und WebKit haben gezeigt, welche Animation wirklich teuer ist.
Eine gemeinsame Liste ohne Login braucht trotzdem Regeln: Der Server entscheidet, wer zuerst reserviert hat, und nur der eigene Browser darf wieder freigeben.
Fragen zum Projekt
Häufige Fragen
Ist das die echte Einladung?
Nein. Die echte Einladung ist privat und läuft auf einer eigenen Domain. Über „Live ansehen“ sehen Sie dieselbe Seite mit ausgetauschten Informationen: Mila, die Pixel Arena, Preise und Termine sind erfunden, und die Demo sendet nichts.
Kann ich so eine Einladung für meine Feier bekommen?
Ja. Countdown, Zusage mit Begleitpersonen, Anmeldung für Programmpunkte und eine gemeinsame Geschenkeliste lassen sich für Geburtstage, Jubiläen oder Firmenfeiern anpassen – im Look Ihrer Einladungskarte. Schreiben Sie mir über Kontakt. Für Hochzeiten gibt es eine eigene Seite: Hochzeitswebsite.
Wie funktioniert die Geschenkeliste ohne Anmeldung?
Wer einen Wunsch reserviert, trägt nur den Vornamen ein. Der Browser bekommt einen zufälligen Schlüssel, mit dem sich die Reservierung später wieder freigeben lässt. Ob ein Wunsch noch frei ist, entscheidet der Server – zwei Gäste können denselben Wunsch nicht gleichzeitig reservieren.
Wer bekommt die Zusagen?
In der echten Einladung landen Zusagen, Kart-Anmeldungen und Reservierungen im Cloudflare Worker und werden per Telegram gemeldet. In der Demo bleibt alles in Ihrem Browser.
Passende Leistungen
Das steckt dahinter
Ähnliches Projekt?
Sie brauchen so etwas für Ihren Betrieb?
Schreiben Sie mir, was Sie vorhaben. Ich sage Ihnen ehrlich, was sinnvoll ist, und nenne einen Festpreis.