DEV Community: Mascot Engine

Rive Data Binding and ViewModels for Interactive Characters

Mascot Engine — Fri, 17 Jul 2026 21:06:32 +0000

At Mascot Engine, we build interactive character systems that connect animation, product behaviour, and application data.

In this tutorial, we will use a sample Rive file named mascotengine.riv to demonstrate how Rive Data Binding and ViewModels can control an interactive character.

The sample Mascot Engine character will be able to:

Change emotions
Enter listening, thinking, and talking states
Follow pointer or touch positions
Display dynamic text
Change its colors at runtime
React to success and error events
Connect to React or Next.js application logic

Sample Mascot Engine file structure

Our sample mascotengine.riv file uses the following structure:

mascotengine.riv
├── Artboard: Mascot Engine
├── State Machine: Mascot Engine State Machine
└── ViewModel: MascotEngineViewModel
    ├── displayName
    ├── emotion
    ├── activity
    ├── isTalking
    ├── lookX
    ├── lookY
    ├── accentColor
    ├── celebrate
    └── showError

This ViewModel becomes the public interface between the Mascot Engine character and the application.

The internal character rig, animation timelines, transitions, and blend states can change without requiring the developer to rewrite the integration, provided the ViewModel contract remains stable.

Add the Mascot Engine file

Place the sample file inside the application’s public directory:

public/
└── mascotengine.riv

The file can then be loaded using:

src: '/mascotengine.riv'

React implementation

'use client';

import {
  useRive,
  useViewModel,
  useViewModelInstance,
  useViewModelInstanceBoolean,
  useViewModelInstanceColor,
  useViewModelInstanceEnum,
  useViewModelInstanceNumber,
  useViewModelInstanceString,
  useViewModelInstanceTrigger,
} from '@rive-app/react-webgl2';

export default function MascotEngineCharacter() {
  const { rive, RiveComponent } = useRive({
    src: '/mascotengine.riv',
    artboard: 'Mascot Engine',
    stateMachines: 'Mascot Engine State Machine',
    autoplay: true,
    autoBind: false,
  });

  const mascotViewModel = useViewModel(rive, {
    name: 'MascotEngineViewModel',
  });

  const mascotInstance = useViewModelInstance(
    mascotViewModel,
    {
      name: 'MascotEngineDefault',
      rive,
    }
  );

  const {
    value: displayName,
    setValue: setDisplayName,
  } = useViewModelInstanceString(
    'displayName',
    mascotInstance
  );

  const {
    value: emotion,
    setValue: setEmotion,
  } = useViewModelInstanceEnum(
    'emotion',
    mascotInstance
  );

  const {
    setValue: setIsTalking,
  } = useViewModelInstanceBoolean(
    'isTalking',
    mascotInstance
  );

  const {
    setValue: setLookX,
  } = useViewModelInstanceNumber(
    'lookX',
    mascotInstance
  );

  const {
    setValue: setLookY,
  } = useViewModelInstanceNumber(
    'lookY',
    mascotInstance
  );

  const {
    setRgb: setAccentColor,
  } = useViewModelInstanceColor(
    'accentColor',
    mascotInstance
  );

  const {
    trigger: celebrate,
  } = useViewModelInstanceTrigger(
    'celebrate',
    mascotInstance
  );

  return (
    <section>
      <div
        style={{
          width: '100%',
          maxWidth: 600,
          height: 500,
          margin: '0 auto',
        }}
      >
        <RiveComponent />
      </div>

      <p>
        Character: {displayName ?? 'Mascot Engine'}
      </p>

      <p>
        Emotion: {emotion ?? 'Loading'}
      </p>

      <button
        type="button"
        onClick={() => setDisplayName?.('Nova')}
      >
        Change Name
      </button>

      <button
        type="button"
        onClick={() => setEmotion?.('thinking')}
      >
        Think
      </button>

      <button
        type="button"
        onClick={() => setIsTalking?.(true)}
      >
        Start Talking
      </button>

      <button
        type="button"
        onClick={() => {
          setLookX?.(0.7);
          setLookY?.(-0.2);
        }}
      >
        Look Right
      </button>

      <button
        type="button"
        onClick={() => setAccentColor?.(52, 120, 246)}
      >
        Change Theme
      </button>

      <button
        type="button"
        onClick={() => celebrate?.()}
      >
        Celebrate
      </button>
    </section>
  );
}

How Mascot Engine structures interactive characters

At Mascot Engine, we treat the ViewModel as a stable contract between the character system and the application.

The application controls clear product-level properties such as:

