Export an AI Avatar to React with Stew Factory.

August 27, 2026mouse animationaireact aniamtionweb developmentux uiAvatar creationweb animationai animation

If you want to make a small animated avatar for a React app, this is a really nice workflow. I made a simple little fire mascot in Stew, animated it, and exported the whole thing as React code, so I could drop it into an app without adding any extra player or runtime.

The nice part is that you stay in one place for the visual work, then hand the exported component to your coding agent or plug it into your codebase yourself. Here’s exactly how I made this avatar.

How to make an SVG avatar in Stew Factory

I started in Stew Factory, where I can draw SVG shapes, import assets, or ask AI to generate parts for me. For this example, I wanted a very simple mascot, because simple shapes are easy to animate and they usually read better at small sizes inside an app.

I added a circle from the shapes toolbar and made it larger so I had enough room to work with. That became the base of the character.

For a mascot, I usually want it to feel friendly right away. So I kept the face big, the features simple, and the eyes oversized. That alone goes a long way.

If you want to explore more tutorials after this, the main learning area is here: https://www.stewfactory.app/learn

How I made the fire avatar look like a flame

Once I had the circle, I changed the fill to a linear color. For this fire look, I used yellow at one end and red at the other. That gave the shape the basic flame feel before any animation was added.

Then I used AI to generate cute eyes. I asked for “cute eyes, please”, which was enough to get something usable fast. The result included a little star element I didn’t want, so I just removed it and kept the eyes.

At that point, the character already had the basic look, a round warm gradient shape and a simple face.

How to turn a basic shape into a fire mascot

A perfect circle was too clean for what I wanted, so the next step was to rough up the silhouette.

I selected the circle and converted it to a path. That let me add and move nodes so I could pull parts of the shape outward and downward until it felt a bit more like a flame. I didn’t overdo it. Just a few changes were enough.

This part is important because even before animation, the outline should already suggest the idea. If the shape looks right while standing still, the motion tends to work better too.

How I added interactive motion to the flame shape

After adjusting the nodes, I wanted to make the avatar react in a playful way. So I selected the nodes, went to Animate, and used Run Away.

What that did was make those points react to my mouse. As I moved around the character, the flame shape responded by pulling away. It’s a small detail, but it made the mascot feel much more alive right away.

This was more of a fun interaction than the main animation, but it added personality with almost no work.

How to add flame texture and boiling motion

The next thing I did was add texture, because the shape still felt a little too smooth.

I clicked Add Effect and used Texture. I made the edges rougher so the outline picked up that uneven flame look. Stew uses SVG turbulence for this, but the important part from a design point of view is just that it gives the edge some natural variation.

I kept the grain fairly controlled. Too much detail would have made the mascot noisy. A little roughness was enough.

After that, Stew suggested a Boil animation, which fit the flame idea really well. So I used that. It gave the edges motion and made the whole form feel hot and active, even before I animated the face.

How I made the eyes follow the mouse

At this stage, the outer shape was moving, but the character still felt a bit static. The obvious thing missing was the face.

So I selected the whole group and applied Follow Mouse. That made the avatar track the cursor, which instantly gave it more charm. Now it wasn’t just a moving flame, it was a little character looking back at you.

I also animated the eye reflections with Jitter. I applied that to the highlight elements so they moved on their own just a bit. That tiny motion made the eyes feel less stiff and more playful.

How I animated a hover state for a React avatar

Once the idle and interactive motions were in place, I added a short hover animation. I wanted something fast, so I moved to 0.2 seconds on the timeline.

For the hover state, I made the eyes bigger first. After scaling them up, I adjusted their spacing because they got too close together. Then I copied that animation from one eye to the other so they matched.

After that, I pushed the main shape larger as well. I also moved parts of the flame so the whole character lifted and expanded a bit on hover. The goal wasn’t to build a long sequence. I just wanted a quick reaction that would feel nice inside an app.

That’s really the idea here, short UI-friendly motion. Fast enough to feel responsive, but still expressive.

If you want inspiration for this kind of character work, you can also look through https://www.stewfactory.app/examples

How to export Stew animation as React code

Once the avatar looked right, I set that animation to trigger on hover. So now the component reacts when you move over it, the face tracks the cursor, and the flame has its own motion too.

Then I exported it as React code.

That’s the part I really like about this workflow. There’s no Stew player needed and no extra runtime. You just get the React component for the animation itself. In my example, the generated code for the whole animated avatar was 16 kilobytes.

So if you’re building a React app and you want a small animated mascot, icon, or avatar, you can design the visual in Stew, export the code, and hand it straight to your coding agent to place in your app.

