Si tienes un portafolio, una landing page o simplemente quieres que tu página web tenga algo diferente, Page Mascot es uno de esos pequeños proyectos que consiguen llamar la atención sin necesidad de crear una animación desde cero.

La idea es sencilla: agregar un pequeño personaje a tu página web que mira hacia la posición del cursor y reacciona cuando el usuario hace clic sobre él.

Y lo mejor es que el proyecto es open source.

Page Mascot fue creado por Kamran Ahmed, está publicado bajo licencia MIT y puede instalarse directamente mediante npm. Su paquete requiere actualmente React 18 o superior.

🔗 Puedes probar las mascotas disponibles aquí:
Demo oficial de Page Mascot

🔗 Código fuente:
Page Mascot en GitHub

¿Qué es Page Mascot?

Page Mascot es un componente para React que coloca un personaje interactivo dentro de una página web.

La mascota detecta dónde se encuentra el cursor y cambia la dirección de su rostro para dar la sensación de que está observando al visitante.

Además, cuando haces clic sobre ella puede mostrar diferentes reacciones.

El sitio oficial ofrece actualmente 52 personajes preparados para utilizar, incluyendo animales, personas y personajes de diferentes estilos. Entre ellos encontramos gatos, zorros, pandas, pingüinos, astronautas, magos, robots, televisores retro y muchos otros.

También puedes generar tu propio personaje mediante inteligencia artificial.

¿Cómo funciona?

Aunque visualmente puede parecer una animación compleja, el funcionamiento es bastante ingenioso.

Cada mascota utiliza dos sprite sheets de 3 × 3.

Una contiene nueve posiciones diferentes de la cabeza y la otra contiene nueve reacciones o expresiones.

Page Mascot calcula el ángulo existente entre el personaje y el cursor y selecciona automáticamente la imagen correspondiente.

Cuando el usuario hace clic sobre el personaje, se muestra temporalmente una de las expresiones de la segunda hoja de sprites.

Esto consigue una interacción bastante llamativa utilizando imágenes previamente preparadas.

Cómo instalar Page Mascot paso a paso

Para este ejemplo vamos a utilizar un proyecto React.

Actualmente el paquete declara React 18 o superior como dependencia compatible y Node.js 20 o superior para el propio paquete/proyecto.

Paso 1. Instalar Page Mascot

Abre la terminal dentro de tu proyecto React y ejecuta:

npm install page-mascot

También puedes utilizar la versión abreviada:

npm i page-mascot

Esta es la instalación indicada oficialmente por el proyecto.

Paso 2. Elegir nuestra mascota

Entra en:

https://koboyo.com/page-mascot

Verás una colección de personajes disponibles.

Por ejemplo, podríamos elegir el zorro.

Cada mascota necesita dos archivos:

fox-directions.webp
fox-reactions.webp

El primero contiene las diferentes direcciones hacia las que puede mirar el personaje.

El segundo contiene sus distintas reacciones.

La documentación oficial recomienda descargar estas dos imágenes y colocarlas dentro de una carpeta pública de nuestro proyecto.

Por ejemplo:

public/
└── mascots/
    ├── fox-directions.webp
    └── fox-reactions.webp

Paso 3. Importar Page Mascot

Ahora debemos importar el componente:

import { Mascot } from 'page-mascot'

Después podemos añadirlo dentro de nuestro componente React:

function App() {
  return (
    <div>
      <h1>Mi página web</h1>

      <Mascot
        directions="/mascots/fox-directions.webp"
        reactions="/mascots/fox-reactions.webp"
      />
    </div>
  )
}

export default App

Con esto ya tendremos una mascota funcionando dentro de nuestra página.

La propia documentación oficial utiliza este mismo sistema de dos archivos para cargar los personajes.

Paso 4. Cambiar el tamaño

Page Mascot permite cambiar fácilmente el tamaño del personaje mediante la propiedad size.

Por defecto utiliza:

140 px

Podemos hacerla más grande:

<Mascot
  directions="/mascots/fox-directions.webp"
  reactions="/mascots/fox-reactions.webp"
  size={200}
/>

Ahora nuestra mascota tendrá un espacio de aproximadamente 200 × 200 píxeles.

Paso 5. Mejorar la accesibilidad

También podemos utilizar la propiedad label.

Por defecto Page Mascot utiliza:

mascot

Pero podríamos colocar una descripción más apropiada:

<Mascot
  directions="/mascots/fox-directions.webp"
  reactions="/mascots/fox-reactions.webp"
  size={180}
  label="Mascota virtual de AnderCode"
/>

Este texto ayuda a identificar el elemento mediante tecnologías de asistencia.

Paso 6. Aplicar nuestros propios estilos

También tenemos disponible:

className

Por ejemplo:

<Mascot
  directions="/mascots/fox-directions.webp"
  reactions="/mascots/fox-reactions.webp"
  className="mi-mascota"
/>

Después podemos utilizar nuestra clase CSS normalmente.

.mi-mascota {
  margin-top: 20px;
}

Esto nos permite integrar el personaje dentro del diseño de nuestra web.

Los cuatro parámetros principales de Page Mascot

Los parámetros disponibles oficialmente son:

Lo más interesante: puedes crear tu propia mascota con IA

