Golf back care in the browser. A 3D swing lab, a symptom-to-exercise planner, guided warm-up and cool-down routines, an exercise library, an injury prevention guide, and a round-by-round pain log.
No build step is needed to run it. Open index.html or serve the folder:
python3 -m http.server 8765
# then open http://localhost:8765
- Swing lab (
js/lab3d.js). A golfer in three.js r147: 24 articulated vertebrae with discs, ribcage, pelvis, shoulder girdle and skull inside a holographic body, with IK-driven arms, legs and club. The skeleton is built procedurally so it renders instantly; after first paint the lab fetchesassets/anatomy/spine.binand swaps real BodyParts3D bones onto the same 24 joints. If that asset is slow, missing or corrupt the procedural skeleton simply stays, and nothing else changes. The swing is keyframed; trunk rotation is distributed across hips, thoracic spine, lumbar spine and shoulder girdle according to how compliant each is. Toggling stiff hips, a stiff mid back or a reverse spine angle pushes rotation into the lumbar spine, which lights up as it goes past its roughly 13 degrees of capacity. Click any body part to start a plan for it. - Fix it. Pick a spot, when it hurts and what it feels like. You get a Play on / Take a drop / Pick up verdict, what is probably going on, a timed set of exercises to start now, a daily routine, the swing faults that usually cause it, what to avoid, and when to see someone.
- Routines. Seven guided routines with a timer: first-tee warm-up, post-round cool-down, daily back care, mid-back unlock, elbow rehab, strength basics, and a 90-second between-holes reset.
- Exercises. 45 exercises with line-drawn figures, steps, cues, mistakes and the golf reason for each.
- Prevent. The seven common golf injuries, ten swing faults with body causes and fixes, and round-day habits.
- Log. Pain after each round, warm-up yes or no, how you got around. A chart shows whether warming up is paying off.
Everything is saved in the browser with localStorage. Nothing leaves your device — except a
feedback message, if you write one and press Send.
#feedback in the app, feedback.html on the web (also the App Store support URL). Both post
the same JSON to POST /api/feedback, a Cloudflare Pages Function in functions/api/feedback.js
that forwards it to an e-mail relay. The endpoint is called with an absolute URL so it works
from inside the iOS wrapper, where the page is served from a custom scheme and the request is
cross-origin with a null Origin.
The destination address is never in this repository, in the app bundle or on the site. It lives in a Pages secret and is read only inside the Function:
npx wrangler pages secret put FEEDBACK_TO --project-name backswing # destination address
npx wrangler pages secret put WEB3FORMS_KEY --project-name backswing # preferred relay
Two relays, chosen at runtime. WEB3FORMS_KEY wins when it is set: it authenticates with a key,
so it does not care what IP the request comes from. Without it the Function falls back to
FormSubmit, which rate-limits by source IP — and since every Cloudflare Worker shares an egress
IP, that path answers {"ok":false,"reason":"relay_rate_limited"} in practice. Setting the
Web3Forms key is the whole fix; no code change is needed.
Nothing about the sender is added on the way through: no IP, no user agent, no headers. Only the message, the category, and — if the golfer ticks the box — one line naming the app version and the device family.
index.html shell and 3D lab markup
css/styles.css design tokens (dark and light), layout, components
js/data.js exercises, routines, planner content, faults, injuries, habits
js/figures.js 2D pose drawings for the exercise cards
js/anatomy.js loader/decoder for the BodyParts3D spine asset
js/lab3d.js the three.js swing lab
js/app.js router, views, planner, player, log
build.js bundles everything into dist/index.html (single file)
tools/build-anatomy.mjs build-time extractor for assets/anatomy/spine.bin
assets/anatomy/ the real anatomy: spine.bin plus its licence
assets/anatomy/spine.bin is a separate 168 KB binary, fetched lazily rather than inlined: base64
would add a third to its size and put it on the critical path, and the lab does not need it to
work. Regenerate it with node tools/build-anatomy.mjs against a local human-atlas checkout.
Run node build.js to produce dist/index.html, a single self-contained file (fonts and three.js still load from their CDNs).
The site is static. Any static host works. For Cloudflare Pages with direct upload:
node build.js && npx wrangler pages deploy dist/site --project-name backswing
There is also a GitHub Actions workflow in .github/workflows/deploy.yml that deploys on every push to main. It needs two repository secrets: CLOUDFLARE_API_TOKEN (a token with the Cloudflare Pages edit permission) and CLOUDFLARE_ACCOUNT_ID.
The exercises and guidance are general, physio-informed advice for recreational golfers. They are not a diagnosis. The app is explicit about red-flag symptoms that need a doctor or physiotherapist, and it says so on every plan.
The anatomical geometry is BodyParts3D, © The Database Center for Life Science, licensed under
CC BY 4.0 — commercial use is permitted with
attribution, which the app carries on screen beneath the swing lab. The pipeline it came through
is Human Atlas (MIT). The full notice, including what was modified and the third-party licence
texts, is in ATTRIBUTION.md, which build.js copies into dist/site/ so it has
a public URL. build.js also fails the build if that credit ever disappears from the shipped HTML.