Why I like this workflow for React applications

For little product characters, status avatars, onboarding visuals, or interactive mascots, this approach is really practical.

I can make the SVG, animate it visually, define hover behavior, add mouse-follow interaction, and then export the result as React code. That means I’m not rebuilding the same animation by hand later. The visual work and the handoff are much closer together.

And because the output is just React code, it’s much easier to fit into the app wherever I want.

Try it yourself

If you want to make your own animated avatar, open Stew and start with a simple shape and a face. Add one or two interactions, export the React component, and drop it into your app. You can get started here: https://www.stewfactory.app/auth/login

Full video transcript

Hello everyone, this is Stew Factory. Today, I would like to show you how easy it is to create an animation and bring it directly into your React application. For this example, I made this simple fire animation, cute avatar. I can create animated visual in Stew, export it as React code, and then simply give it to any coding agent and add it to my codebase. No Stew player or any other player, no extra runtime at all. Just your animation and literally your React code. So, let me show you how it works. This is Stew Factory. This is where we create our SVG or import or ask AI to create the assets for us. For our avatar, what we want to do is we have a toolbar here, we can click the shapes here and add a circle. Let's make the circle bigger, so it's easy to animate in this application. The best part is you can put this animation into anywhere you like. Our animation for our application, we want to create a mascot, which is really important, right? In order to create a good mascot, we want to have character, big eyes, and a big face. Whatever makes it cute is what a mascot needs. It has to be friendly. Just want to have big eyes, make it super simple. So, we have this circle here. What we want to do is this: let's start with the color. I want to make a cute fire avatar. Our bright color, in the fire there is a linear color where if you want to do a fire avatar, fire starts yellow to red. What we want to do is pick linear here, and then make this yellow and this one red. And then what we want to do is this: I'm going to go here and ask for cute eyes, please. That should be enough. Right now, finding the asset. Let's drink some coffee meanwhile. Not bad, but I don't want this star, so I'm just going to take it out. There you go. Now, we want to add a texture to this fire. What we can do is click the circle. First thing you want to do is convert this to path. We want to add fire, right? We want to add nodes. I want to have them here, too. Perfect. There you go, bring it down. So far, it looks not bad. But we want to make this fun, right? So for that, you can pick all of the nodes and go to animate, and just press Run Away. So what this did was now that our node, let's press Done, every node we had now runs away from our mouse. There you go. This is just a fun addition to our avatar. Next step for our avatar to be more flamy, we want to add texture. So, we want to click Add Effect. First effect is Texture. I want to make it really rough on the edges. This uses SVG turbulence. As you can see, it already looks like a flame. Not too much detail, but less grain, right? Perfect. And now, Stew already knows what we are up to do, like we were trying to do flame, so it would naturally suggest Boil animation. Perfect. But a couple of things are missing. This is still static, even though we have flame animation here moving around the edges. Something still missing. We want the eyes to move. So, what I'm going to do is this: I'm going to pick the whole group, click Follow Mouse. So now, this friend follows the mouse wherever we go. It's already watching us. To make it even more cute, this reflection can animate as well on its own. So, you just press Jitter. This one as well, I want this to jitter. Done. Perfect. Now though, we want to add animation, right? When I hover this over, I want this to be big, eyes to get bigger, and then maybe this shape move around differently. So that we can add this to our application, what you want to do is this: come here to 0.2 seconds. You want to have that fast animation. Once let's do the timeline, we are on this timeline. All you have to do is just this: big eyes, there you go. But the problem is that they are too close to each other, right? Perfect. Let's just copy this animation and paste it to this, so they have the same animation. I think that's fine. Copy animation, paste animation. Oh, perfect. So, we have this going on, and then I want to have something else, right? I want to move this around. I want to make it extra big. So, let's just do this. This is fine, actually. Big, and then I have a couple of ideas. I want these flames to get bigger, right? I want to move them. Let's just cancel for a second so that we are able to select these. All right. Perfect. And I want this whole thing to go up like this as well. All right, good. Perfect. Super simple animation here. That's it. And what you want to do is this: you want to animate this on hover. So that when you hover this over, let's do everything. Let's see, this is our component. When you hover it, there you go. This is, you can ask your AI agent. This is super easy to put into your code. This is your avatar right here. There you go. It follows you around. Onto the watch, anywhere you like. There you go. And at the end, this is the code that it generates. This is React code. The whole thing is 16 kilobytes, the whole animation. You can just put it into your React code. Thank you so much for watching the video. If you have any questions, please let me know in the comment section below. And this is Stew Factory. Have a wonderful day.

Try it yourself

Everything in this post happens in the editor. Free to start.

Start free