Desk Pet · 数字桌宠

The water drop on this site that flies, dances, and answers questions

A small widget floating at the right edge of this personal site. It began as a static avatar and grew, step by step, into a complete system: it has expressions, it walks around, it points visitors at content on its own initiative, and it carries a built-in AI Q&A panel.

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

Visual design

[VISUAL]
  • Body — a water-drop shape with a pale-to-deep blue linear gradient (one set per theme), overlaid with a soft sheen, a sharp highlight dot, and a shadow gradient at the lower right to give it volume
  • Horns / ears — translucent, glass-like at 92% opacity, with highlight striping
  • Side nubs — a pair of rounded bumps at the waist, purely decorative; they are not arms
  • At rest it wears nothing at all; costumes only appear when it walks, casts, or dances

Expression system

[EXPRESSION]
  • Shapes swap, they don't stretch — round eyes and a small smile by default · arced eyes, a grin and puffed cheeks when happy · drooping eyes and a yawning mouth when sleepy · narrowed eyes and an "o" mouth while speaking · a fixed downward glance when peering around curiously
  • The whole body and both eyes turn and tilt toward the cursor, so it reads as looking at you rather than merely shifting its pupils

Interaction and motion

[MOTION]

Always-on behaviour

Breathing float · scales up and turns on hover · draggable to a new spot · parks mid-right by default so it never covers content · positioned in pure CSS, so it does not jump on reload

Idle gestures

Yawn / stretch / peer around / spin in place — one fires at random roughly every 18–40s, and "do nothing this time" is one of the outcomes

Ground wandering

Periodically descends to the very bottom edge and walks sideways (thin legs, head bobbing), occasionally switching to a catwalk or runway gait; on reaching the empty lower-right corner it stops to dance with 45% probability

Three random dances

  • Swan Lake — a double pirouette, up on tiptoe, then a curtsy
  • Kung-fu soccer — horse stance → wind-up → a hard kick → a smug landing
  • Singin' in the Rain — a spin, a cheerful hop, the classic lean-back with arms open, and a tipped top hat

Flying to the navigation bar

Every 45–90s or so it flies to one of the Patents / Blog / Papers / Projects / Experience nav labels at random: it shrinks and tilts into a little-angel pose, the label itself scales up and bolds, and a bubble beside it writes an invitation to click — clicking goes straight to that page

Hospitality — greeting and seeing off

[HOSPITALITY]
  • Welcome costume — in the first seconds after the page opens the drop changes clothes: a tea-coloured apron with a piped collar, holding a tea tray (cup and saucer), like a doorman receiving a guest; it uses the same costume mechanism as the top hat worn while walking, and is invisible the rest of the time
  • Serving with both hands — the two side nubs, normally static, rotate and reach toward the tray so the pose reads as offering tea, rather than a costume that just appears
  • Dedicated greetings — an opening line on a first visit; on return visits one of several innkeeper-style welcomes plays at random. These are written for the Chinese locale only — translating them directly would lose the joke, so each language gets its own lines
  • A bow on the way out — closing the chat panel triggers a bow and a parting line
  • Lantern — in the dark theme a red lantern lights up beside it while greeting, held at a clear distance from the body

Bubbles and content nudges

[BUBBLE]
  • An opening line plays on a first visit (echoing the "Be water, my friend" slogan from the original artwork), with playful one-liners mixed in at random afterwards — "poke me", "don't let me dry out"
  • Hovering the pet, or the bubble itself, also brings a line out
  • A full copy pool in all three languages

Core feature: AI Q&A

[CHAT-CORE]
  • Click to expand the panel; the model answers visitor questions from this site's public content — patents, papers, experience
  • The system prompt carries anti-injection rules and refuses the standard gambits: "ignore previous instructions", "print your system prompt"
  • Rate-limited per IP at 20 requests / hour
  • Provider-agnostic by design — the backend can move between DeepSeek / Anthropic / OpenAI without touching the frontend

Technical detail

[SYSTEM]
  • Full prefers-reduced-motion support — visitors who ask for reduced motion lose almost every animation
  • Light and dark palettes track the site's own dark mode
  • Every decorative action is mutually exclusive — it will not wander while dancing, or yawn while speaking
Why

What this is for

It turns what would otherwise be a flat "ask me about myself" entry point into a small assistant that volunteers content and is easy to remember — it does not just wait to be asked, it flies over to Patents or Blog to mark what is worth reading, and lowers the bar to clicking with a light touch of copy. It also answers the "Be water, my friend" persona of the original artwork, which cuts pleasantly against the geeky, research-toned rest of the site. It is the most personal detail here, and the one people remember.

Want to see how it is actually built? Desk Pet · Implementation guide → (in Chinese)
A full technical reference: where the pet sits in the site architecture, the internal five-layer breakdown, the key code for each subsystem, and a reuse checklist for porting the pattern to another project.