activity = thinking
emotion = happy
isTalking = true
lookX = 0.5
lookY = -0.2

The developer does not need to control individual bones, timelines, mouth shapes, eye layers, or internal animation transitions.

Those details remain inside mascotengine.riv.

This makes the character easier to:

Integrate
Test
Update
Reuse
Hand over to developers
Connect to AI or audio systems
Support across multiple platforms

Building an AI assistant with Mascot Engine

The sample Mascot Engine character can respond to an AI application lifecycle:

User starts recording
→ activity = listening

Application processes the request
→ activity = thinking

Audio response begins
→ activity = talking

Audio response finishes
→ activity = idle

Example:

function setMascotActivity(
  activity: 'idle' | 'listening' | 'thinking' | 'talking'
) {
  setActivity?.(activity);

  if (activity === 'thinking') {
    setEmotion?.('thinking');
  }

  if (activity === 'talking') {
    setEmotion?.('happy');
  }

  if (activity === 'idle') {
    setEmotion?.('neutral');
  }
}

This allows mascotengine.riv to function as a complete interactive character system instead of a collection of disconnected animation clips.

Need a production-ready interactive character?

Mascot Engine creates interactive character systems for:

AI products
SaaS platforms
Educational applications
Mobile apps
React and Next.js products
Flutter and React Native applications
Onboarding experiences
Virtual assistants and support agents

Our work can include:

Character preparation and rigging
Emotional animation systems
Interactive State Machines
Data Binding and ViewModels
Listening, thinking, and talking states
Pointer, touch, and gaze controls
Lip-sync and viseme systems
Runtime customization
Developer-ready documentation
Web and mobile integration preparation

We do not deliver only a looping character animation.

Mascot Engine builds a reusable character system that can respond to real application logic.

Explore Mascot Engine

Start an interactive mascot project

About the author

Praneeth Kawya Thathsara is a Rive Animator and Interactive Motion Designer specializing in production-ready character systems for AI, SaaS, web, and mobile products.

He is the founder of Mascot Engine.

How to Integrate an Interactive Rive Mascot into a React or Next.js Web App

Mascot Engine — Fri, 17 Jul 2026 20:48:04 +0000

A mascot inside a web application should do more than play the same looping animation.

A properly designed interactive mascot can:

React to application events
Follow the user's pointer
Change emotions
Enter listening, thinking, and talking states
Celebrate successful actions
Respond to errors
Guide users through onboarding
Connect to an AI assistant or text-to-speech system

In this tutorial, we will integrate an interactive Rive mascot into a React or Next.js application and control it using application logic.

We will build a mascot with:

Pointer-controlled eye movement
Multiple emotional states
Talking controls
A celebration trigger
Rive Data Binding and ViewModels
A reusable React component

Why use Rive for an interactive mascot?

Traditional GIF, video, and Lottie animations are useful for linear playback. However, an interactive product mascot needs to respond dynamically to what is happening inside the application.

Rive allows designers and developers to place multiple character behaviours inside a single .riv file.

The application can then control properties such as:

emotion = happy
isTalking = true
lookX = 0.65
lookY = -0.20
celebrate = trigger

This makes the character part of the product interface rather than a decorative animation placed on top of it.

What we are building

Our React component will communicate with a Rive ViewModel containing these properties:

Property	Type	Purpose
`emotion`	Enum	Changes the mascot's emotional state
`isTalking`	Boolean	Starts or stops the talking behaviour
`lookX`	Number	Controls horizontal gaze
`lookY`	Number	Controls vertical gaze
`celebrate`	Trigger	Plays a celebration reaction

The exact property names are not required by Rive. They are simply a clean naming convention that both the animator and developer can agree on.

1. Prepare the Rive file

Before writing React code, the .riv file should contain:

A character artboard
Idle and reaction animations
A State Machine
A ViewModel connected to the State Machine
A default ViewModel instance
Runtime properties such as emotion, isTalking, lookX, and lookY

A useful character structure might look like this:

Mascot
├── Artboard: Mascot
├── State Machine: Mascot State Machine
└── ViewModel: MascotViewModel
    ├── emotion
    ├── isTalking
    ├── lookX
    ├── lookY
    └── celebrate

Set the ViewModel and its default instance inside the Rive editor. This allows the React runtime to bind to it automatically.

Export the file as:

mascot.riv

2. Add the Rive file to the project

For a React or Next.js project, place the file inside the public directory:

public/
└── mascot.riv

It will then be available from:

/mascot.riv

3. Install the React runtime

