Make a Rive animated icon microinteraction
A local web page with an interactive Rive icon driven by a state machine.
First win
A Rive icon plays animations on hover and click in the browser.
Best for
Designers learning Rive
Needs
Claude Code, Rive Community file, Browser
Example outcome
A static icon becomes a tangible microinteraction.
This preview shows the first useful result: a Rive icon embedded in a local page, with state-machine inputs wired to hover and click.
Rive
Idle
Hover
Click
State machine microinteraction
A single icon learns to listen.
A Rive .riv file plays inside a local canvas. Boolean and trigger inputs are wired from the page so hover and click both feel intentional.
@rive-app/canvas
State machine
Static page
01
Hover input
A boolean input flips when the cursor enters or leaves the canvas.
02
Click trigger
A trigger input fires on click so the icon visibly reacts before settling.