Design and AI
How I Added an Interactive Mascot to My Portfolio
I used Page Mascot to create an AI-generated character that follows the cursor, reacts to clicks, and adds a small moment of personality to my site.
A portfolio site should show the work clearly. But I also feel it should reveal something about the person behind the work.
While building my portfolio, I wanted to add a small interaction that would make the website feel more personal. I did not want a large animation competing with the projects. I wanted something visitors could notice, interact with, and hopefully remember.
That idea became a small mascot that sits on the page, follows the visitor’s cursor, and changes its expression when clicked.
I created it using Page Mascot by Koboyo, an agent skill for generating and implementing interactive website characters.
It is a small addition, but it changed the personality of the whole website.
Why I wanted a mascot
Portfolio websites can sometimes feel too polished and predictable.
There is a hero section, an introduction, some project cards, and a contact section. These parts are important, but they do not always show the designer’s personality.
I wanted to add a little playfulness without affecting the usability of the website.
The mascot does not interrupt the content or ask the visitor to do anything. It simply responds when someone moves the cursor or clicks on it.
That makes the interaction feel more like a discovery than a feature being pushed in front of the visitor.
What Page Mascot actually does
Page Mascot is a lightweight interactive character for websites.
It uses two 3×3 sprite sheets:
One sheet contains nine head directions
Another contains nine reactions or expressions
When the visitor moves the cursor, the component calculates the cursor’s position and displays the matching head direction.
When the visitor clicks the mascot, it selects an expression from the reactions sheet.
The character was generated with AI, but it does not need to run an AI model every time someone visits the website. The live interaction is controlled through the sprite sheets and a small client-side component.
This keeps the experience responsive and much lighter than adding a video, 3D character, or large animation.
Creating a character that looked like me
I started by installing the Page Mascot skill:
The skill gives an AI coding agent the instructions needed to generate, validate, and implement the mascot.
After installing it, I could ask the agent to create a character based on a reference image:
I attached my photograph and described the kind of character I wanted.
The aim was not to create a realistic portrait. I wanted a simple chibi-style version of myself that matched the playful visual language of my portfolio.
The agent then generated two sprite sheets: one for the directions and another for the reactions.
Why sprite-sheet consistency matters
Generating the character is only one part of the process.
Every version of the head needs to stay aligned across the sprite sheets. If the face changes size, the head moves, or the character drifts between frames, the animation looks like it is jumping.
The skill checks the alignment and validates the sprite sheets before implementation.
This was an important detail for me. A small interaction only feels polished when the movement is consistent.
The final result needed to feel like one character looking in different directions, not nine separate illustrations placed next to each other.
Bringing the mascot into Framer
My portfolio site is built in Framer.
Importing the npm package directly did not work in the way I needed, so I used Page Mascot’s standalone React component and placed it inside a Framer Code Component.
I then added two file controls:
One for the directions sprite sheet
One for the reactions sprite sheet
This made the component reusable inside Framer.
Instead of placing fixed image paths inside the code, I can upload or replace the sprite sheets through the Framer interface. If I create a different mascot later, I can update the character without rewriting the interaction logic.
The basic component follows this structure:
The component reads the pointer position, selects the correct frame, and displays a reaction when the mascot is clicked.
The small details that mattered
Adding the mascot was not only about making the cursor tracking work.
I also needed to think about where it should appear, how large it should be, and whether it could interfere with the rest of the page.
A few details made the final interaction feel better:
The mascot stays away from important buttons and content
It includes a descriptive accessibility label
It respects reduced-motion preferences
It can be disabled on devices without a precise pointer
The files use WebP to keep the image size lower
The reactions feel quick and do not interrupt navigation
These decisions helped the mascot remain a small layer of personality instead of becoming a distraction.
Can Page Mascot work outside Framer?
The same approach can work on other platforms, but the implementation changes depending on how much custom code the platform supports.
React, Next.js or Vite
The package can be installed directly. The sprite sheets can be stored with the public assets, and the Mascot component can be rendered wherever it is needed.
Webflow
Webflow’s Code Embed supports HTML, CSS, and client-side JavaScript.
The mascot can be added using a browser-ready version of the component or by hosting the JavaScript externally and mounting it inside an embed element.
WordPress
WordPress provides a Custom HTML block for inserting custom code.
The exact implementation depends on the theme, plugins, and user permissions. Users without the required permissions may have scripts removed automatically, so a theme or plugin integration may be required.
The platform changes, but the core setup remains similar: two aligned sprite sheets and a lightweight component controlling the interaction.
What I like about the result
The mascot is not the main feature of my portfolio. My projects still need to be the focus.
But it adds a moment that feels more like me.
It follows the visitor instead of playing the same animation repeatedly. It waits to be discovered. When someone clicks it, the expression changes and creates a small surprise.
This experiment also brought together different parts of my work:
Character design
AI-generated visual assets
Interaction design
Frontend implementation
Accessibility
Performance
Framer development
It reminded me that personality does not always need a large section or a complicated animation.
Sometimes one small, thoughtful interaction can change how an entire website feels.
That is what I wanted from the mascot. Not something that takes attention away from my work, but something that quietly makes the portfolio feel more human.
