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 a placeholder website call-to-action: 5 named inputs (hover, focus, a press trigger, a status number set by the page, and reduced motion), 2 layers (the button and a separate focus ring), 15 states and 23 prioritized transitions with exit times. It is checked once per kind of visitor using only the inputs their device can produce: all 18 essential outcomes are reachable for mouse, touch, keyboard and reduced-motion visitors, hover is never the only way through, the reduced-motion path never moves, and the press animation runs 180 ms inside a 200 ms budget. The same machine drives a live SVG preview and an 18.4-second video of the button cycling through all 13 of its visible states. The production Rive file would be authored in the Rive editor against the real designs, using the same input names.