Real-time character systems
Rive / State / Input
02 — State machine anatomy
The same character, the same file. Five moods, a boolean, a trigger — set from outside, resolved inside one Rive state machine with six layers that each own different properties, so combinations never fight.
One character Many states No video
loading…
03 — Eyes / pointer lab
One pointer listener aligns one node. Its position is written into the view model and read back by six systems, each through its own converter chain: different lag, a mirrored range, a leash, a shared target. No React involved in the gaze.
01 — Direct
02 — Lazy
03 — Nervous
04 — Avoidant
05 — Curious
06 — Group
Edge cases handled in Rive: pointer leaving the canvas (exit listener + dispatchPointerExit) · rapid movement (interpolators retarget mid-flight) · touch (pointer events) Handled by the app: losing window focus.
04 — Creature ecosystem
Every creature is its own instance with its own state machine, created from one loaded file. The page runs the ecosystem — where things are, how far your pointer is, who is close to whom, how long you've been still — and writes those facts into each instance. What a fact means is decided inside Rive: one hides, one watches, one gets excited, one dozes, one follows.
4 instances · ≈0 fps · defaults to 4 on touch / low-power devices
05 — Scroll becomes input
progress = 0.0 · state-machine number input
06 — Drag / direct manipulation
Pull the tail, tug an ear, stretch the eye stalk. Each appendage is a chain of bones solved by inverse kinematics toward a handle. Releasing doesn't animate back on a timeline: the handle's constraint strength springs to zero through an elastic converter — the overshoot is physics-like, and entirely Rive.
dragTail – · dragEarL – · dragEarR – · dragStalk – · strained –
pull tail → eyes widen · drag one ear → the other flicks · pull too far → it resists and sweats
07 — Mascot as interface
Hover the left or right of the character and it looks there — Rive writes lookDir, the page highlights the matching button. Click a side to navigate, the body for details, the orb to switch view. Saving never shows a spinner or a tick: the character carries the status.
Specimen 01 / 04 · oko.riv
Click the character’s body for details.
status: Ready
08 — Data binding / live information
React owns the numbers; Rive owns what they look like. Values flow into one bound view-model instance — nothing is re-created, nothing re-renders around the canvas. Rive smooths each change with its own interpolators.
09 — Event round trip
Offer
phase 1 / 4 · round trips 0 · object sphere
User → Rive → App → Rive. The loop is the composition: background, type, metadata and a second instance all answer one click.
10 — Nested artboards
The same Face artboard — itself made of two nested Eye artboards — lives on three unrelated bodies. One value set at the top travels down three levels through keyed nested inputs; every component keeps its own life: eyes blink on their own clocks, accessories bob, companions orbit.
Bodies ─┬─ Tall ────┬─ Face ─┬─ Eye
├─ Round ───┤ └─ Eye
└─ Crawler ─┼─ Solo [Hat · Antenna · Halo]
└─ Companionhover left · middle · right → shared look direction
11 — Keyboard / focus / accessibility
Edge case Input ≠ pointer only
Tab into the selector, move with the arrow keys, choose with Space or Enter. Focus is a real DOM focus with a real accessible name; Rive renders what focus feels like — the lift, the ring drawing itself, the others turning to look.
checking runtime…
Nothing selected
12 — Interrupted state machine
Each layer owns its properties: body, expression, attention, gaze, reactions, blinking. A reaction overrides expression only while it plays, then blends back to wherever the expression layer has moved in the meantime. Repeated triggers bounce between twin states, so nothing restarts with a snap.
13 — Responsive creature
Not a scaled rectangle. With a layout fit the runtime resizes the artboard itself; the artboard’s width and height are bound back into its view model, and the state machine recomposes: full scene when wide, simplified in the middle, a tight portrait when narrow. Resizing never resets the state machine.
14 — Performance / many instances
Each cell is a separate Rive instance drawing to its own canvas. The file is fetched and parsed once; instances share it. Offscreen cells stop rendering, a hidden tab pauses everything, and unmounting disposes each instance — the counters below should balance.
Measure: CPU in the Performance panel, memory via heap snapshots before/after “Remount all”, resize the window while hovering.
15 — Collaborators in Rive
Featured work by friends, designers & Rive creators
Displayed with creator attribution and license information supplied with each project. These ten files are not made by this site — they run here unmodified, in their authors’ own state machines.
Wall labels quote only the readme.md stored beside each file. Fields a README doesn’t contain are left out. The “From the file” notes come from parsing each .riv: its artboards, the state machine its author marked as default, and the kinds of input it listens for.
Collaborator work 01 / 10
Collaborator work 02 / 10
Collaborator work 03 / 10
Collaborator work 04 / 10
Collaborator work 05 / 10
Collaborator work 06 / 10
Collaborator work 07 / 10
Collaborator work 08 / 10
Collaborator work 09 / 10
Collaborator work 10 / 10
The ten collaborator Rive files shown above belong to their respective creators. They are displayed unmodified, with the creator name and the license stated in the README supplied with each work. This site claims no ownership of them; where a README states no license, none is assumed.
Credit, links and license text are reproduced exactly as supplied. Where a creator listed a profile or contact, it is linked; nothing else is added.
| Work | Creator | License | Links |
|---|---|---|---|
| Bici Speed | gabrielrocha.co | CC BY | — |
| Hover House | RyanRumbolt | CC BY | — |
| Hungry Snake | RyanRumbolt | CC BY | — |
| Keycaps | MarcosVisuals | CC BY | — |
| Kuzu Kuzu Mee | musaadanur | Not specified in supplied README | Email ↗Linktree ↗ |
| Silly Scroll | Lala | CC BY | — |
| teenage engineering audio sampler | augustin.hiebel | CC BY | — |
| Vector Feathering: Avatar | Novikoff | CC BY | — |
| Vintage Bike | fredsalaun | CC BY | — |
| 呆鸟 | MoukeMertens | CC BY | — |
16 — Rive as typography
The statement on the left is not HTML. A variable font is embedded in the .riv; its softness, optical size and wonk are bound axes, twelve single-glyph modifiers rotate, lift and stretch letters, and a blend state shakes them. Rive does not have to mean “character animation”.
17 — Rive as microinteraction
Eight controls, 40–64 px each. Every one is a real button with a real accessible state; the drawing, the hover and every in-between frame is Rive. Expression doesn’t need a mascot.
loading micro.riv…
18 — Edge case lab
Twenty things that go wrong in real products, tested on purpose. Some run here; others point at the section that exercises them, with the reading this page is taking right now.
01 Rapid pointer movement
02 Pointer leaving canvas
dispatchPointerExit: characters drift back to wandering. See the eye lab — leave the canvas fast.03 Resize while active
04 Rapid repeated triggers
05 Scroll reversal
06 Transitions interrupted halfway
07 Multiple Rive instances
08 Unmount / remount
09 Delayed .riv loading
10 Failed asset loading
11 Slow devices
12 High DPR displays
13 Mobile touch
14 Keyboard navigation
15 Focus loss
present = false; the drag creature releases.16 Tab hidden / visible
17 Returning via back
18 State restoration
19 Nested state machine events
20 React + Rive changing together
Rive
State / Input / Character / Interface