Install the Rive React WebGL2 package:

npm install @rive-app/react-webgl2

Or with pnpm:

pnpm add @rive-app/react-webgl2

Or Yarn:

yarn add @rive-app/react-webgl2

The WebGL2 React package provides the useRive hook, the Rive rendering component, and Data Binding hooks.

4. Create the interactive mascot component

Create a new component:

components/InteractiveMascot.tsx

Add the following code:

'use client';

import { useState } from 'react';
import type { PointerEvent } from 'react';

import {
  useRive,
  useViewModelInstanceBoolean,
  useViewModelInstanceEnum,
  useViewModelInstanceNumber,
  useViewModelInstanceTrigger,
} from '@rive-app/react-webgl2';

import styles from './InteractiveMascot.module.css';

export default function InteractiveMascot() {
  const [isTalking, setTalkingState] = useState(false);

  const { rive, RiveComponent } = useRive({
    src: '/mascot.riv',
    artboard: 'Mascot',
    stateMachines: 'Mascot State Machine',
    autoplay: true,
    autoBind: true,
  });

  const viewModelInstance = rive?.viewModelInstance;

  const { value: emotion, setValue: setEmotion } =
    useViewModelInstanceEnum('emotion', viewModelInstance);

  const { setValue: setIsTalking } =
    useViewModelInstanceBoolean('isTalking', viewModelInstance);

  const { setValue: setLookX } =
    useViewModelInstanceNumber('lookX', viewModelInstance);

  const { setValue: setLookY } =
    useViewModelInstanceNumber('lookY', viewModelInstance);

  const { trigger: celebrate } =
    useViewModelInstanceTrigger('celebrate', viewModelInstance);

  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {
    const bounds = event.currentTarget.getBoundingClientRect();

    const relativeX =
      (event.clientX - bounds.left) / bounds.width;

    const relativeY =
      (event.clientY - bounds.top) / bounds.height;

    const normalizedX = relativeX * 2 - 1;
    const normalizedY = relativeY * 2 - 1;

    const clampedX = Math.max(-1, Math.min(1, normalizedX));
    const clampedY = Math.max(-1, Math.min(1, normalizedY));

    setLookX?.(clampedX);
    setLookY?.(clampedY);
  }

  function resetGaze() {
    setLookX?.(0);
    setLookY?.(0);
  }

  function toggleTalking() {
    const nextValue = !isTalking;

    setTalkingState(nextValue);
    setIsTalking?.(nextValue);
  }

  return (
    <section className={styles.section}>
      <div
        className={styles.mascotContainer}
        onPointerMove={handlePointerMove}
        onPointerLeave={resetGaze}
        aria-label="Interactive animated mascot"
      >
        <RiveComponent className={styles.riveCanvas} />
      </div>

      <div className={styles.controls}>
        <p>
          Current emotion: <strong>{emotion ?? 'Loading'}</strong>
        </p>

        <div className={styles.buttonGroup}>
          <button
            type="button"
            onClick={() => setEmotion?.('happy')}
          >
            Happy
          </button>

          <button
            type="button"
            onClick={() => setEmotion?.('thinking')}
          >
            Thinking
          </button>

          <button
            type="button"
            onClick={() => setEmotion?.('confused')}
          >
            Confused
          </button>

          <button
            type="button"
            onClick={toggleTalking}
          >
            {isTalking ? 'Stop Talking' : 'Start Talking'}
          </button>

          <button
            type="button"
            onClick={() => celebrate?.()}
          >
            Celebrate
          </button>
        </div>
      </div>
    </section>
  );
}

Replace the artboard, State Machine, property, and enum names with the exact names used inside your Rive file.

For example, the following values must exist inside the emotion enum:

happy
thinking
confused

5. Add the component styles

Create:

components/InteractiveMascot.module.css

Add:

.section {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px;
}

.mascotContainer {
  position: relative;
  width: 100%;
  height: 480px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  background: #f8fafc;
  touch-action: none;
}

.riveCanvas {
  width: 100%;
  height: 100%;
}

.controls {
  margin-top: 24px;
}

.buttonGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.buttonGroup button {
  padding: 10px 16px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
  font: inherit;
  cursor: pointer;
}

.buttonGroup button:hover {
  background: #f3f4f6;
}

.buttonGroup button:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.3);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .section {
    padding: 16px;
  }

  .mascotContainer {
    height: 360px;
  }
}

A Rive canvas receives its dimensions from its container. If the animation does not appear, first check that the parent element has an explicit width and height.

6. Use it in a React application

Import the component into your page:

