Devi en tu proyecto

Tres formas de usar a Devi, de la más simple a la más completa. En las tres, el dibujo es el mismo porque sale del mismo motor.

En cualquier página HTML

Sin React ni build. Carga el módulo una vez y usa la etiqueta <devi-mascota> donde quieras.

<script type="module" src="https://devi.devmarkpe.com/v1/devi.js"></script>

<devi-mascota version="patitas" estado="saludo" tamano="140" juego></devi-mascota>

Atributo	Qué hace
`version`	base, patitas (por defecto) o completo.
`estado`	Uno de los dieciocho estados, por ejemplo exito o pensando. Por defecto, reposo.
`tamano`	Ancho en píxeles. Por defecto 96. Guía: base 24 a 64, patitas 96 a 160, completo 240 a 320.
`texto`	Texto accesible. Por defecto dice el estado. Vacío (texto="") la vuelve decorativa.
`emocion`	La emoción de la boca al hablar: neutral, alegre, entusiasta, serio, sorpresa o triste.
`juego`	Activa seguir el cursor y las reacciones de juego. Solo en superficies de juego.
`sombra`	Con sombra por defecto; sombra="false" la quita.

Cambia el estado con JavaScript como cualquier atributo, y dirígele la mirada o la voz con propiedades:

const devi = document.querySelector("devi-mascota");

devi.setAttribute("estado", "exito");      // cambia de estado
devi.mirarA = { x: 640, y: 120 };           // mira (y señala) a un punto de la ventana
devi.voz = 0.8;                              // apertura de la boca al hablar, de 0 a 1

En React

El componente se dibuja en el servidor con una pose fija, así no parpadea al cargar, y en el navegador lo anima el motor. Hoy el paquete @devmark/devi es privado y vive en el repositorio de DEVMARK; en otros proyectos usa la etiqueta HTML de arriba.

import { Devi } from "@devmark/devi/react";

<Devi version="patitas" estado="exito" tamano={96} texto="Devi celebra" />
<Devi version="patitas" estado="senalando" mirarA={{ x, y }} texto="" />

Propiedad	Qué hace
`version, estado, tamano`	Igual que los atributos de la etiqueta.
`texto`	Texto accesible. Por defecto dice el estado; "" la vuelve decorativa.
`mirarA`	{ x, y } de la ventana al que mira y señala. Manda sobre el cursor.
`juego`	Seguir el cursor y reaccionar. Solo en superficies de juego.
`emocion, voz`	La emoción de la boca y su apertura (0 a 1) al estar en hablando.
`sombra`	Con sombra (true) o sin ella.

Como imagen o video

Cada pose es un archivo con dirección fija. El lienzo mide 300 × 290 y el fondo es transparente. Las direcciones bajo /v1/ solo crecen: se añaden estados, no se quitan ni se renombran. Se pueden usar desde cualquier dominio.

https://devi.devmarkpe.com/v1/svg/devi-{version}-{estado}.svg      vectorial
https://devi.devmarkpe.com/v1/png/devi-{version}-{estado}.png      1024 px, transparente
https://devi.devmarkpe.com/v1/avatar/devi-avatar-{claro|oscuro|indigo}.png   cuadrado, para recorte circular

Para video nuevo (WebM con transparencia, MOV ProRes, MP4, GIF), el motor genera cualquier secuencia: están los comandos en la página de recursos.

El motor, por código

Dibuja cada cuadro como SVG puro, sin DOM: sirve en el navegador, en Node, en el servidor y para exportar.

import { Devi, pose } from "@devmark/devi";

// Una pose fija, lista para un SVG:
const svg = pose("patitas", "exito", { ancho: 400 });

// O una animación, cuadro a cuadro:
const d = new Devi("completo");
d.setEstado("hablando");
d.setEmocion("alegre");
for (let i = 0; i < 60; i++) {
  d.voz = Math.abs(Math.sin(i / 4));   // la boca sigue la voz
  d.paso(1 / 60);
  const cuadro = d.svg();               // un cuadro, SVG puro
}

montar(elemento, opciones) anima a Devi dentro de cualquier elemento del DOM con la lógica de seguir el cursor y reaccionar: es lo que usan por debajo el componente de React y la etiqueta.

Buenas prácticas

Accesibilidad. Pon siempre un texto con el estado, o hazla decorativa si ya hay un texto al lado que lo dice. Con «reducir movimiento» activado en el sistema, Devi se queda quieta.
Rendimiento. Se anima a 30 cuadros por segundo y se detiene sola cuando sale de pantalla.
Juego solo donde juega. Las reacciones (seguir el cursor, clics, dormirse) van en bienvenidas, tutoriales y estados vacíos; no en tablas ni formularios.
Política de contenido. Si tu sitio usa CSP, permite script-src https://devi.devmarkpe.com para la etiqueta e img-src https://devi.devmarkpe.com para las imágenes.