Add browser and device-facing test harness for motion interactions

[Jesssullivan]

Problem

The repo has solid unit and property-based tests for core physics, but the motion integration work needs browser-facing coverage for pointer, scroll, and device-motion flows. Browser sensor APIs also need explicit mock seams so tests can prove behavior without physical devices.

Scope

• Add a small browser test or demo harness for interaction behavior.
• Mock device motion/orientation events and permission responses.
• Cover pointer coordinate mapping, scroll stickiness, motion permission gating, and cleanup.
• Document manual test steps for actual mobile devices.

Validation

• New test command or clearly documented browser harness.
• Existing pnpm test, pnpm check, pnpm build, Bazelisk build, and npm dry-runs still pass.

[Jesssullivan]

Browser/device harness slice is implemented locally.\n\nWhat changed:\n- Added a reusable pointer physics controller with rAF throttling, pointer/mouse fallback, coalesced-event handling, and deterministic cleanup.\n- Added unit coverage for pointer controller behavior and ScrollHandler browser cleanup.\n- Added ScrollHandler.dispose() so scroll decay frames/timers are cancelled on component teardown.\n- Extended the local dev harness with toggles for pointer, scroll, and device motion plus request/calibrate controls.\n- Documented the manual browser/device flow in README.\n\nResearch notes used for the implementation:\n- W3C Device Orientation and Motion defines DeviceMotionEvent as SecureContext, includes accelerationIncludingGravity, and models requestPermission around accelerometer/gyroscope permission and transient activation: https://www.w3.org/TR/orientation-event/\n- MDN documents DeviceMotionEvent.requestPermission as secure-context, limited-availability, and requiring a user gesture: https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent/requestPermission_static\n- W3C Pointer Events documents coalesced pointer events; the controller consumes the latest coalesced sample once per animation frame: https://www.w3.org/TR/pointerevents/\n- Chrome DevTools Sensors can emulate orientation for desktop manual checks: https://developer.chrome.com/docs/devtools/sensors/\n\nValidation passed: pnpm check, pnpm test, pnpm build, pnpm check:release-metadata, pnpm check:package, pnpm audit --audit-level low, git diff --check, nix flake check --no-build, nix develop . --command bazel build //:pkg //:typecheck //:test --verbose_failures, npm pack --dry-run ./bazel-bin/pkg, npm publish --dry-run --ignore-scripts --access public ./bazel-bin/pkg, and a Vite dev-server smoke check of / and /main.ts.

[Jesssullivan]

Working-tree update, not committed yet:

• Dev harness now supports reproducible query params for theme, blob count, animation, pointer physics, scroll physics, device motion, dark mode, and control visibility.
• Added browser controls for device-motion permission and calibration, plus toggles for pointer/scroll/device integrations.
• README now includes the manual browser-device checklist for desktop and mobile sensors.

Svelte check, unit tests, build, Bazel, package lint, npm pack, and npm publish dry-run all pass locally.

[Jesssullivan]

Follow-up browser verification added in the working tree, not committed yet:

• Added pnpm run test:browser:motion backed by scripts/probe-motion-cdp.mjs.
• The probe starts Vite on an isolated port, launches headless Chrome via CDP, clicks the dev harness Spoof Tilt control, then uses DeviceOrientation.setDeviceOrientationOverride.
• It asserts that events reach the page and that TinyVectors SVG path geometry changes.

Current local result: synthetic orientation and CDP orientation both update the motion status line and change blob geometry. This confirms the listener/component boundary is now working; remaining work can focus on force shaping and algorithm tuning.

[Jesssullivan]

Follow-up working-tree update: the browser harness now verifies actual accelerometer emulation too.

pnpm run test:browser:motion now starts Vite, launches headless Chrome through CDP, verifies synthetic orientation, verifies DeviceOrientation.setDeviceOrientationOverride, then enables CDP accelerometer sensor override and sends readings through Emulation.setSensorOverrideReadings.

Latest local result: CDP accelerometer reached TinyVectors as motion x 0.41 y -0.31 z 1.00 and changed SVG blob geometry.

[Jesssullivan]

Browser/device harness validation update:

• Headless Chrome probe passes with secure localhost, DeviceMotionEvent, DeviceOrientationEvent, and Accelerometer all available.
• Synthetic deviceorientation, DeviceOrientation.setDeviceOrientationOverride, and Emulation.setSensorOverrideReadings({ type: "accelerometer" }) each reach TinyVectors and change blob geometry.
• Manual harness still supports Spoof Tilt / Neutral Tilt; automated coverage now exercises the true CDP accelerometer path.

[Jesssullivan]

Visual/browser harness follow-up after rendered screenshots:

• Captured desktop and mobile via CDP with explicit viewport metrics.
• Confirmed the app fills 1440x900 and 390x844 viewports; mobile controls resolve to x=8/right=382 in a 390px viewport.
• Tightened dev harness CSS so controls use viewport-relative width, stable grid rows, opaque blurred background, max-height/overflow, and fixed app viewport sizing.
• Validation still passes: pnpm run check, pnpm run test, pnpm run build, pnpm run test:browser:motion, and git diff --check.

[Jesssullivan]

Local browser harness pass on PR #39 head 84a7fc8 with the dev app running at http://127.0.0.1:5175/:

• Initial render: 32 SVG paths, 8 body paths, 32 radial gradients.
• Initial listeners: wheel: 1, pointermove: 1, deviceorientation: 1.
• Spoof tilt updates status to motion x -1.00 y 0.78 z 0.00 and changes body geometry.
• Runtime toggles clean up listeners correctly: scroll-off removes wheel, pointer-off removes pointermove, device-motion-off removes deviceorientation.

Recommendation: codify this listener lifecycle probe as a script. Keep pointer/scroll direction metrics diagnostic rather than strict until the algorithm has a deterministic test hook or a direct pointer-force term.

[Jesssullivan]

Follow-up pushed to PR #39 as c9148d0 (test(browser): cover interaction listener cleanup).

The browser motion probe now codifies the local listener lifecycle check:

• initial render has 32 SVG paths, 8 body paths, and 32 radial gradients
• initial listeners include one wheel, one pointermove, and one deviceorientation
• disabling scroll removes wheel
• disabling pointer physics removes pointermove
• disabling device motion removes deviceorientation

Validated with pnpm run test:browser:motion, node --check scripts/probe-motion-cdp.mjs, pnpm run test (150 tests), and git diff --check.

[Jesssullivan]

Planning update: browser harness should grow from delivery checks into tolerant feel-contract checks from TIN-853 / #40: idle drift bounded, gravity directional bias, pointer locality, scroll impulse decay, and listener lifecycle. Avoid coefficient-specific tests.

[Jesssullivan]

Pushed 1f2125e test(browser): assert disabled io starts clean to PR #39.\n\nThe Chrome/CDP probe now starts with deviceMotion=false, pointerPhysics=false, and scrollPhysics=false, verifies TinyVectors still renders, and asserts no wheel, pointermove, or deviceorientation listeners attach on initial load. This complements the existing toggle-off listener cleanup checks by covering the auto-enable off path directly.\n\nValidation: pnpm run test:browser:motion.