What it is
An online intake for Sela, a fictional physio and movement clinic. A 3D figure on a ringed platform is the interface: tap or click a place on the body and a question card opens beside it with an intensity slider and how it feels; the place then glows in a colour that warms with the intensity, with a pin and a label. Four short animated steps follow (since when, your days, about you), then the plan: the figure turns calm teal while a ribbon spirals up around it, one glowing bead per phase, next to an illustrative outline of the first weeks (length, phases, visits, home routine themes, your answers with Edit links) and a demo booking with a slot picker. The clinic is invented; the plan is sized by simple rules, never judges what is wrong, is labelled illustrative and carries a line that severe or sudden pain needs a doctor. Answers never leave the page and the booking sends nothing (a unit test checks the copy for claim words).
Engineering decisions
- The body is one seamless surface: a signed distance field of 40-odd ellipsoids and tapered capsules joined with a smooth minimum (shoulders, hips and joints flow into each other, a spine groove is carved out), meshed in the browser with naive surface nets. A coarse pass first and fine samples only near the surface keep meshing to about half a second on the high tier (about 79k triangles; 31k on the light tier).
- Zones are not separate meshes. One shader computes the glow per pixel from the 15 zone centres in the figure's own space: a soft falloff, an expanding pulse ring and a crisp edge, back zones masked by their facing so the lower back never glows through the belly. Hover, selection, intensity and the calm plan colour are uniforms eased every frame.
- Picking raycasts the mesh, then a pure, unit-tested
pickZone finds the nearest zone centre (in radii) that faces the hit normal. Every zone is also a button in a list, so keyboard and screen-reader users get the same choices. - The question card, pins, hover tag and week labels are HTML placed every frame from projected points; the card sits beside the body outline rather than on it and becomes a bottom sheet on phones.
- Panel steps leave and enter with a short staggered slide whose direction follows forward or back; the rail fills, plan numbers count up and the week bars grow. Letter keys pick answers, Enter goes on, Escape closes the card.
- Reduced motion: camera cuts instead of flights, no turntable, dust, pulse or scan, instant panel swaps. The render loop pauses off screen and in hidden tabs; a lost WebGL context shows the poster.