import InteractiveMascot from './components/InteractiveMascot';

export default function App() {
  return (
    <main>
      <h1>Meet our interactive assistant</h1>
      <InteractiveMascot />
    </main>
  );
}

7. Use it in a Next.js App Router project

Rive rendering and pointer interactions require browser-side JavaScript.

That is why the component begins with:

'use client';

The rest of your Next.js page can remain a Server Component.

For example:

import InteractiveMascot from '@/components/InteractiveMascot';

export default function HomePage() {
  return (
    <main>
      <section>
        <h1>Your AI learning assistant</h1>
        <p>
          Ask a question and receive help from an interactive
          animated character.
        </p>
      </section>

      <InteractiveMascot />
    </main>
  );
}

Only the interactive mascot component needs to be a Client Component. You do not need to convert the entire page or layout into one.

How the pointer-controlled gaze works

Browser pointer coordinates are measured in pixels.

Rive character controls are easier to manage using normalized values such as:

-1 = left or top
 0 = centre
 1 = right or bottom

The pointer position is first calculated relative to the mascot container:

const relativeX =
  (event.clientX - bounds.left) / bounds.width;

That returns a value between 0 and 1.

We then convert it to a value between -1 and 1:

const normalizedX = relativeX * 2 - 1;

The result is passed to the character:

setLookX?.(normalizedX);

Inside Rive, lookX and lookY can control eye position, head rotation, body lean, or a mixture of all three.

For a more natural result, avoid moving only the pupils. Add a small amount of head movement and use smoothing inside the Rive State Machine.

Connecting the mascot to application events

The mascot becomes useful when it reacts to real product logic.

Form validation

function handleSubmit(isValid: boolean) {
  if (isValid) {
    setEmotion?.('happy');
    celebrate?.();
  } else {
    setEmotion?.('confused');
  }
}

Loading an AI response

async function askAssistant(question: string) {
  setEmotion?.('thinking');
  setIsTalking?.(false);

  const response = await fetch('/api/assistant', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ question }),
  });

  if (!response.ok) {
    setEmotion?.('error');
    throw new Error('The assistant request failed.');
  }

  const data = await response.json();

  setEmotion?.('happy');
  setIsTalking?.(true);

  return data;
}

Onboarding progress

function handleStepComplete(step: number) {
  if (step === 3) {
    celebrate?.();
    setEmotion?.('happy');
  }
}

Authentication errors

function handleLoginError() {
  setEmotion?.('concerned');
}

The animation system does not need to understand your complete application. It only needs a clear set of properties that map product events to character behaviours.

State Machine inputs or Data Binding?

Older Rive projects often expose Boolean, Number, and Trigger inputs directly from a State Machine.

Those inputs can still exist in legacy projects. However, Rive now recommends Data Binding and ViewModels for new implementations.

Data Binding provides a more structured contract between the .riv file and application code.

Instead of searching for several unrelated inputs, developers can work with a defined model:

MascotViewModel
├── emotion
├── isTalking
├── lookX
├── lookY
└── celebrate

It also allows properties such as:

Strings
Colors
Enums
Images
Nested ViewModels
Lists
Artboards
Triggers
Numbers
Booleans

This becomes especially useful when the same mascot needs different names, themes, outfits, expressions, or user-specific data.

Structuring a production-ready mascot

A scalable mascot system should not contain dozens of disconnected animations controlled by unclear input names.

A better structure is to separate the character into behavioural groups.

Core states

idle
listening
thinking
talking
success
error
sleeping

Emotional states

neutral
happy
excited
confused
concerned
sad
surprised

Continuous controls

lookX
lookY
talkIntensity
energy
progress

One-time reactions

celebrate
wave
blink
notice
correct
incorrect

The animator and developer should agree on this contract before integration begins.

A small integration document can prevent many problems later:

Property: emotion
Type: Enum
Values: neutral, happy, thinking, confused, error

Property: isTalking
Type: Boolean
Default: false

Property: lookX
Type: Number
Range: -1 to 1
Default: 0

Property: lookY
Type: Number
Range: -1 to 1
Default: 0

Property: celebrate
Type: Trigger

Common integration problems

The mascot is not visible

Check that the parent container has a defined height:

.mascotContainer {
  width: 100%;
  height: 480px;
}

A canvas inside a container with no height may appear as if it failed to load.

The ViewModel properties are unavailable

Confirm that:

The artboard has a ViewModel assigned
A default ViewModel instance exists
autoBind: true is enabled
The property names exactly match the Rive file
The correct artboard and State Machine are loading

