Level Up: Unsere XMAS Aktion 2025

Aber alles auf Anfang. 2024 haben wir uns eine besondere X-Mas Aktion ausgedacht. 
Spin the Joy, Share the Cheer: Unsere Spielidee lehnte sich an die klassische Fruit Machine aus dem Casino an. Walzen drehen sich, Symbole erscheinen und mit etwas Glück, passt alles perfekt zusammen und man gewinnt. Das Team von Liechtenecker, ihr kennt uns, immer voll dabei :), hat daraus eine Human Fruit Machine gemacht und war selbst Teil des Spieles. Auf einer eigens gestalteten Website konnten Kund:innen unsere selbst erstellte Slot-Maschine auslösen und so versuchen 3 gleiche Symbole zu erlangen. Gelang dies, wurde für einen guten Zweck gespendet. 
Auf die Website gelangt man entweder durch unser schon traditionelles Weihnachtsgeschenk: eine Flasche Wein mit QR Code, oder via Newsletter, LinkedIn oder Instagram.

Das Ganze hat uns richtig Spaß gemacht und ist bei unseren Kund:innen gut angekommen, so war schnell klar: Das wollen wir wieder machen. Also haben wir überlegt, wie wir die Aktion noch weiterentwickeln können. Und dann ging es richtig los…

Die Weiterentwicklung:

Für 2025 war deshalb klar: Nicht neu erfinden, sondern weiterdenken. Die Idee und ihre Funktionalität blieben bewusst bestehen, wurden jedoch auf eine neue Ebene gehoben: visuell, technisch und im Nutzungserlebnis. Inspiriert von aktuellen Trends (apropos Trends: hier lest ihr in unserem Post über die UI Trends 2025), mehr spielerischen Details und einem stärkeren Fokus auf Experience haben wir die Aktion wiederholt.
 

Design

Die Grundidee blieb bewusst erhalten: dieselbe Idee, derselbe spielerische Zugang und derselbe Inhalt. Unser Fokus lag darauf, dem bestehenden Konzept ein neues visuelles Gewand zu geben und es gestalterisch auf ein neues Level zu heben.

Zentrales Element der Kampagne ist erneut die Slotmaschine. Diesmal haben wir diese jedoch personalisiert: Statt generischer Symbole kommen Objekte unserer Kund:innen zum Einsatz. Da gab es z.B den Zylinder für unseren Kunden Wr. Staatsoper oder das Röntgenbild für Imaging. Schon die Recherche und Überlegungen, welche Symbole wir von unseren Kund:innen nehmen könnten, hat richtig Spaß gemacht!
Der positive Nebeneffekt: Es entsteht eine direkte Verbindung zu Kund:innen und der spielerische Ansatz bekommt eine persönliche, individuelle Ebene. 

Im Beispiel oben sieht man die Spielidee: Durch Ziehen der Weihnachtskugel wird die Slotmaschine ausgelöst. Hat man 3x dasselbe Symbol, gewinnt man und die Spendenkasse füllt sich; hat man unterschiedliche Symbole, wird man aufgefordert es gleich noch einmal zu versuchen.
In einer Legende unter dem Spiel können User:innen ausserdem mehr über unser Kund:innen und Projekte erfahren.

Gestalterisch war es uns wichtig, eine klare moderne 3D-Schiene zu verfolgen. Weihnachtliche Elemente wurden als dreidimensionale Objekte umgesetzt und gezielt in Szene gesetzt. Ein dunkler Hintergrund, der an den Dark Mode erinnert, bildet die Bühne für die Kampagne und sorgt für einen zeitgemäßen, kontrastreichen Look. Ergänzt wird das Design durch Animationen, die das Scroll-Erlebnis auflockern, Spannung erzeugen und die User:innen intuitiv zum Mitspielen animieren. 

Trotz der vielen spielerischen Details, Übergänge und Animationen standen User:innen immer im Zentrum. Die Seite führt klar und verständlich durch die Kampagne, liefert Inhalte genau dann, wenn sie gebraucht werden, und vermeidet dabei eine visuelle oder inhaltliche Überladung. So entsteht ein ausgewogenes Zusammenspiel aus Interaktion, Information und Unterhaltung.

Insgesamt ist eine stimmige, moderne und interaktive Weihnachtskampagne entstanden, die Bekanntes neu interpretiert und durch persönliche Details sowie zeitgemäßes 3D-Design überzeugt. 
 

Die technische Umsetzung

Von der Flasche in den Browser

Die Kampagne beginnt nicht am Bildschirm, sie beginnt mit einer Weinflasche. Jede:r unserer Kund:innen erhält ein Geschenk mit QR-Code, der direkt zur personalisierten Kampagnenseite führt. Der erste Kontakt passiert also fast immer am Smartphone und damit auf einem Gerät mit limitierter Performance und oft mit schwankender Verbindung.

