Skip to page content and links

Work

Aisera Interactive Diagrams

Interactive animated diagrams for Aisera, built through No Diamonds Web Services. This project is a good example of what Rive can do beyond character animation -- the brief called for technical diagrams that users could explore through click and hover interactions, with nodes that expand to reveal detail and state-based visibility that shows or hides information contextually.

Description

Interactive animated diagrams for Aisera, built through No Diamonds Web Services. This project is a good example of what Rive can do beyond character animation -- the brief called for technical diagrams that users could explore through click and hover interactions, with nodes that expand to reveal detail and state-based visibility that shows or hides information contextually.

The project went through 20+ iterations, from v3 through v5.4, each refining the interaction model and visual hierarchy. That iteration count reflects the nature of interactive diagram design: every time you change the information architecture, the interaction patterns and animation timing need to follow. It is not just about making things move -- it is about making complex information navigable.

The final product was a Rive animation that functioned more like a lightweight interactive application than a traditional animation. Click a node, and it expands to show connected details. Hover over a relationship line, and the related elements highlight. The entire state management system was built using Rive's state machines and ViewModel architecture.

Technical Details

Built entirely in Rive with no external code. The interaction system used state machines for each interactive element, with ViewModel properties tracking which nodes were expanded, which were focused, and which detail panels were visible. Trigger inputs from Rive listeners handled all pointer events (click, hover, enter, exit).

The hard parts were managing visual complexity as multiple nodes expanded at once, keeping animation timing coordinated across interconnected elements, and maintaining render performance with many simultaneous state transitions.

Deliverables

• Interactive Rive diagram with click/hover triggers

• State-based node expansion system

• Multi-state visibility management

• 20+ production iterations (v3 through v5.4)

• Web-ready Rive file optimized for embedding

Testimonial

5.0/5.0 client rating on project completion.

Project media

Aisera diagram: interactive walkthrough (on white)

Recorded from diagram_v5.5.riv: the diagram enters, then each capability pill opens its card and lights its platter.

Have a project in mind?

Explore motion design and interactive animation services, or get in touch about your project.