Avatar Onboarding Form
Interactive multi-step onboarding paired with an expressive morphing bot avatar that reacts dynamically to typing, validation, password masking, and completion.
Preview
1
Step 1: Identity & Workspace
Step 1 of 4
Hi there! I'm your onboarding companion. Let's get you set up!
state: idlemood: neutre
Tell us who you are
We will reserve your public profile handle across the team ecosystem.
@
Interactive responsive preview
Drag handles on right and bottom to resize
Overview
The Avatar Onboarding pattern transforms standard multi-step intake flows into an engaging, personality-driven experience. Built using an SVG morphing engine (inspired by the open-source bloub avatar architecture), the companion bot changes its gaze, eye shapes, emotional expressions, and body silhouettes based on what the user is typing.
Interaction States
| Form Event | Avatar State / Expression | Companion Behavior |
|---|---|---|
| Typing Name | attentif | The avatar's gaze follows your typing, paying close attention. |
| Valid Username | heureux | Smiles in delight when an available workspace handle is entered. |
| Invalid Handle | confus | Tilts its head with puzzled eyes if constraints are violated. |
| Password Focus | timide | Turns away shyly so it doesn't peek at sensitive credentials. |
| Unmasking Password | surpris | Eyes widen in surprise upon toggling password visibility. |
| Weak Password | effraye | Displays alarmed, worried eyes when entropy is dangerously low. |
| Strong Password | fier | Radiates confidence and pride on fortress-grade passwords. |
| Shape / Color Pick | excite / hilare | Morphs body silhouettes and colors in real time via radial interpolation. |
| Submitting / Launch | orbit → burst | Rings spin around the avatar during creation, exploding in a particle celebration upon launch. |
Technical Architecture
- Zero-Dependency SVG Engine: The avatar's contour is mathematically generated from radial harmonic profiles without heavy external animation libraries.
- Eye Masks: Eyes are cut through the body as SVG holes (
<mask>), guaranteeing they clip automatically when rotating towards the silhouette's edge. - Pointer & Target Gaze: Uses tangent spherical projection to rotate the head and gaze coordinates toward active input controls.