Das hat unsere technischen Entscheidungen von Anfang an geprägt: Kein Framework-Overhead, kein unnötiger Ballast, stattdessen Vanilla TypeScript, eine modulare Architektur und gezielter Einsatz von WebGL – schlank genug, dass auch ältere Smartphones nicht ins Schwitzen kommen.

Warum sich unsere Animationen butterweich anfühlen

Weil sie es sind – nicht durch Zufall, sondern durch Methode. Wir nennen es BUTTER: Balanced User-Timing with Thoughtful Easing & Rhythm. Klingt wie ein Buzzword? Ist das Gegenteil: ein Regelwerk, das uns zwingt, bei jeder Animation die gleichen Fragen zu stellen. Braucht es das? Hilft es User:innen? Fühlt es sich richtig an?

Animation ist kein Selbstzweck, jede Bewegung hat einen Grund, jedes Easing eine Funktion, jeder Übergang folgt einem Rhythmus, der sich am User orientiert – nicht am Ego des Developers oder Designers. Das bedeutet auch, dass manche Animationen, die in der Entwicklung spektakulär aussahen, es nicht in die finale Version geschafft haben, weil sie zwar cool waren, aber nichts beigetragen haben.

Wenn User:innen über eine Animation stolpern, wenn sie kurz innehalten und denken "hübsch gemacht", dann haben wir unseren Job nicht gut gemacht. Gute Animation ist unsichtbar, sie führt, sie unterstützt, sie fühlt sich selbstverständlich an. Wie Butter. (Oder natürlich auch eine pflanzliche Alternative.)

Drei Engines, ein Erlebnis

Das Intro ist echtes 3D, gerendert mit Babylon.js direkt im Browser – fallende Weihnachtskugeln, abstrakte Formen, Tiefe und Licht, alles in Echtzeit. Eine stumme Bühne wäre aber nur die halbe Miete gewesen, also haben wir mit Tone.js einen dynamischen Soundteppich daruntergelegt: Jede Kugel, die aufprallt, erzeugt einen Ton. Keine Loops, keine vorproduzierten Samples, sondern ein generatives Klangbild, das sich bei jedem Laden anders anfühlt.

Für die eigentliche Auslosung wechseln wir die Strategie: Statt 3D in Echtzeit kommen vorgerenderte, verchromte Kugeln als 2D-Sprites zum Einsatz, physikalisch animiert mit Matter.js. So bekommen wir maximale visuelle Qualität bei minimaler Rechenlast – die Physics Engine kümmert sich um Kollisionen, Gewicht und Trägheit, während die Grafik pixelperfekt bleibt. Das Ergebnis sieht aus wie aufwändiges 3D, läuft aber auch auf dem Smartphone von Weihnachten vor sieben Jahren flüssig.

Handarbeit trifft Simulation

Jedes 3D-Objekt wurde in Blender modelliert und für den Web-Einsatz optimiert, aber der eigentliche Trick liegt im Workflow: Wir kombinieren handanimierte Sequenzen mit prozeduraler Physics – ein Hybridansatz, der uns das Beste aus beiden Welten gibt. Die Kontrolle manueller Keyframes dort, wo Timing und Inszenierung zählen, und die Unberechenbarkeit echter Simulation dort, wo Natürlichkeit gefragt ist. So entstehen Bewegungen, die geplant wirken, aber nie steril.

Und was bleibt?

Eine Kampagne, die technisch ausreizt, was der Browser hergibt, ohne dabei die User:innen aus den Augen zu verlieren. Vanilla TypeScript, drei spezialisierte Engines, ein hybrider Workflow und das BUTTER-Prinzip als roter Faden. Manchmal braucht es eben kein Framework, nur Handwerk.
 

Das Ergebnis

Was als kleine Weiterentwicklungsidee begann, entwickelte sich zu einem deutlich größeren Projekt, als wir ursprünglich geplant hatten....  Aber es hat uns jede Menge Spaß gemacht und wir sind mit dem Ergebnis sehr zufrieden. Unsere Kund:innen waren von Anfang an wieder voll dabei. In Zahlen: Es gab fast 400 Ziehungen, unser Spendenziel also klar erreicht. Die durchschnittliche Verweildauer von 3,5 Minuten zeigt uns, dass die Nutzer:innen nicht nur kurz vorbeigeschaut haben, sondern wirklich in das Erlebnis eingetaucht sind, die Inhalte erkundet haben und vor allem das spielerische Element voll und ganz genutzt haben.

Hier kannst du das Spiel ausprobieren

Gespannt auf unsere Xmas Aktion 2026? Wir auch :)