Aquí Page Mascot se vuelve mucho más interesante.

El proyecto también incluye una skill para agentes de inteligencia artificial capaz de generar personajes personalizados.

Para instalarla se utiliza:

npx skills add nilbuild/page-mascot --skill page-mascot --global --yes

Una vez instalada podemos pedirle al agente algo como:

/page-mascot a chibi fox with orange fur

O:

/page-mascot a programmer with glasses and headphones

Incluso existe la posibilidad de proporcionar una fotografía y pedir que genere una mascota inspirada en esa persona.

¿Qué hace realmente la inteligencia artificial?

No genera únicamente una imagen.

La skill está preparada para producir:

9 direcciones diferentes del personaje

y

9 expresiones o reacciones diferentes.

Después organiza estas imágenes en dos sprite sheets correctamente alineados para que Page Mascot pueda utilizarlos.

Esto es importante porque las diferentes imágenes deben mantener prácticamente las mismas proporciones y posición.

De lo contrario, el personaje parecería estar saltando cada vez que cambia de dirección.

Puedes elegir diferentes estilos

Page Mascot permite generar personajes utilizando seis estilos visuales:

1. Colour: estilo a color.
2. Ink: dibujo basado en líneas negras.
3. Sketch: apariencia de boceto a lápiz.
4. Riso: inspirado en impresión risográfica.
5. Paper: apariencia de papel recortado.
6. Pixel: estilo pixel art.

Por ejemplo:

/page-mascot a chibi programmer, in the pixel style

Podría generar una mascota estilo pixel art.

¿Y si quiero una mascota inspirada en mí?

El proyecto también contempla esa posibilidad.

Puedes proporcionar una fotografía al agente y solicitar:

/page-mascot make one that looks like me

El sistema utiliza la imagen como referencia para generar las diferentes posiciones necesarias para la mascota.

Esto puede ser especialmente interesante para:

portafolios personales, páginas de desarrolladores, blogs, proyectos educativos, páginas de streamers, landing pages o marcas que quieran tener un personaje propio.

También puedes pedir a la IA que instale la mascota

Si ya tienes instalada la skill, existe incluso una forma más sencilla de trabajar.

Puedes pedir al agente:

/page-mascot put the fox on my page

El agente puede encargarse de integrar el personaje dentro del proyecto.

Por lo tanto tenemos dos formas de utilizar Page Mascot:

Método tradicional

Descargamos las imágenes, instalamos el paquete y agregamos manualmente el componente.

Método con agente de IA

Instalamos la skill y dejamos que el agente genere o integre nuestra mascota.

¿Funciona en dispositivos móviles?

Existe aquí un detalle importante.

La documentación indica que el seguimiento del cursor se desactiva cuando el dispositivo no dispone de un puntero de precisión, algo habitual en dispositivos táctiles.

Por eso la experiencia principal de seguimiento está orientada a dispositivos que utilizan mouse, trackpad o un puntero equivalente.

Además, la animación de reacción respeta la configuración prefers-reduced-motion del usuario.

Es un detalle interesante desde el punto de vista de accesibilidad.

¿Dónde utilizaría Page Mascot?

Personalmente, creo que Page Mascot tiene bastante sentido en proyectos donde queremos que el diseño tenga personalidad sin convertir la página en una interfaz saturada de animaciones.

Puede quedar especialmente bien en:

• portfolios de desarrolladores;
• páginas personales;
• blogs tecnológicos;
• páginas educativas;
• landing pages;
• documentación;
• páginas de videojuegos;
• proyectos experimentales;
• sitios relacionados con programación o inteligencia artificial.

No es un elemento que necesariamente debamos colocar en todas nuestras aplicaciones, pero utilizado en el lugar correcto puede conseguir que una página resulte mucho más reconocible.

¿Page Mascot es gratis?

El repositorio utiliza licencia MIT, por lo que el código puede utilizarse y modificarse siguiendo las condiciones de dicha licencia.

El proyecto además se encuentra disponible públicamente en GitHub.

Mi recomendación

Page Mascot es uno de esos proyectos pequeños que demuestran que una web no necesita efectos gigantescos para generar una interacción diferente.

Su principal ventaja es la combinación de tres ideas:

React + sprites + generación mediante inteligencia artificial.

Puedes comenzar utilizando alguno de los más de 50 personajes disponibles y, si quieres llevar la personalización más lejos, generar posteriormente una mascota completamente propia.

Para portfolios, blogs tecnológicos o páginas personales me parece especialmente interesante porque permite convertir una simple ilustración en un elemento con el que el visitante puede interactuar.

Y si eres desarrollador, además resulta un proyecto interesante para estudiar cómo una animación aparentemente compleja puede resolverse utilizando dos sprite sheets y lógica relativamente sencilla.

Enlaces

Demo oficial:
https://koboyo.com/page-mascot

Repositorio:
https://github.com/nilbuild/page-mascot

Instalación:

npm i page-mascot

Crear una mascota mediante IA:

npx skills add nilbuild/page-mascot --skill page-mascot --global --yes

Page Mascot acaba convirtiendo una idea muy simple —un personaje mirando el cursor— en una herramienta bastante divertida para personalizar una página web.