Property names are case-sensitive.

For example:

isTalking

is not the same as:

istalking

The character animation restarts unexpectedly

Keep the useRive hook and the returned RiveComponent together inside a dedicated wrapper component.

Avoid frequently unmounting and remounting the canvas or changing its React key.

Pointer tracking works on desktop but not mobile

Use Pointer Events rather than mouse-only events.

This works across mouse, pen, and touch input:

onPointerMove={handlePointerMove}

However, mobile devices do not have a persistent cursor. For mobile interfaces, consider controlling gaze using:

Touch position
Device orientation
Face tracking
UI element location
App-provided lookX and lookY values

Do not design a critical character behaviour that depends only on desktop hover.

The mascot keeps talking forever

Do not connect talking to a permanent looping animation without application control.

Use an explicit Boolean:

setIsTalking?.(true);

Then stop it when audio playback finishes:

audio.addEventListener('ended', () => {
  setIsTalking?.(false);
});

For accurate speech animation, use viseme timing rather than a simple random mouth loop.

Performance recommendations

Keep Rive isolated in its own component

This prevents unrelated React state changes from unnecessarily recreating the Rive canvas.

Avoid unmounting the canvas repeatedly

Show and hide the surrounding section when possible instead of constantly destroying and recreating the component.

Keep the `.riv` file focused

Remove unused assets, unnecessary paths, hidden artboards, and animations that are not required at runtime.

Avoid permanently active animations

An idle state can contain occasional blinking and breathing without requiring every layer to animate continuously.

Test on real devices

A mascot that performs well on a desktop computer may behave differently on lower-powered mobile devices.

Test:

Loading time
Canvas resolution
Memory usage
Multiple mascot instances
Touch interactions
Long-running State Machines

Accessibility considerations

An animated mascot should support the interface, not become the only way to understand it.

Make sure that:

Important messages are also displayed as text
Controls are keyboard accessible
The mascot does not block form fields
Fast flashing effects are avoided
Sound does not autoplay unexpectedly
Reduced-motion preferences are respected
The product remains usable if the animation fails

The mascot can improve personality and guidance, but core product functionality should never depend entirely on animation.

Taking the mascot further

Once the basic integration is working, the same system can support:

AI assistant states
Text-to-speech lip sync
Viseme-based mouth animation
Runtime theme colors
Dynamic character names
Different outfits or accessories
Progress-based reactions
User achievements
Notification reactions
Scroll-driven behaviour
Multiple character personalities
Context-aware emotional responses

The strongest interactive mascots are designed as product systems from the beginning.

Animation quality matters, but the runtime architecture, property naming, transitions, developer handoff, and application integration matter just as much.

Need an interactive mascot for your product?

Mascot Engine designs and builds production-ready interactive Rive mascots for AI products, SaaS platforms, mobile apps, and web experiences.

The work can include:

Character preparation and rigging
Emotional animations
Interactive State Machines
Data Binding and ViewModels
Pointer and touch interactions
Mobile-ready gaze controls
AI listening, thinking, and talking states
Viseme lip sync
Flutter, React Native, and web preparation
Developer-ready input documentation

Instead of delivering only a looping animation, Mascot Engine creates a character system that can connect to real product logic.

Start an interactive mascot project with Mascot Engine.

Official resources

About the author

Praneeth Kawya Thathsara is a Rive Animator and Interactive Product Designer specializing in production-ready mascot systems for AI, SaaS, mobile, and web products. He is the founder of Mascot Engine.

Your SaaS Mascot Should Do More Than Just Sit There

Mascot Engine — Mon, 13 Jul 2026 00:11:45 +0000

Interactive Rive mascots can react, think, talk, and connect to real AI, SaaS, web, and mobile products.

Your SaaS Mascot Should Do More Than Just Sit There 👀

A lot of products have mascots.

They look great on landing pages.

Maybe they wave.

Maybe they blink.

Maybe there is a small looping animation.

And that's it.

But I think a product mascot can do much more.

What if your mascot actually knew what was happening inside your
product?

That's the idea I've been exploring with Mascot Engine.

I don't just want to animate characters.

I want to build interactive mascot systems that connect to real
products.

From a mascot animation to a product system

Imagine you're building an AI app.

A user opens the app.

The mascot is idle.

The user sends a message.

The mascot starts thinking.

The AI begins responding.

The mascot switches to talking.

The task completes.

The mascot celebrates.

Something goes wrong?

The mascot reacts to the error.

The flow could look like this:

User Action
    ↓
