Rive-style state machine for a website control

A demo built for a specific brief. Not client work: the material shown is sample data, so what is on display is the mechanism.

I built a Rive-style state machine for an illustrative website call-to-action: 5 named inputs (hover, focus, press trigger, a page-set status number, reduceMotion), 2 layers (Main and a separate Focus ring layer), 15 states and 23 transitions with priorities, conditions and exit times, emitted as state-machine.json. A checker explores it by exhaustive search once per device profile using only the inputs that device produces: mouse 42 configurations, touch 21, keyboard 42, reduced motion 40. It confirms all 18 essential outcomes (ready, working, done, failed, plus a visible focus ring for keyboard users) are reachable in every profile, hover is never the only path, the reduced-motion profile enters 0 moving states, 0 one-shot states can stall, every state is reachable, every input is used, 4 overlapping transition pairs are resolved by declared order, and every one-shot meets its motion budget. The same JSON drives a live SVG preview through a small interpreter with the same rules.