De petits esprits nés de chaînes de caractères.
Toujours animés.

Essayez : entrez un nom, ajustez les options et regardez l’avatar évoluer en direct. Intégrez-le à votre projet avec l’API ou le composant React.

• Profondeurnone - subtle - medium - dramatic
• Expressionnone - happy - surprised - sleepy - cool - cheeky
• Animationsblink - float - sway - eyeWander - eyebrowBounce - glance - entrance

API

Générez des avatars au format SVG via HTTP. name correspond au segment de l’URL ; toutes les autres options passent dans la chaîne de requête.

<img src="https://api.mimoid.fun/mimo?animations=blink" />

React

Importez le composant Mimo et transmettez-lui une chaîne name. Ses props correspondent aux paramètres de l’API.

import { Mimo } from "mimo-id/react";

<Mimo
  name="mimo"
  size={48}
  animations={["blink"]}
/>

Les avatars sont dérivés du hachage de la chaîne saisie : un même nom produit toujours le même visage. La génération est entièrement déterministe ; rien n’est stocké ni récupéré.

Les visages sont composés de 6 styles d’yeux × 4 types de sourcils × 7 bouches × 2 options de joues × 3 accessoires × 16 couleurs × 9 rotations.

• Yeuxround - cross - line - curved - wink - heart
• Bouchessmile - grin - o - cat - tongue - smirk - flat
• Sourcilsarched - flat - raised - none
• Jouesblush - none
• Accessoiresglasses - sunglasses - none

Seize dégradés pastel doux, avec un rendu radial pour un effet 3D subtil.
Transmettez un tableau gradients personnalisé pour utiliser votre propre palette.

Les variantes sont des styles visuels modulaires. Chacune définit son propre ensemble de propriétés — mood, animations, detailLevel, etc. Passez directement une fabrique de variante ou préconfigurez-la avec un descripteur.

import { faces } from "mimo-id/variants";

// Pass directly — configure via props
<Mimo name="luna" variant={faces} background="solid" mood="happy" />

// Or pre-configure with a descriptor
<Mimo name="luna" variant={faces({ background: "solid", detailLevel: "full" })} />

Choisissez une expression à appliquer à l’avatar, indépendamment des traits générés.

<Mimo name="user" mood="happy" />
<Mimo name="user" mood="cool" />

Passez un tableau animations pour donner vie aux avatars. Toutes les animations reposent sur CSS et sont injectées à la demande : combinez-les librement. Passez une chaîne pour utiliser les valeurs par défaut, ou un objet avec type, delay et duration pour personnaliser le timing.

<Mimo
  name="sprite"
  animations={["blink", "float", "sway", "eyeWander"]}
/>

// With custom timing
<Mimo
  name="sprite"
  animations={[
    "blink",
    { type: "float", duration: 4, delay: 0.5 },
  ]}
/>

Choisissez une découpe circulaire, squircle ou carrée pour l’avatar.

<Mimo name="user" shape="circle" />
<Mimo name="user" shape="squircle" />
<Mimo name="user" shape="square" />

Quatre niveaux de profondeur pour les transformations de perspective 3D en CSS. Le visage s’incline selon la rotation déterministe. Dans React, il s’aplatit au survol lorsque interactive est activé.

<Mimo name="user" depth="dramatic" />

La visibilité des traits s’adapte automatiquement à la taille. Les petits avatars affichent moins de détails pour rester lisibles. Remplacez ce comportement avec la prop detailLevel.

Remplacez la palette par défaut par vos propres paires de dégradés avec la prop gradients. L’API accepte des paires hexadécimales comme E8D5F5-C7A4E0,FFE0D0-FFB899.

const brand = [
  { from: "#667EEA", to: "#764BA2" },
  { from: "#F093FB", to: "#F5576C" },
];

<Mimo name="user" gradients={brand} />

Les props et les paramètres de l’API portent les mêmes noms. Dans l’API, name est le segment de chemin de l’URL ; tous les autres sont des paramètres de requête.

Général

Faces