02 · Interaction
Motion that
answers back
A world is only interesting once you can push on it. We build the push with Rive state machines, where the animation and the logic are the same object.
Move, press, or use the buttons
Why Rive
The animation is the logic.
In a Rive file the designer draws the states and the transitions between them. The runtime does not play a clip, it evaluates a graph. Input goes in, a pose comes out, and the pose is always consistent with the current state.
That means a hover that gets interrupted by a press does not snap. It blends. And the blend was authored by the person who drew the thing, not reverse engineered by the person who wired it up.
Rive is where the parts of a world that need to respond get built: controls, characters, instruments, anything a hand touches. three.js draws the space. Rive draws the things in it that talk back.
The demo above is the same idea built by hand in canvas so you can see the mechanism: four states, blended transitions, inputs from pointer and keyboard.
Notes
Rules we keep.
- N.01
Every transition has a reason
If a motion does not tell the user something about state, it is decoration. Decoration gets cut.
- N.02
Inputs are the spec
Before drawing a frame we list the inputs: pointer, pressure, scroll, time, device tilt. The state machine is designed from the inputs outward.
- N.03
Interrupts must blend
Real hands change their mind mid gesture. Any state must be able to leave for any other state without a visible seam.
Next
Native