𝗜 𝗚𝗮𝘃𝗲 𝗠𝘆 𝗦𝗶𝗱𝗲 𝗣𝗿𝗼𝗷𝗲𝗰𝘁 𝗔 𝗠𝗮𝘀𝗰𝗼𝘁
I love Japanese kaomoji. These little faces add warmth to a message.
Most websites for finding them feel old. They have cramped pages and too many ads. I wanted to build something different. I wanted a digital shop that feels warm and alive.
So I built Nyamoji. She is a small mascot that lives on the page. She follows your cursor, blinks, and breathes.
You do not need heavy libraries to do this. You only need plain SVG, one pointermove event, and some CSS.
Here is how I made her feel alive:
• The Eye Movement I use a single pointermove listener. I calculate the direction from her face to your cursor. I then nudge her eyes in that direction.
I learned two lessons here. First, I limit the vertical movement to 85 percent. If her eyes move too far up and down, she looks creepy. Second, I add a small CSS transition. Without it, her eyes jump like a robot. With it, they glide.
• The Blinking Fix At first, every mascot on my page blinked at the same time. It looked like a glitch. I fixed this by adding a random animation delay to each mascot. Now they each blink on their own schedule.
• The Catchlight I added a tiny white dot in each eye. This small detail makes the difference between a drawing and a character. It makes her look like she is looking at you.
• Respecting Users Movement can be distracting. I use the prefers-reduced-motion media query. If a user wants less motion, I stop all animations immediately.
• Avoiding Layout Shift I write the mascot face directly into the HTML. If I use an empty placeholder, the page jumps when the JavaScript loads. Writing it into the HTML from the start keeps the page stable.
Building something small and personal makes a project stand out.
You can find her at Kaomojikan.