Fallstudie · 2026 · KI · Web · Mobile
Video-Demos brechen im Zug ab, und ein einziger Kamerawinkel sagt nie, was die Hüfte tun soll.Eine 3D-Rig-Engine, in der sich jede Übung mitdrehen lässt — und dieselbe Engine läuft im Web und nativ.
AxisFit erscheint als Next.js-Web-App und native Expo-App aus einer einzigen TypeScript-Engine, die ein Knochen-Rig je Keyframe-Satz animiert. Jede Übung — Kniebeuge, Kreuzheben, Liegestütz, Klimmzug, Unterarmstütz, Ausfallschritt — ist ein Satz Keyframes, und die Engine übernimmt Griff, Bodenausrichtung und Hang. Eine neue Übung berührt eine Datei und geht auf Web, iOS und Android gemeinsam live.
- Next.js
- React Three Fiber
- Expo
- TypeScript
- Three.js
Im Einsatz
Überblick
- 10+
- Ausgelieferte 3D-geriggte Übungen
- 1
- Animations-Engine
- 3
- Oberflächen · Web, iOS, Android
- 0
- Videodateien im Paket
AxisFit ist eine Fitness-App, in der jede Übung als 3D-geriggte Figur läuft, die sich drehen lässt. Dieselbe Animations-Engine treibt die Next.js-Web-App und die native Expo-App, eine neue Übung ist also ein Satz Keyframes für beide Oberflächen. Trainingspläne, die Übungsbibliothek und ein Fortschritts-Dashboard sind von Tag eins an dabei.
Was ausgeliefert wurde
Was es tut
- Übungsanimationen mit 3D-Rig · Web und nativ, eine Engine
- Übungsbibliothek, Trainings-Player und Fortschritts-Dashboard
- Ein einziger Inhaltssatz treibt beide Oberflächen
- Knochenbewusster Griff und Boden-/Hang-Ausrichtung je Wiederholung
Das Problem
- Video-Demos brechen auf Telefonen mit schlechtem Empfang ab
- Ausführungshinweise sind aus einem einzigen Kamerawinkel schwer zu erkennen
- Zwei parallele Codebasen für Web und nativ verdoppeln jede Änderung
Warum es zählt
- Jede Übung ist drehbar und offlinefähig
- Die Ausführung ist aus jedem Winkel lesbar, den der Sportler wählt
- Eine Engine, ein Inhaltssatz · Funktionen entstehen an einer Stelle
Wie es entstand
- 01 · BRIEF
Festlegen: „jede Übung ist 3D, kein Video“ — und eine Engine für beide Oberflächen.
Die Entscheidung, auf der das Projekt ruhte: dieselbe Engine im Web und auf dem Telefon, damit eine neue Übung ein Keyframe-Satz ist statt zweier paralleler Implementierungen.
- 02 · BUILD
Die Rig-Engine in ein gemeinsames Paket ziehen und beide Oberflächen daraus treiben.
@axisfit/shared enthält die Engine, die Übungsmetadaten, Beispielpläne und den Fortschrittsvertrag. Nativ wird über expo-gl und expo-three gerendert, im Web über react-three-fiber. Beide Oberflächen übergeben Rig und Szene an denselben ExerciseRunner, der Keyframes interpoliert, den Körper am Boden bzw. im Hang ausrichtet und die Griffausrichtung anwendet.
- 03 · SHIP
Bibliothek, Player, Dashboard — live auf Web, iOS und Android.
Drei Oberflächen gingen gleichzeitig und auf derselben Engine hinaus. Eine neue Übung — nur Keyframes — wird auf alle drei ausgerollt.
Stack
Engine
Keyframe-getriebenes Knochen-Rig
mapBones · applyPoseFrame · doGroundAlign · ExerciseRunner — die Engine ist gemeinsames TypeScript, keine Dopplung zwischen Web und nativ.
Bibliothek
Über 10 Übungen ab Tag eins
Kniebeuge, Kreuzheben, Liegestütz, Klimmzug, Unterarmstütz, Ausfallschritt — und das Gerät drumherum, je Oberfläche lokal gebaut, damit die Engine geräteunabhängig bleibt.
Player
Trainingsablauf mit Fortschritt
Plan → Satz → Wiederholung mit einem Rig, das je Frame tickt; nativ sorgt eine PanResponder-Orbitkamera dafür, dass der Sportler den Winkel wählt, der hilft.
Dashboard
Trainingsprotokoll und Zusammenfassung
SessionEntry und summarize() mit austauschbarer Storage-Schnittstelle — localStorage im Web, AsyncStorage nativ, derselbe Vertrag.
Fallstudie
“Jede Fitness-App, die wir kannten, war entweder flache Illustration oder ein Einkamera-Video, das im Zug abbricht. Das Team hat eine gebaut, in der der Körper ein 3D-Modell ist, das man auf dem Bildschirm drehen kann, und dieselbe Animation läuft auf der Website und in der Telefon-App — beide gleichzeitig ausgeliefert. Eine neue Übung dauert Minuten statt eines eigenen Videodrehs.”
Mehr Arbeiten
Nächstes Projekt
BetEdge