Talking assistant from a single drawing

(a) The reusable prompt (EN, brand-neutral)

Turn ONE hand-drawn character illustration into a living, talking website guide —
no video, no 3D, no external services. The drawing itself comes alive.

INPUT: one pencil/ink drawing of a character on a plain white background, whole figure
visible, empty space around it (generate it if needed: "graphite pencil sketch, white
paper, friendly character from the waist up or full body, big eyes, clear mouth,
one hand raised, absolutely no text").

STEP 1 · LAYERS (script, e.g. Python + Pillow + SciPy)
- Background: only light pixels CONNECTED to the paper edge become transparent
  (flood-fill from the border), so the character's own white parts stay solid.
  Feather the alpha by ~1px.
- Cut layers with polygons in drawing coordinates: body, head, raised arm, and any
  part that may sway (antenna, hair, ear). Eyes and mouth are separate small crops
  with an elliptical feathered edge.
- Under the eyes and mouth, paint an elliptical patch in the face colour (median of
  light pixels around), so blinking and talking never reveal the old features.
- Export every layer as WebP + a JSON map: x, y, w, h in % of the canvas and the
  pivot points (neck, shoulder/elbow, antenna base) in %.

STEP 2 · MOTION (CSS transforms only, one small script)
- Stack the layers absolutely in a square box; positions come from the JSON map.
- Idle: breathing (translateY ~1%), slow head tilt (±1.5deg around the neck),
  antenna sway, random blinks (eyes scaleY .1 for ~130 ms, sometimes double).
- The head turns slightly towards the pointer (clamp to ±6deg).
- Gesture: while talking, the raised arm rotates a few degrees around its pivot.
- prefers-reduced-motion: no idle animation; the character stands still.

STEP 3 · VOICE
- Pre-render each fixed line as an audio file (any TTS with a natural voice in the
  page language). The live site never calls the TTS at runtime.
- Play through Web Audio: MediaElementSource -> Analyser; every frame the peak of the
  waveform drives the mouth (scaleY), so the mouth follows syllables, not a timer.
- Browsers block sound before the first tap: try to play, and if refused, start on
  the first pointerdown/keydown. A visible sound on/off toggle remembers the choice.
- Lines without audio still animate the mouth from the text length.

STEP 4 · DIALOGUE
- A speech bubble (aria-live="polite") shows the text of every spoken line.
- 3-5 buttons with the questions people actually ask; each plays its line.
- If the site has a chat assistant, the character opens it and "speaks" whenever
  the assistant answers (observe new answer nodes); it steps aside while the
  assistant panel is open, and a close button folds it into a small round avatar
  that brings it back — never make it vanish for good.

QUALITY GATE
One h1, lang set, buttons are real <button>s with aria-pressed, focus visible,
WCAG 2.2 AA in light and dark theme, no horizontal scroll at 360px, label the
illustration as AI-generated when it is, total weight under ~300 KB without audio.

(b) The brief for the demo

• Hero: a pencil-drawn robot, generated with FLUX (schnell, seed 921021, 1024×1024), without text.
• Layers: body · head · antenna (swaying) · raised hand · two eyes · mouth.
• Voice: female Bulgarian voice, 5 lines (greeting · how it's made · how it moves · the voice · the check), ready mp3 files.
• The page: the brutal style of Better Mechanics (IBM Plex Sans with Bulgarian glyphs), light and dark themes, character scene on the right, bubble and buttons on the left, four steps at the bottom.
• Live: the same method works as a site helper next to a built-in chat assistant: greeting, buttons to the assistant, speaking with every response, shrinking to a circle.