BetterMech PUBLIC · REV 0.1
Рецепта · сайт

Говорещ помощник от една рисунка

Тенденции: Ръчна илюстрация и смесени техники + Целенасочени микровзаимодействия + Ефекти около показалеца. Концепция на Better Mechanics по рецептата — не е официалният сайт на марката.

Отвори сайта на живо →
Началото на сайта „Говорещ помощник от една рисунка“

Доказателството

WEB · GOVORESHTA-RISUNKAREV 0.1
axe serious
0
overflow 360
0 px
weight
229 KB
h1
1
lang
bg
date
2026-10-21
провереноaxe (WCAG 2.2 AA) в светла и тъмна тема · 360 px · автоматично; ръчният преглед предстои

(а) Многократният промпт (EN, неутрален към марката)

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.

(б) Брифът за демото

  • Герой: робот с молив, генериран с FLUX (schnell, seed 921021, 1024×1024), без надписи.
  • Слоеве: тяло · глава · антена (люлее се) · вдигната ръка · две очи · уста.
  • Глас: женски глас на български, 5 реплики (поздрав · как е направен · как се движи · гласът · проверката), готови mp3 файлове.
  • Страницата: бруталният стил на Better Mechanics (IBM Plex Sans с български форми), светла и тъмна тема, сцената с героя вдясно, балон и бутони вляво, четири стъпки отдолу.
  • На живо: същият метод работи като помощник на сайт с вграден асистент: поздрав, бутони към асистента, говорене при всеки отговор, свиване до кръгче.