Mobile App Onboarding Animation Creation

Technical Specification
Live AI Guide Assets — Visual Contact Mode
Flutter App — Rive Animation Assets

1. Objective
Replace the static illustration in the Visual Contact with AI feature with an animated character that feels like a live video-call companion:
• Eye contact with the camera
• Facial expression (calm, attentive, empathetic)
• Lip movement synced to speech (lip-sync)
• Subtle breathing and blinking during pauses
• Reactive states: listening / speaking / waiting
Reference feel: a calm video call with a coach or therapist — NOT a meditation pose or cartoon mascot.
2. Recommended Format: Rive (Priority)
Why Rive
• Project already has assets/rive/ folder and {mode}_{gender}.riv naming pattern
• States switch in real time from Flutter (idle / listening / speaking)
• Lip-sync driven via numeric input (0.0–1.0) from TTS — no heavy video
• Small file size, scales cleanly on iPhone
Alternative: looped video clips (see Section 8). Rive remains the priority.
3. Characters & Gender Logic
Deliver 2 characters (not 4):
File Character Shown when user is
visual_contact_female.riv Female guide Male
visual_contact_male.riv Male guide Female

App rule (companionGenderFor): male users see a female guide; female users see a male guide. TTS voice matches the on-screen character gender.
Appearance
• Age: 28–40, trustworthy, not model-glossy or cartoonish
• Frame: chest/shoulders portrait (front camera video-call framing)
• Gaze: into the lens, soft eye contact
• Clothing: neutral, calm (hoodie, sweater, plain t-shirt). No logos
• Background in asset: neutral blurred or dark lavender — app adds UI on top
• Ethnicity: one pair to start (Central European look); expand later if needed
4. Animation States (Required)
Must match app enum VisualContactAvatarMode:
App state Code Character behavior
Waiting / pause idle Calm breathing, occasional blink, micro head motion, mouth closed or slightly open
AI processing user speech listening Attentive gaze, slight head tilt, nod — "I hear you"
AI speaking (TTS) speaking Lip-sync via mouthOpen input, live expression, subtle brow motion
Breathing exercise (emergency) breathing Slow inhale/exhale cycle; hands on chest optional

Transitions
• Smooth, 200–400 ms, no harsh jumps
• speaking → listening: close mouth, return attentive pose
• idle → speaking: short "about to speak" prep (100–200 ms)
5. Rive Technical Contract
5.1 File naming
assets/rive/visual_contact_female.riv
assets/rive/visual_contact_male.riv
5.2 State Machine
One state machine per file, name: VisualContact
State names (exact, snake_case, Latin): idle | listening | speaking | breathing
5.3 Inputs (Flutter-controlled)
Input Type Range Purpose
mouthOpen Number 0.0 – 1.0 Mouth openness during TTS
speechEnergy Number 0.0 – 1.0 Speech amplitude (optional v1.1)
blink Trigger — Forced blink (optional)
nod Trigger — Nod in listening (optional)

MVP minimum: mouthOpen + 4 states.
5.4 Lip-sync behavior
• When isAiSpeaking == true → state speaking
• mouthOpen updated 30–60 times/sec (sine or phrase envelope)
• Quiet speech: 0.15–0.45 | Active: 0.35–0.85 | Word pause: 0.05–0.15
• After TTS ends → idle or listening
5.5 Canvas & composition
Parameter Value
Aspect ratio 3:4 portrait (video call)
Artboard 1080 × 1440 px
Head in frame ~45–55% of height, centered on X
Safe area 8% inset from edges (UI badges, subtitles)
Palette Lavender / grey / beige — accent #7B69A7, bg #F7F4EF

5.6 File limits
Parameter Limit
.riv file size ≤ 1.5 MB (target ≤ 800 KB)
Animation FPS 60 in Rive; 30 sufficient on device
Complexity Face + shoulders only; no full-body mesh deform

6. Visual Style (Brand)
• Mood: calm, presence, safety — not clinical, not esoteric
• Expression: restrained, warm; avoid wide smiles and theatrical gestures
• Lighting: soft frontal key, light rim-light
• Forbidden: yoga pose, closed eyes in main states, meditation aura, holographic FX inside character
7. Usage Scenarios (asset must work in all)
• Conversation after a hard day — long dialogue, heavy speaking/listening
• Preparing for a difficult talk — confident, supportive tone
• Calm down now — breathing state
• State diagnostic — more listening, short replies
8. Alternative: Video Avatar
If video instead of Rive:
Files: visual_contact_{female|male}_{idle|speaking|listening}.mp4
Parameter Value
Codec H.264 MP4
Resolution 720 × 960
Loop length 3–6 sec seamless
File size ≤ 2 MB per clip

Downside: no precise TTS lip-sync. Rive preferred.
9. App Integration
• Add rive dependency to pubspec.yaml
• Build VisualContactRiveAvatar widget
• Map: idle → idle | listening → listening | speaking + isAiSpeaking → speaking + mouthOpen | breathing → breathing
• Fallback if .riv missing: PNG guide_recovery_{gender}.png
• Integration points: visual_contact_video_call_view.dart, visual_contact_screen.dart
10. Acceptance Criteria
MVP (required)
• ☐ 2 .riv files: visual_contact_female, visual_contact_male
• ☐ State machine VisualContact with 4 states
• ☐ mouthOpen visibly changes mouth in speaking
• ☐ Smooth state transitions
• ☐ Character faces camera, 3:4 portrait
• ☐ File ≤ 1.5 MB, no artifacts on iPhone 12+
• ☐ No meditation pose / closed eyes in idle and listening
v1.1 (nice to have)
• ☐ speechEnergy input
• ☐ Natural blinking in idle (built into animation)
• ☐ Micro head motion in listening
• ☐ Preview PNG for scenario list
Out of scope for MVP
• Room background, furniture, hand gestures
• Full Russian/ENG phoneme viseme sync (A/I/U/E/O)
• Unreal/Metahuman 3D render
11. Delivery Package
• 1. visual_contact_female.riv
• 2. visual_contact_male.riv
• 3. visual_contact_female_preview.png (1080×1440)
• 4. visual_contact_male_preview.png (1080×1440)
• 5. Short doc: states, inputs, mouthOpen value guide
• 6. Rive source files (.rev) for revisions
12. Production Estimates
Option Complexity
Rive MVP (2 chars, 4 states, lip-sync) Medium
Rive v1.1 (+ micro-expression polish) +30–40%
Video loops (6 clips) Simpler animation, heavier files