Product State
    ↓
Runtime Input
    ↓
Rive State Machine
    ↓
Mascot Reaction

This isn't a video.

It isn't a GIF.

It isn't a pre-rendered animation playing randomly.

The product controls the mascot at runtime.

That's where things become interesting.

A mascot can understand product states

Well... not literally understand them 😄

The application still owns the logic.

But we can expose a small runtime contract from the Rive file.

For example:

emotion = 2
isTalking = true
lookX = 40
lookY = -10
celebrate = trigger
error = false

The developer controls these values from the application.

The Rive State Machine handles the character behavior.

The application controls what happened.

The mascot system controls how the character reacts.

I really like this separation.

Why I use Rive for interactive mascots

Traditional animation tools are great for videos and motion design.

But product animation has different requirements.

The character needs to react to application events.

The animation may need runtime values.

Developers may need to control emotions.

An AI assistant may need lip sync.

A character's eyes may need to follow a pointer or touch position.

This is where Rive becomes interesting.

With Rive, I can build systems using:

State Machines
Data Binding
Number inputs
Boolean inputs
Triggers
Runtime properties
Nested artboards
Interactive vector animation

Instead of delivering:

mascot-animation.mp4

I can deliver something closer to:

mascot.riv

State Machine: MascotState

Inputs:
- emotion
- isTalking
- lookX
- lookY
- celebrate
- error

Now the mascot is part of the product.

Not just decoration.

AI products make mascots much more interesting

AI apps are one of my favorite use cases for this.

Most AI interfaces currently look similar.

You have an input, a send button, a loading indicator, and a response.

It works.

But sometimes the experience can feel a little lifeless.

Now imagine an AI character.

When you're speaking, it listens.

When the model is processing, it thinks.

When TTS starts, it talks.

Its mouth reacts using viseme-based lip sync.

Its eyes can move using runtime gaze values.

The product can change its emotion based on the current experience.

Listening
    ↓
Thinking
    ↓
Answering
    ↓
Talking
    ↓
Idle

The important part is that these states aren't random.

They can be connected to actual product events.

TTS and viseme lip sync

This is another area I've been exploring.

If an AI assistant uses Text-to-Speech, the mascot shouldn't just play a
generic talking loop.

We can create different mouth shapes.

For example:

REST
A
E
I
O
U
MBP
FV
L

The application or TTS pipeline provides the current viseme value.

The mascot reacts.

TTS Audio
    ↓
Viseme Data
    ↓
Runtime Value
    ↓
Rive Mouth Shape

The result is a character that feels more connected to the voice.

For AI tutors, assistants, learning apps, and companion products, this
can completely change the personality of the experience.

Gaze should also be controlled by the product

Pointer tracking is fun on the web.

The mascot can follow your mouse.

But what happens on mobile?

There is no mouse cursor.

That's why I prefer exposing runtime gaze values.

lookX = -100 to 100
lookY = -100 to 100

A Flutter, React Native, React, or web application can control these
values.

The mascot can look at touch positions, UI elements, notifications,
buttons, user interactions, or camera-based face tracking.

The Rive animation handles the visual movement.

The application provides the data.

A beautiful Rive file isn't enough

Working with developers taught me something important.

A beautiful animation can still be difficult to integrate.

Imagine receiving a Rive file with inputs like:

Input 1
Bool 2
Trigger
New Number

😅

Now the developer has to guess everything.

I try to think about the runtime structure while building the mascot.

Inputs should be predictable.

emotion
ageMode
isTalking
lookX
lookY
Celebrating
Error

The developer shouldn't need to reverse-engineer the animation.

That's also why I've started building Mascot Engine Developer Docs.

The goal is to create a practical integration reference for Web,
JavaScript, React, Flutter, React Native, State Machines, Data Binding,
pointer interactions, TTS, viseme lip sync, and runtime inputs.

Because delivering the .riv file is only part of the job.

The mascot needs to work inside the real product.

Vibe coders are welcome too 😄

Maybe you're using AI coding tools.

Maybe you're building a SaaS alone.

Maybe you're an indie hacker.

Maybe you're shipping a strange app at 3 AM because the idea wouldn't
leave your head 😄

That's fine.

If you can explain your product flow, I can help think about the mascot
behavior.

User opens app
→ Mascot wakes up

User starts typing
→ Mascot watches the input

AI is processing
→ Mascot thinks

AI starts TTS
→ Mascot talks

Task completed
→ Mascot celebrates

API error
→ Mascot reacts

You don't need to know everything about Rive State Machines.

