Mit einem Bild starten, schütteln, einen Effekt entdecken und das Ergebnis direkt weitergestalten. Ich wollte herausfinden, ob sich die Interaktion, die wir 2013 entwickelt hatten, als moderne Web-App noch besser anfühlen könnte.
2013, wenige Monate nach der Gründung unseres Unternehmens, begann ich, einen iOS-Prototyp rund um eine einfache Idee zu entwickeln: Kunst, Bewegung und direkte Touch-Interaktion in einer Bild-App zu verbinden, die kaum Erklärungen benötigte.
Der Prototyp entstand für eine Wettbewerbspräsentation bei der Fondation Beyeler. Ich war krank und konnte nicht selbst an der Präsentation teilnehmen, aber das neko-Team gewann das Projekt. Aus dem Prototyp wurde ArtShaker, unsere erste iOS-App.
Ich programmierte sowohl den Prototyp als auch die später veröffentlichte iOS-App vollständig selbst. neko entwickelte das visuelle Design und gestaltete Grafiken sowie Icons. Die App erschien am 25. September 2013 und belegte einen Monat später Platz 3 unter den Fotografie-Apps im Schweizer iPhone App Store. Im folgenden Jahr portierte ich sie auf Android. Diese Version brachte andere Herausforderungen mit sich, insbesondere die damals viel grössere Bandbreite mobiler GPUs.
Bei der zentralen Idee ging es nie um einen klassischen Effekt-Browser. ArtShaker startete mit einem bereits sichtbaren Bild. Man konnte es unverändert lassen, das Gerät schütteln, um einen Effekt zu entdecken, oder selbst einen auswählen. Horizontale, vertikale und diagonale Gesten steuerten drei sorgfältig abgestimmte Parameter direkt auf dem Bild. Die Bildfläche war die Benutzeroberfläche.
Diese Einfachheit war das Ergebnis zahlreicher Detailarbeiten. Beim Schütteln zog sich das Bild in einer kurzen Animation zusammen und kehrte danach in seine Ausgangsgrösse zurück. Die Gestenrichtung rastete nach einer kleinen Bewegung ein, damit sie beim Bearbeiten nicht wechseln konnte. Bewegungssensoren, Berührungsfeedback und Übergänge gaben der Interaktion ein physisches Gefühl. Kamera, Fotomediathek, Einfügen, Zuschneiden, Kombinieren, Rückgängig, Vergleichen, Speichern und Teilen unterstützten denselben Ablauf, statt mit ihm zu konkurrieren.
Ich behielt ArtShaker auf meinem iPhone, nachdem ihr Store-Eintrag verschwunden war, und öffnete sie von Zeit zu Zeit, oft mit meinen Kindern oder meiner Familie. Ich wusste immer, dass das Konzept gut war, und die Nutzung machte weiterhin Spass.
Nicht nur ich nutzte sie weiter. Die Opt-in-Analysen von App Store Connect weisen zwischen dem 1. Januar 2020 und dem 1. August 2026 insgesamt 1’525 Sitzungen aus; in allen 80 Monatswerten wurden Sitzungen erfasst. Selbst 2026 verzeichnete jeder abgeschlossene Monat zwischen 8 und 15 Sitzungen. Da diese Kennzahl nur Personen einschliesst, die der Weitergabe von Analysedaten zugestimmt haben, liegt die tatsächliche Zahl höher. Apple weist die fehlende Gesamtsumme in dieser Ansicht nicht aus; 1’525 ist deshalb eine dokumentierte Untergrenze und keine Schätzung der gesamten Nutzung.
Ich wollte die Idee schon lange wieder aufgreifen. Art Filters ist mein Director’s Cut dieses Interaktionskonzepts: der ursprüngliche Ablauf, für das Web neu aufgebaut und ergänzt um alles, was wir seither gelernt haben.
Es ist kein Relaunch der Marke ArtShaker oder ihrer früheren Inhalte. Die neue App verwendet eine unabhängige Open-Access-Galerie und enthält keine Kunstwerke der Fondation Beyeler, keine Sponsoringmaterialien und keine anderen Kundeninhalte. Der alte Quellcode und unsere detaillierten Spezifikationen dienten als Referenz für das Verhalten. Benutzeroberfläche und Rendering wurden auf die Browserplattform portiert.
Bei der Neuimplementierung ging es weniger darum, Objective-C zu übersetzen, als das spürbare Verhalten zu bewahren: das Timing, die Reaktion auf Gesten, die Filterbereiche, die Komposition und die Freiheit, jederzeit aufzuhören, ohne einen Effekt anwenden zu müssen. Diese Details über aktuelle Browser und GPUs hinweg zuverlässig umzusetzen, erforderte dieselbe Art von Feinabstimmung wie bei den nativen Apps.
Die aktuelle Benutzeroberfläche basiert auf React und TypeScript, während WebGL2 die Effekte rendert. Wo es unterstützt wird, läuft der Renderer mit OffscreenCanvas in einem Worker; andere Browser verwenden einen Fallback im Hauptthread. React verwaltet den Zustand der Benutzeroberfläche und die Historie, plant aber nicht jeden interaktiven GPU-Frame.
Ein Performance-Problem zeigte, weshalb diese Trennung wichtig ist. Unter Firefox für Windows mit einer älteren NVIDIA GTX 980 dauerte das Kompilieren des grossen Shaders etwa 40 Millisekunden, das Linken jedoch ungefähr 3,7 Sekunden. Die Benutzeroberfläche konnte dadurch eingefroren wirken, obwohl die JavaScript-Arbeit selbst gering war.
Die Lösung bestand darin, die Effekte in sechs Shader-Familien aufzuteilen, die erst bei Bedarf gelinkt und danach in einem einzigen weiterverwendeten WebGL-Kontext zwischengespeichert werden. Das sichtbare Bild, Effektvorschauen, Kombinationen und das exportierte Bild verwenden denselben Renderer, statt zusätzliche Kontexte und Programme zu erzeugen.
Der Renderer berücksichtigt auch den normalen Lebenszyklus einer installierten Web-App, einschliesslich Unterbrechung und Wiederaufnahme unter iOS. Bei Bedarf erzeugt er GPU-Ressourcen neu und stellt das aktuelle Bild sowie den Filterzustand wieder her. Web-Apps machen hier getrennte Plattformimplementierungen überflüssig, beseitigen aber nicht die Unterschiede zwischen den Plattformen.
Eine installierte Web-App muss sich ausserdem merken, wo jemand aufgehört hat. Art Filters speichert das aktuelle Galerie- oder lokale Bild, den vollständigen Filterstapel mit exakten Parametern, den Zufallsmodus und eine begrenzte Rückgängig-Historie in der lokalen Datenbank des Browsers. Nach dem Neuladen oder Neustart der App wird dieser Zustand wiederhergestellt, während ein normaler Start über die Website bewusst neu beginnt. Bild und Bearbeitungszustand bleiben auf dem Gerät; sie werden weder hochgeladen noch synchronisiert.
Dasselbe Nutzungserlebnis, für das 2013 separate native iOS- und Android-Apps nötig waren, läuft heute als eine einzige installierbare Web-App. Auf dem Smartphone kann sie Kamera, Touch, Bewegungssensoren, GPU-Rendering und natives Teilen nutzen und bleibt gleichzeitig auf dem Desktop mit Gesten und einem Schütteln-Button vollständig bedienbar.
Das bedeutet nicht, dass native Apps nicht mehr benötigt werden. Eine tiefe Plattformintegration, Hintergrundausführung und gerätespezifische Funktionen können weiterhin für sie sprechen. Für diese Anwendung hat sich der Ausgangspunkt jedoch verändert. Die moderne Webplattform deckt fast das gesamte Nutzungserlebnis ab und bietet Desktop-Nutzern dieselbe Anwendung ohne separate Portierung.
Für mich zählt vor allem, dass die ursprüngliche Interaktion den Plattformwechsel überstanden hat. Man startet weiterhin mit einem Bild. Man kann schütteln, entdecken, anpassen und aufhören, sobald sich das Ergebnis richtig anfühlt. Die Technologie hat sich vollständig verändert, aber der Grund, weshalb ich die alte App immer wieder öffnete, ist geblieben.
Art Filters im appamics Playground ausprobieren.
Ich freue mich über Rückmeldungen dazu, wie sich die Interaktion in ungewöhnlichen Browsern, auf älteren GPUs oder mobilen Geräten anfühlt.