Rive Integration Demo is a sample OutSystems Reactive Web application that demonstrates how to integrate Rive animations into an OutSystems app. The featured example is a friendly polar bear that reacts to a login form: it follows the cursor as the user types their username, covers its eyes when the password field is focused, and plays a success or fail animation when the login is submitted.

This is a demonstration project, not a production-ready component. Its purpose is to show one possible approach to loading the Rive runtime, wiring up a Rive state machine to OutSystems Input widgets, and triggering animations from client actions. You're encouraged to study the code, adapt it to your own animations, and improve on it.

What's included

• A LoginBear reusable block containing the canvas, the login form, and the Rive integration logic.
• A RiveLoginBear JavaScript class (in the Scripts folder) that encapsulates the runtime loading, DOM wiring, and trigger handling.
• OnReady and OnDestroy lifecycle handlers to set up and tear down the animation cleanly.
• TriggerSuccess and TriggerFail client actions that fire the corresponding Rive state machine triggers.
• A demo screen that shows the block in use with a simulated login flow.

How it works

The Rive runtime is loaded once per page from a public CDN. To work around OutSystems' AMD-compatible script loader (which would otherwise prevent the UMD bundle from attaching to window.rive), the script briefly hides window.define while the runtime loads, then restores it. The .bin animation file is included as a module resource and referenced by URL.

The LoginBear block accepts the IDs of its root container and the Username/Password Input widgets as parameters. On OnReady, the script resolves the actual <input> elements, attaches focus/blur/input listeners, and connects them to the Rive state machine inputs (isChecking, isHandsUp, numLook, trigSuccess, trigFail).

Accessibility

The integration respects the user's prefers-reduced-motion OS/browser setting. When reduced motion is enabled, the Rive state machine is not started and the animation is presented as a static image instead of an interactive one.

Known limitation

If the user clicks Login while the bear is mid-transition (for example, immediately after focusing the password field), the success or fail animation may not play because the state machine hasn't yet returned to a state that listens for the trigger. This is specific to how this example's state graph is wired in the Rive editor — not a Rive limitation. In a production integration, you would either add transitions in the Rive file from every interactive state directly to success/fail, or listen for EventType.StateChange and defer firing the trigger until the machine returns to idle.

Credits
The login bear animation in this demo is shared on the Rive Community under the Creative Commons Attribution 4.0 International License (CC BY 4.0). No modifications were made to the animation itself; only the integration code is original to this project.