Tell me what happens inside your product.

We can turn those events into character behavior.

Mascots shouldn't be random decoration

I don't think every product needs a mascot.

The mascot should have a purpose.

Maybe it guides the user.

Maybe it represents the AI.

Maybe it reacts to progress.

Maybe it makes an educational product friendlier.

Maybe it gives a SaaS product a recognizable personality.

The question I like asking is:

What does the mascot know about the current product state?

If the answer is nothing, it's probably just decoration.

If the product can control the character, that's where we can build
something interesting.

I'm opening a few discounted Mascot Engine slots 👀

I'm currently opening a limited number of project slots for AI, SaaS,
web, and mobile products.

Quick Mascot --- \$350

4 animated states
Rive mascot animation
Basic State Machine
Production-ready .riv delivery

Interactive Mascot --- \$750

7 animated states
Runtime controls
Interactive State Machine
Developer-ready input structure
Rive source delivery

AI Mascot --- \$1,200+

AI assistant mascot system
TTS-ready animation
Viseme-based lip sync
Runtime gaze controls
Emotion states
Developer integration support

Built for real products using Rive.

Building an AI app, SaaS, web app, or mobile product?

Send me your product.

I'll take a look.

If I see an interesting way an interactive mascot could fit into the
experience, I'll tell you.

No complicated animation brief needed.

You can simply send me:

Product link:
What the product does:
Framework:
What the mascot should react to:

Visit:

https://mascotengine.com

I'm Praneeth Kawya Thathsara.

I'm a Rive animator and interactive product designer building Mascot
Engine.

I don't just want to make mascots move.

I want to connect them to products.

Make them react.

Make them think.

Make them talk.

Make the product feel a little more alive. 👀

If you're building something interesting, feel free to reach out.

Vibe coders welcome too 😄⚙️

Stop Shipping Static Mascots: Building Interactive Mascot Systems for Modern Apps

Mascot Engine — Mon, 20 Apr 2026 15:37:12 +0000

Stop Shipping Static Mascots: Building Interactive Mascot Systems for Modern Apps

Most product teams treat mascots as visual assets. A nice illustration placed in onboarding, empty states, or marketing pages.

But in production environments, static mascots quickly become invisible.

They don’t react.

They don’t guide.

They don’t contribute to the product experience.

This article introduces a different approach: treating mascots as interactive systems, not visuals.

The Problem with Static Mascots

In real-world applications:

Users ignore static illustrations after the first view
They don’t communicate system state
They don’t assist onboarding or flows
They add visual weight without functional value

For product designers and developers, this creates a gap:

You have a character, but it does nothing.

The Shift: Mascots as Systems

Instead of thinking:

“Where do we place the mascot?”

Start thinking:

“What does the mascot do inside the product?”

An interactive mascot system should:

React to user actions (clicks, taps, gestures)
Reflect real-time states (loading, success, error)
Guide onboarding flows
Integrate with product logic
Optionally connect with AI for dynamic responses

This transforms the mascot from decoration into a UI component with behavior.

Core Architecture of a Mascot System

A production-ready mascot system typically includes:

1. State Machine

The mascot is driven by states such as:

Idle
Thinking
Talking
Success
Error

Transitions between these states are triggered by events.

2. Event Layer

Events come from your application:

User clicks
API responses
Navigation changes
Form submissions

These events control mascot behavior.

3. Animation Engine

This is where tools like Rive become critical.

Rive allows you to:

Define state machines visually
Control animations via inputs
Sync UI events with animation transitions

4. Integration Layer

Your frontend (Flutter, Web, React Native) connects to the mascot system and sends events.

Example: Flutter Integration

Below is a simplified example of controlling a mascot using Rive in a Flutter app.

import 'package:flutter/material.dart';

import 'package:rive/rive.dart';

class MascotWidget extends StatefulWidget {

  @override

  _MascotWidgetState createState() => _MascotWidgetState();

}

class _MascotWidgetState extends State<MascotWidget> {

  late StateMachineController _controller;

  SMIInput<bool>? isHappy;

  SMIInput<bool>? isError;

void _onRiveInit(Artboard artboard) {

    _controller = StateMachineController.fromArtboard(

      artboard,

      'MascotStateMachine',

    )!;

    artboard.addController(_controller);

isHappy = _controller.findInput&lt;bool&gt;('isHappy');
isError = _controller.findInput&lt;bool&gt;('isError');



}

void onSuccess() {

    isHappy?.value = true;

  }

void onError() {

    isError?.value = true;

  }

@override

