Maki Birthday Surprise

Ein privates Geburtstagsgeschenk, ausgeliefert als animierte Microsite aus sechs Szenen, die einen einzelnen Besucher von einem Startbildschirm zum Antippen über einen Torten-Countdown, einen persönlichen Brief bis hin zu einem Polaroid-Finale führt. ClarroxWeb baute sie vollständig mit HTML, CSS und JavaScript: ohne Framework, ohne Build-Schritt, ohne Datenbank, bereitgestellt über einen einzigen FTP-Upload.

Herausforderung

Easther wollte ein Geburtstagsgeschenk machen, das sich anders anfühlt als eine Karte oder ein Video. Etwas, durch das sich die beschenkte Person bewegen kann, mit dem sie interagiert und an das sie sich erinnert. Das Briefing hatte emotionale Präzision: Das Erlebnis musste für eine bestimmte Person an einem bestimmten Tag treffen, mit einer von Zootopia inspirierten Ästhetik, einem herzlichen Brief und drei persönlichen Fotografien.

• Ein Publikum, kein Spielraum für Fehler. Anders als eine Marketing-Website musste diese für eine einzige beschenkte Person auf einem einzigen Gerät funktionieren. Performance-Probleme, kaputte Animationen oder ein unbeholfenes Tap-Ziel würden den Moment zerstören.
• Autoplay-Beschränkungen auf Mobilgeräten. Browser blockieren, dass Audio von selbst startet. Die Enthüllung musste sich trotzdem cineastisch anfühlen, also mussten Musik, Moment und erste Interaktion alle auf demselben Antippen zusammenkommen.
• Übergabe an eine Nicht-Entwicklerin. Easther, die Schenkende, ist angehende IT-Studentin. Sie wollte Fotos austauschen, den Brief bearbeiten oder das Datum später ändern können, ohne Hilfe. Der Code musste klar genug sein, damit sie ihn selbst anpassen kann.

Ansatz

Wir behandelten die Website wie einen Kurzfilm mit sechs Akten. JavaScript übernimmt nur eine Aufgabe: zu steuern, welche Szene sichtbar ist. CSS erledigt den Rest, darunter der Mondaufgang, der Auftritt der Figuren, das Hervorspringen der Torte, das Flackern der Kerze, das Öffnen des Umschlags und das Hineinfallen der Polaroids. Die Animationslogik in CSS zu halten, machte das Timing vorhersehbar und den Code leicht lesbar.

Die Erzählung verläuft durch eine Startszene, ein Treffen der Figuren, einen Blitz-und-Polaroid-Moment, eine Tortenszene mit einem getippten Gruß und einem 3-2-1-Countdown, einen Umschlag, der sich öffnet und einen vollständigen Brief enthüllt, und ein Polaroid-Finale mit einer getippten Verabschiedung. Jede Szene wechselt durch ein einziges Antippen und spiegelt so wider, wie die beschenkte Person sie ganz natürlich durchschreiten würde.

Der Umgang mit Audio war bewusst gewählt. Die Website sucht nach einer optionalen Datei music.mp3 und greift auf eine sanfte Spieluhr-Schleife zurück, die live in JavaScript synthetisiert wird, falls die Datei fehlt. Die Musik startet stummgeschaltet, da Browser Autoplay blockieren, und wird beim ersten Antippen aktiviert, was zugleich der Moment ist, in dem das Erlebnis beginnt. Ein URL-Parameter ?scene=cake lässt die Schenkende zu Testzwecken direkt zu jedem Akt springen, ohne den gesamten Ablauf abzuwarten.

Die gesamte Website wird als eine einzige index.html, ein Stylesheet, ein Skript und ein Ordner mit transparenter PNG-Figurenkunst und drei Polaroid-Fotos ausgeliefert. Kein Framework, keine Build-Pipeline, kein Node, keine Datenbank. Die README führt die Schenkende durch die Bereitstellung über FileZilla und den Austausch von Inhalten (Namen, Daten, Fotos, Brieftext), indem sie eine von drei Dateien bearbeitet.

Ergebnisse

• Ein Geschenk, das die beschenkte Person erneut abspielen kann, kein einmaliges Video, das in einem Chat-Verlauf verloren geht, mit sechs Szenen im Tempo eines Kurzfilms
• Zukunftssicher durch Konstruktion, ohne Abhängigkeiten, die veralten oder kaputtgehen können, sodass die Website online bleibt, solange die Domain lebt
• Wirkt nativ auf dem Smartphone der beschenkten Person, mit Hochformat, Tap-Rhythmus und Audio, das die Autoplay-Regeln des Browsers ohne Fehlersuche befolgt
• Die Schenkende kann Inhalte selbst bearbeiten, indem sie Namen, Fotos, Daten oder Brieftext in einer von drei Dateien austauscht, ohne CMS oder Entwickler
• Keine wiederkehrenden Kosten für die Schenkende, mit einem einzigen FTP-Upload und ohne Konten, Abhängigkeiten oder Abläufe, die danach verwaltet werden müssen

Eingesetzte Tools

HTML, CSS, JavaScript, Web Audio API