Start with your mascot.
Any transparent image of your character works, as long as its face is visible.
CURSOR FOLLOWER
Mascots that
follow your cursor.
Each of these characters was made from one image. Masko draws nine looks, and a small script turns them toward the cursor on your website or app.
Move your mouse. Hover a mascot and it looks right at you.Tap anywhere. They all look.
HOW A CURSOR FOLLOWER WORKS
One image.
Nine looks.
Masko keeps your character and its pose, and only changes where it looks. Pick a mascot, then move your cursor around.tap around it.
Masko draws every look.
Up, down, each side, every corner, and straight at you. Same character, only the gaze moves.
Looking center
03 / ON YOUR PAGEIt follows the cursor.
A small script shows the right look as the mouse moves. The highlighted image is the one on screen now.
Ko · Paper fox. Every mascot on this page was made with Masko.
PUT IT WHERE PEOPLE LOOK
A sign-up form
with someone watching.
Type an email and Otto reads along. Click the password and he looks away. The same script works anywhere a little attention helps.
- Sign-up and login forms
- Point the gaze at the field being filled with setDirection, look away for the password, then hand it back to the cursor.
- Landing page heroes
- A character that turns toward the visitor makes the first screen feel awake, like the crowd at the top of this page.
- Empty states and 404 pages
- Give people a friendly face to look at when there is nothing else on screen yet.
- Onboarding and checkout
- Have the mascot look at the next step, so the eye follows it.
yourapp.com/sign-up
FROM STUDIO TO YOUR CODE
A few lines.
No animation library.
Download your cursor follower and drop it into any website. The package has everything in it.
- Plain JavaScript
- One small file. No framework, no dependencies, no API key.
- React ready
- A React component, TypeScript types, and a preview page you can open right away.
- Your files or hosted links
- Copy the nine images to your site, or turn on hosting and use Masko's links.
- Calm on phones
- With touch screens or reduced motion, the mascot stays still and looks at the visitor.
import { mountCursorFollower } from './cursor-follower.js';
const directions = ['up-left', 'up', 'up-right', 'left',
'center', 'right', 'down-left', 'down', 'down-right'];
mountCursorFollower(document.querySelector('#mascot'), {
frames: Object.fromEntries(
directions.map((d) => [d, `/mascot/frames/${d}.webp`])
),
size: 240
});RESULT
Ko follows the cursor anywhere on the page.
THE LITTLE DETAILS
Before it starts watching.
What is a cursor follower?
A cursor follower is a character that turns to look at the mouse. Masko draws nine versions of one image of your mascot, one for each direction. A small script shows the right one as the cursor moves.
How do I make my mascot follow the cursor?
Start with one transparent image of your mascot with its face visible. Create a mascot in Studio or upload artwork you already have, and remove its background. Then open the Interactive tab in your collection, choose Create Interactive with the Follow cursor template, and pick the image.
Need a mascot first?How much does it cost?
Each cursor follower costs 9 credits and includes all nine directions. If the generation fails, the credits are refunded.
See credit costsHow do I add it to my website?
Download the package from the interaction page. It includes the nine images, a plain JavaScript file, a React component, and a preview page. Copy the files to your site, or publish your collection and use the hosted links.
Does it work on phones?
Phones have no cursor, so the mascot looks straight at the visitor. Your own code can still choose where it looks. On this page, tap anywhere and the mascots turn toward your finger.
Will it slow down my page?
Each look is one still image. The script loads the nine images once, then swaps them as the cursor moves. There is no video and no animation library. The download comes at 1024 pixels, so resize the images to the size you show. This page uses 360 pixel versions of about 16 KB each.
Can I create a cursor follower with the API?
Yes. Send POST /v1/mascots/:id/interactive with the image ID and the cursor-follower kind, then check the job until it is done. With hosting turned on, the mascot export lists the links for all nine images.
Read the API guideWere these mascots made with Masko?
Yes. Every character on this page is a Masko mascot, and each follower was made from one image of it. Yours will look like your character.
Your mascot is ready to look around.
Give it a cursor to follow.
One image, nine looks, 9 credits. Need a mascot first?