  Widget build(BuildContext context) {

    return Column(

      children: [

        SizedBox(

          height: 200,

          child: RiveAnimation.asset(

            'assets/mascot.riv',

            onInit: _onRiveInit,

          ),

        ),

        ElevatedButton(

          onPressed: onSuccess,

          child: Text('Trigger Success'),

        ),

        ElevatedButton(

          onPressed: onError,

          child: Text('Trigger Error'),

        ),

      ],

    );

  }

}

What’s happening here:

The mascot is driven by a state machine
UI actions trigger state changes
The mascot visually reflects system feedback

This is not animation playback.

This is behavior-driven UI.

Real Product Use Cases

Interactive mascots can be used across real applications:

Onboarding

Guide users through steps
React when users complete actions
Provide contextual hints

System Feedback

Show loading (thinking state)
Confirm success (happy state)
Alert errors (error state)

AI Interfaces

Act as a conversational UI layer
Sync lip movements with speech
Represent system intelligence visually

Engagement Layer

React to hover/click events
Create micro-interactions that increase retention

Why This Matters for Product Teams

For designers:

You design behavior, not just visuals
You define how the mascot responds to real interactions

For developers:

You integrate a controllable UI component
You connect animation logic with product logic

For founders:

You differentiate your product experience
You create a more engaging and memorable interface

Common Mistakes to Avoid

Treating the mascot as a one-time animation
Over-animating without purpose
Not connecting mascot behavior to real system events
Ignoring performance considerations in production

A mascot should not be noisy.

It should be precise, responsive, and meaningful.

Final Thought

Static mascots belong to marketing pages.

Interactive mascots belong inside products.

If your application already has a mascot, the real question is:

What does it actually do?

Need Help Building a Production-Ready Mascot System?

If you’re working on a real product and want to implement interactive mascots properly — from design to animation to integration — you can reach out:

https://mascotengine.com/

call

WhatsApp

+94717000999

Email

mascotengine@gmail.com

DEV Community: Mascot Engine

Rive Data Binding and ViewModels for Interactive Characters

Sample Mascot Engine file structure

Add the Mascot Engine file

React implementation

How Mascot Engine structures interactive characters

Building an AI assistant with Mascot Engine

Need a production-ready interactive character?

How to Integrate an Interactive Rive Mascot into a React or Next.js Web App

Why use Rive for an interactive mascot?

What we are building

1. Prepare the Rive file

2. Add the Rive file to the project

3. Install the React runtime

4. Create the interactive mascot component

5. Add the component styles

6. Use it in a React application

7. Use it in a Next.js App Router project

How the pointer-controlled gaze works

Connecting the mascot to application events

Form validation

Loading an AI response

Onboarding progress

Authentication errors

State Machine inputs or Data Binding?

Structuring a production-ready mascot

Core states

Emotional states

Continuous controls

One-time reactions

Common integration problems

The mascot is not visible

The ViewModel properties are unavailable

The character animation restarts unexpectedly

Pointer tracking works on desktop but not mobile

The mascot keeps talking forever

Performance recommendations

Keep Rive isolated in its own component

Avoid unmounting the canvas repeatedly

Keep the .riv file focused

Avoid permanently active animations

Test on real devices

Accessibility considerations

Taking the mascot further

Need an interactive mascot for your product?

Official resources

Your SaaS Mascot Should Do More Than Just Sit There

Your SaaS Mascot Should Do More Than Just Sit There 👀

From a mascot animation to a product system

A mascot can understand product states

Why I use Rive for interactive mascots

AI products make mascots much more interesting

TTS and viseme lip sync

Gaze should also be controlled by the product

A beautiful Rive file isn't enough

Vibe coders are welcome too 😄

Mascots shouldn't be random decoration

I'm opening a few discounted Mascot Engine slots 👀

Quick Mascot --- \$350

Interactive Mascot --- \$750

AI Mascot --- \$1,200+

Building an AI app, SaaS, web app, or mobile product?

Stop Shipping Static Mascots: Building Interactive Mascot Systems for Modern Apps

Stop Shipping Static Mascots: Building Interactive Mascot Systems for Modern Apps

The Problem with Static Mascots

The Shift: Mascots as Systems

Core Architecture of a Mascot System

1. State Machine

2. Event Layer

3. Animation Engine

4. Integration Layer

Example: Flutter Integration

What’s happening here:

Real Product Use Cases

Onboarding

System Feedback

AI Interfaces

Engagement Layer

Why This Matters for Product Teams

Common Mistakes to Avoid

Keep the `.riv` file focused