AxisFit

Video demos break on the train, and a single camera angle never tells you what your hip should do. Built a 3D-rig engine where every exercise rotates with you — and the same engine runs on web and native.

• 01User surface

  The whole experience the user sees

  This frame shows the live product: 3d-driven functional-training app — web + mobile share one bone-rig engine that animates every exercise. Every component is ours · scope, design, code, deploy.

• 02Stack behind the screen

  What's powering it: Next.js, React Three Fiber, Expo

  5 stack components run behind this frame · Next.js, React Three Fiber, Expo drive the visible UI; the rest sit in the data layer. All studio-owned.

• 03What we shipped

  3D-rig exercise animations · web + native, one engine

  Every exercise is rotatable and offline-ready

• 04Status

  Private deploy · under NDA.

  Per the client's request the URL stays private · the build, architecture, and lessons can be shared in a scoping call.

• 01 · BRIEF

  Pin 'every exercise is 3D, no video' — and one engine for both surfaces.

  Decision the project rested on: same engine on the web and on the phone, so a new exercise is one keyframe set instead of two parallel implementations.

• 02 · ARCHITECTURE

  Stack decisions before any code.

  Decision doc captured the data flow, Next.js, React Three Fiber, Expo, TypeScript role split, and the failure modes we'd handle in v1 vs defer. Cross-service boundaries (where AI ends and the web app begins) were drawn here so neither side leaked into the other later.

• 02 · BUILD

  Extract the rig engine into a shared package, drive both surfaces from it.

  @axisfit/shared holds the engine, exercise metadata, sample plans, the progress contract. Native renders through expo-gl + expo-three; web renders through react-three-fiber. Both surfaces hand a rig + scene to the same ExerciseRunner, which lerps keyframes, ground-/hang-aligns the body and applies grip orientation.

• 04 · POLISH

  Performance, accessibility, and observability.

  PSI / a11y / coverage budgets enforced as launch gates. Logging + metrics wired before cut-over · the team can answer 'is it working?' from a dashboard, not a Slack thread. Threat-model checklist signed off before traffic hits the box.

• 03 · SHIP

  Library, player, dashboard — live on web, iOS and Android.

  Three surfaces went out the door at the same time on the same engine. Adding a new exercise — keyframes only — deploys to all three.

• 01Engine

  Keyframe-driven bone-rig

  mapBones · applyPoseFrame · doGroundAlign · ExerciseRunner — the engine is shared TypeScript, no duplication between web and native.

• 02Library

  10+ exercises on day one

  Squat, deadlift, push-up, pull-up, plank, lunge — and the equipment around them, built locally per surface so the engine stays equipment-agnostic.

• 03Player

  Workout flow with progress

  Plan → set → rep with a per-frame ticking rig; native uses a PanResponder orbit camera so the athlete picks the angle that helps.

• 04Dashboard

  Session log + summary

  SessionEntry + summarize() with a pluggable Storage interface — localStorage on web, AsyncStorage on native, the same contract.

• 
  01Frame

  Landing · Train the angle. Own the rep.

  Three-axis isometric glyph (X/Y/Z = the joint axes the engine rotates around) with the tagline Form · Function · Force. The 3D rig stands on the page from the first second.

• 
  02Frame

  Workout player · Squat with grip and ground align

  Per-frame ticking lerps the keyframes; the engine grounds the feet and orients the grip — same code path on web and native.

• 
  03Frame

  Exercise library · 10+ cards, one engine

  Every card uses the same engine — open one, the rig is interactive on the spot, not a video frozen at a pose.

• 
  04Frame

  Plank · ground-aligned, side-camera

  Ground alignment makes static holds readable from any angle · the athlete can pick the side-camera that actually checks the hip line.