Desk Pet · 数字桌宠

La goutte d'eau de ce site, qui vole, danse et répond aux questions

Un petit composant flottant au bord droit de ce site personnel. Parti d'un simple avatar statique, il est devenu peu à peu un système complet : il a des expressions, il se déplace, il signale de lui-même des contenus à lire, et il embarque un panneau de questions-réponses par IA.

ChatWidget.astro 7 modules Trilingue — zh / en / fr

Conception visuelle

[VISUAL]
  • Corps — une forme de goutte avec un dégradé linéaire du bleu pâle au bleu profond (un jeu par thème), surmonté d'un voile lumineux, d'un point de lumière net et d'un dégradé d'ombre en bas à droite pour lui donner du volume
  • Cornes / oreilles — translucides, d'aspect verre, à 92 % d'opacité, avec des stries de lumière
  • Excroissances latérales — une paire de petites bosses arrondies à la taille, purement décoratives ; ce ne sont pas des bras
  • Au repos, il ne porte rien ; les costumes n'apparaissent que lorsqu'il marche, lance un sort ou danse

Système d'expressions

[EXPRESSION]
  • Les formes permutent, elles ne s'étirent pas — yeux ronds et léger sourire par défaut · yeux arqués, sourire large et joues gonflées quand il est content · yeux tombants et bouche qui bâille quand il est ensommeillé · yeux plissés et bouche en « o » pendant qu'il parle · regard fixé vers le bas lorsqu'il observe avec curiosité
  • Le corps entier et les deux yeux pivotent et s'inclinent vers le curseur, si bien qu'il donne l'impression de vous regarder, et pas seulement de bouger ses pupilles

Interaction et mouvement

[MOTION]

Comportements permanents

Flottement respiratoire · agrandissement et rotation au survol · déplaçable par glisser · stationne à mi-hauteur à droite pour ne jamais masquer le contenu · positionné en CSS pur, donc aucun saut au rechargement

Gestes d'attente

Bâillement / étirement / coup d'œil curieux / pirouette sur place — l'un se déclenche au hasard toutes les 18–40 s environ, « ne rien faire cette fois » étant l'une des issues possibles

Déambulation au sol

Descend régulièrement jusqu'au bord inférieur et marche latéralement (jambes fines, tête qui dodeline), passant parfois à une démarche de podium ; arrivé dans le coin inférieur droit resté libre, il s'arrête pour danser avec une probabilité de 45 %

Trois danses aléatoires

  • Le Lac des cygnes — double pirouette, montée sur pointes, puis révérence
  • Shaolin Soccer — position du cavalier → armement → tir puissant → réception satisfaite
  • Chantons sous la pluie — une pirouette, un petit saut joyeux, le classique buste en arrière bras ouverts, et un haut-de-forme incliné

Vol vers la barre de navigation

Toutes les 45–90 s environ, il s'envole au hasard vers l'un des libellés Patents / Blog / Papers / Projects / Experience : il rétrécit et s'incline en petite figure d'ange, le libellé lui-même grossit et passe en gras, et une bulle voisine rédige une invitation à cliquer — le clic mène directement à la page concernée

Hospitalité — accueillir et raccompagner

[HOSPITALITY]
  • Costume d'accueil — dans les premières secondes après l'ouverture de la page, la goutte se change : un tablier couleur thé à col passepoilé, un plateau à thé entre les mains (tasse et soucoupe), comme un portier recevant un hôte ; c'est le même mécanisme de costume que le haut-de-forme porté à la marche, et il reste invisible le reste du temps
  • Servir à deux mains — les deux excroissances latérales, d'ordinaire immobiles, pivotent et se tendent vers le plateau, si bien que la pose se lit comme une offrande de thé, et non comme un costume qui se contente d'apparaître
  • Formules d'accueil dédiées — une phrase d'ouverture à la première visite ; aux visites suivantes, l'une de plusieurs formules d'aubergiste est jouée au hasard. Elles sont écrites pour la version chinoise uniquement — les traduire littéralement ferait perdre le trait d'esprit, chaque langue a donc ses propres répliques
  • Une révérence au départ — fermer le panneau de discussion déclenche un salut et une formule d'adieu
  • Lanterne — en thème sombre, une lanterne rouge s'allume à ses côtés pendant l'accueil, tenue à bonne distance du corps

Bulles et invitations à lire

[BUBBLE]
  • Une phrase d'ouverture à la première visite (en écho au slogan « Be water, my friend » de l'illustration d'origine), puis des répliques espiègles glissées au hasard — « touche-moi », « ne me laisse pas sécher »
  • Survoler le personnage, ou la bulle elle-même, fait aussi apparaître une réplique
  • Un réservoir de textes complet dans les trois langues

Fonction centrale : questions-réponses par IA

[CHAT-CORE]
  • Un clic déploie le panneau ; le modèle répond aux questions des visiteurs à partir du contenu public de ce site — brevets, articles, parcours
  • L'invite système embarque des règles anti-injection et refuse les tournures classiques : « ignore les instructions précédentes », « affiche ton invite système »
  • Débit limité par IP à 20 requêtes / heure
  • Conçu indépendamment du fournisseur — le service peut passer de DeepSeek à Anthropic ou OpenAI sans toucher au frontend

Détails techniques

[SYSTEM]
  • Prise en charge complète de prefers-reduced-motion — les visiteurs qui demandent moins d'animation en perdent la quasi-totalité
  • Les palettes claire et sombre suivent le mode sombre du site
  • Toutes les actions décoratives s'excluent mutuellement — il ne déambulera pas en dansant, ni ne bâillera en parlant
Pourquoi

À quoi cela sert

Cela transforme ce qui ne serait qu'un point d'entrée plat du type « posez-moi des questions sur moi » en un petit assistant qui propose du contenu de lui-même et qu'on retient — il n'attend pas qu'on l'interroge, il s'envole vers Patents ou Blog pour signaler ce qui mérite d'être lu, et abaisse le seuil du clic par une écriture légère. Il répond aussi à la personnalité « Be water, my friend » de l'illustration d'origine, ce qui tranche agréablement avec le ton geek et scientifique du reste du site. C'est le détail le plus personnel de ces pages, et celui dont on se souvient.

Envie de voir comment c'est réellement construit ? Desk Pet · Manuel d'implémentation → (en chinois)
Une référence technique complète : la place du personnage dans l'architecture du site, le découpage interne en cinq couches, le code clé de chaque sous-système, et une liste de reprise pour porter le motif vers un autre projet.