How to Build a Mouse-Tracking Mascot for Your Website Using AI

You have probably seen a website where a small cartoon character in the corner turns its head, points, or waves as your cursor moves across the screen. It looks like custom animation work built by a motion designer, but the version most creators use today starts from a single photo and needs no animation software at all.

This is the exact three-tool workflow behind that effect: one AI image, one AI video generated in Google Flow, and one prompt to Claude Code that turns the video into a mouse-tracking mascot. Everything below, including the prompts, is the version we tested end to end.

What you need

A character image. One clean photo or illustration, front facing, on a plain background, with the face and both hands visible. Pull one from Pinterest, or generate your own with any AI image tool.

A Google account for Google Flow. Flow is Google's combined AI image and video tool, and it works on any Google account. A free account is enough to try this once.

Claude Code. Anthropic's coding assistant, run from a terminal window on your own computer. You describe what you want in plain sentences, and it writes and runs the commands itself, including installing FFmpeg, the free tool that pulls frames out of a video.

About ten minutes. Most of that time is Google Flow rendering the video and Claude Code processing the frames. You do not need design or coding experience for either step.

Step 1: Get one clean character photo

Start with a single image of your character. It should face forward, sit on a plain background, and show both hands clearly, because the video and the sprite sheet later on both depend on this starting pose staying visible and unambiguous.

You can search Pinterest for an existing illustration in the style you want, or generate your own with an AI image tool. The reel behind this post used the following prompt:

Make a cute monkey character show peace him making a peace sign with both his hands

Step 2: Animate it

I used this pormpt on google flow you can use any video generation tool:

Use the uploaded image as the exact reference. Preserve the monkey’s appearance, proportions, facial expression, big smile, large ears, hand shape, tail, colors, lighting, plain beige background, and camera angle exactly as shown. Keep the camera completely locked with no zoom, pan, rotation, cropping, or background changes. Animate the monkey as a playful, expressive cartoon character. Start and end in the exact original pose. First, the monkey makes a funny “look over there!” gesture toward the left: it leans its upper body slightly to the left, tilts its head left, turns its gaze left, lifts its left arm, and points confidently toward the left with a playful, exaggerated attitude. The gesture should feel lively and charming while keeping the character visually consistent with the original image. Then it smoothly returns to the exact original pose. Next, mirror the same performance toward the right: lean slightly right, tilt the head right, look right, lift the right arm, and point toward the right with the same playful energy and expression. Finally, return to the exact original pose. Keep the stomach, belly, legs, feet, and overall lower-body stance stable with no breathing, pumping, stretching, bouncing, or shifting. Only the arms, hands, head, shoulders, eyes, and a slight upper-body lean should move. Keep the tail mostly stable with only minimal natural secondary motion if needed. The motion should be smooth, natural, symmetrical on both sides, and feel like a polished Pixar-style character animation rather than a quick or jerky gesture.

Google Flow's free tier includes fifty Flow credits for video generations, refreshed once every 24 hours starting from your first generation that day. That is normally enough to render a short clip like this one without paying anything. Image and video generation draw from separate allowances, and Nano Banana Pro, the sharper version of the image model, needs a paid Google AI plan; the free Nano Banana model works fine for a simple reference photo.

Step 3: Turn the video into a mouse-tracking mascot with Claude Code

Rather than dropping the finished clip onto your site as a playing video, the effect works by pulling out every individual frame and laying them side by side in one image, called a sprite sheet. The page loads that single image once, and plain JavaScript jumps to the correct part of it as your cursor moves, which feels instant in a way a video file never quite does.

Upload the video to Claude Code with a prompt describing that sprite sheet and the mouse-tracking behaviour you want. The prompt used here was:

Create an interactive hero using the uploaded 4-second monkey animation. Use FFmpeg to extract every frame, combine them into a single horizontal sprite sheet, and build a frame-based animation system in vanilla JavaScript. Make the character naturally track the mouse by smoothly scrubbing through the frames based on cursor position, with eased interpolation and a smooth return to the idle pose when the mouse leaves. Preserve the original composition, keep the character centered in the exact same position, and make the interaction feel premium and responsive.

In plain terms, Claude Code does four things with that prompt. It uses FFmpeg, a free command line tool, to pull out every frame of your video. It stitches those frames into one wide sprite sheet image. It writes JavaScript that reads your cursor's position on the screen and shows the matching frame with a smoothed transition rather than a hard cut. It returns the character to its resting pose the moment your cursor leaves the area.

Common mistakes when building a mouse-tracking mascot

A busy background. Movement or clutter behind the character makes frame extraction harder and often shows up as flicker in the sprite sheet. Keep it plain.

An unlocked camera. Any zoom, pan or rotation in the video prompt means the character sits in a slightly different spot in every frame, and the hover effect will jitter instead of gliding.

A closed pose. If the arms or hands overlap the body in the reference photo, the model can lose track of them mid-animation. Keep hands and face visible from the very first frame.

Skipping the return-to-original-pose instruction. Without an explicit resting position, Claude Code has nothing to fall back to when the cursor leaves the character, and the idle state looks unfinished.

Expecting unlimited free renders in one sitting. Google Flow's fifty free video credits reset once a day and do not roll over, so a lot of trial and error on the same day can use up the free allowance before you get the clip right.

FAQ

Do I need to know how to code for this?

No. Claude Code writes and runs the actual commands itself from your plain language instructions. Your job is describing the character and the behaviour you want, not writing JavaScript by hand.

Is Google Flow free to use for this?

Yes, for an occasional project like this one. A free Google account gets fifty Flow credits for video generation, refreshed once every 24 hours. Regular use is easier with a paid Google AI plan, which trades the daily reset for a larger monthly pool of credits.

What exactly is a sprite sheet, and why not just use the video file?

A sprite sheet is a single image holding every frame of the animation laid out side by side. Browsers load it once and switch between frames instantly as the cursor moves, while a video file has to buffer and seek, which feels laggy when it is tied to fast mouse movement.

Can I use a different character instead of the monkey?

Yes. The three prompts here are a template, not a fixed recipe. Keep the same structure, exact reference preservation, a locked camera, and a defined start and return pose, then describe your own character in place of the monkey.

Will the mouse-tracking effect work on mobile?

Not in the same way. Touchscreens do not report a cursor position the way a mouse does, so most builds show the character in its resting pose on phones and tablets, or swap in a simpler tap based animation instead.

In short: one clean reference photo, a Google Flow animation with the camera locked and the pose defined at both ends, and a Claude Code prompt that turns the result into a sprite sheet. That is the entire stack behind a mouse-tracking mascot. None of it needs a design agency or an animation background, and the free tiers of both tools are enough to try it once before deciding whether it is worth building properly for a client site.