A curious little glance
Nine head directions follow where your cursor sits. A nearby pointer brings the face back to centre, and tracking switches off entirely without a fine pointer.
An open-source project worth docking
Page
Mascot.
A little character. A livelier page.
Page Mascot is an open-source interactive mascot component by Kamran Ahmed (nilbuild). It looks toward your cursor and reacts to a little poke — a small way to make a page feel more alive.
Open sourceReactMIT license
This page introduces the original project. Beside it is Yachty, a VibeMarina example.
VibeMarina / Custom editionInteractive
Ahoy. Building something good?
Move your cursor. Give me a little tap.
Yachty
The sailor seagullTry a mood
One little crew member: Yachty the seagull.
09Head directions
09Expressions
02Sprite sheets
MITUpstream license
01 / About the original
Small interactions. Big personality.
Not a chatbot, and not a game you have to play. Page Mascot adds a memorable, playful detail to the work you are already making.
A poke with a personality
A poke earns a blink and a playful payoff; four quick pokes bring out a dizzy face. The squash animation respects reduced-motion preferences.
Your art. The same idea.
Use a ready-made character or draw your own. The project documents colour, ink, sketch, riso, paper, and pixel styles.
Feature notes reference the original README ↗ · mascot.tsx ↗
02 / The VibeMarina edition
Meet Yachty. A little dockside joy.
For our stop at the marina we drew a sailor seagull: a white cap, a blue-and-white uniform, and a healthy dose of curiosity.
Yachty · 艇艇
Named after a yacht. Not a second mascot.
Yachty is yacht + y — a nod to VibeMarina's harbor and sailing theme. This seagull is the only character, and it is a custom example for this page: not Page Mascot's official mascot, and not an endorsement from its creator.
03 / Under the hood
One component. Two little sheets.
Each 3x3 sprite sheet has one job: one for head direction, one for reactions. Serve both images and pass them to the upstream React component.
React / page-mascot
npm install page-mascotnpm install page-mascot
import { Mascot } from "page-mascot";
<Mascot
directions="/mascot/assets/yachty-directions.webp"
reactions="/mascot/assets/yachty-reactions.webp"
size={180}
label="Yachty the seagull"
/>
Transparent · Equal cells · Fixed body position · 9 cells
This page ships a React component with sheets in the upstream cell order, plus attribution. It does not claim to be the page-mascot package. The same two sheets work with the upstream component.
Good projects deserve to be seen
Like the idea? Meet the original.
Page Mascot is created by Kamran Ahmed (nilbuild on GitHub) and released under the MIT license. VibeMarina introduces the project and shows this custom seagull, with direct links to discover, use, and support the original.