SlipVector: Browser-Native Kinetic UI Auditor

A browser-native kinetic stress auditor using Monte Carlo simulations to detect and auto-heal UI misclick hazards caused by human motor variability.

Comment

Inspiration

The Blind Spot in Static Accessibility Static accessibility checkers—such as standard WCAG 2.2 AA (>=24px) and AAA (>=44px) target-size audits—evaluate UI components in complete geometric isolation. They do not model movement trajectories, ballistic approach vectors, Fitts's Law target overshoot, or neuromuscular oscillation (such as 4–8 Hz essential tremor).

Because of this blind spot, an interface can pass strict 48px WCAG 2.2 AAA static checks while placing a destructive action directly in the overshoot path of a primary button. Target sizing alone is insufficient without approach-vector separation. We built SlipVector to bridge the gap between static CSS geometry and real-world human motor variability.

What SlipVector Does

SlipVector is a browser-native kinetic UI stress auditor. It evaluates DOM layouts by running massive Monte Carlo pointing simulations off-thread.

  • Kinetic Swarm Engine: Simulates 500, 2,000, or 10,000 ballistic approach trajectories, rendering particle paths and covariance heatmaps on a 60 FPS Canvas.
  • 5 Rigorous Presets: Includes stress tests like a SaaS Settings Modal, Clinical Infusion Keypad, and the 48px WCAG AAA Stress Case.
  • Parametric Kinematics: Allows auditors to tune Overshoot Ratios, Tremor Frequency, and Transit Jerk to model specific motor profiles.
  • Constrained Auto-Heal Solver: Automatically mitigates identified kinetic hazards by computing orthogonal displacement vectors, outputting a mathematically verified UI layout.

How We Built It (Architecture & Mathematical Rigor)

SlipVector executes entirely in client-side JavaScript. To guarantee scientific validity, the physics engine relies on established Human-Computer Interaction (HCI) models:

1. Fitts's Law Kinematics We evaluate the Index of Difficulty \( ID \) and Movement Time \( MT \) using the Shannon formulation: $$ ID = \log_2 \left( \frac{D}{W} + 1 \right) $$ $$ MT = a + b \cdot ID $$ Our calibrated engine outputs an Effective Throughput of ~5.31 bits/s, derived using \( W_e = 4.133 \times SD \).

2. Wilson Score Confidence Intervals When evaluating destructive collisions, we do not just rely on raw percentages. We compute the 95% Wilson Score Interval to prove the upper bounds of failure rates: $$ \frac{\hat{p} + \frac{z^2}{2n}}{1 + \frac{z^2}{n}} \pm \frac{z}{1 + \frac{z^2}{n}} \sqrt{\frac{\hat{p}(1-\hat{p})}{n} + \frac{z^2}{4n^2}} $$

Challenges We Ran Into

Executing 10,000 continuous trajectory physics calculations combined with bounding-box collision detection natively in the browser caused massive main-thread blocking (UI freezing). We engineered a strict decoupled architecture: an isolated Web Worker computes the stochastic drift and ballistic mathematics, passing only the final Float32Array coordinate buffers back to the main thread for 60 FPS HTML5 Canvas rendering. // Web Worker decoupling for 60fps performance const worker = new Worker(new URL('./worker/simWorker.ts', import.meta.url)); worker.postMessage({ type: 'RUN_SWARM', iterations: 10000, preset: 'WCAG_AAA' });

Accomplishments That We're Proud Of

In our 48px WCAG AAA Stress Case, the Monte Carlo engine detects exactly 81 / 10,000 destructive collisions (0.81%). Triggering our Constrained Auto-Heal Solver algorithmically repositions the destructive target orthogonally out of the approach vector. The re-simulation verifies the rate drops to 0 / 10,000 collisions, backed by a mathematical Wilson 95% upper bound of just 0.04%. Proving that mitigation mathematically—natively in the browser—is our proudest achievement.

What We Learned

We learned that UI engineering must account for time and motion, not just static pixels. Translating complex biomechanical theory into a frictionless, usable developer tool required a deep dive into statistical confidence intervals to ensure we communicated layout safety honestly.

What's Next for SlipVector

Transforming the current interactive studio into a headless CI/CD integration. We want to enable teams to run automated kinetic stress tests on their React or Vue DOM structures via Puppeteer before a PR is ever merged.

Built With

Share this project:

Updates

Submission history