Window Avatar

Animation and shape parameters for Ferni's signature window avatar system. The window creates the illusion of Ferni peeking through the interface.

The Window Concept

The avatar appears to peek through a "window" in the UI. The top and bottom lids act as masks that reveal different amounts of the face, creating expressions without changing the eyes themselves.

  • Top lid: Controls brow/forehead visibility
  • Bottom lid: Creates mouth/speaking effect
  • Cutoff: How much of the face is visible
  • Curve: Shape of the mask edge
  • Asymmetry: Left-right difference for expressiveness

Expression Presets

Neutral

Top: 0.12, 0° Bottom: 0.12, 0°

Surprised

Top: 0.06, +0.1 Bottom: 0.18, 0°

Sleepy

Top: 0.22, -0.15 Bottom: 0.10, +0.15

Happy

Top: 0.14, +0.08 Bottom: 0.14, -0.20

Thinking

Top: 0.14, 0° Bottom: 0.11, +0.05, asym: 0.08

Curious

Top: 0.10, +0.05, asym: 0.15 Bottom: 0.13, 0°, asym: 0.12

Empathetic

Top: 0.13, +0.05, asym: 0.08 Bottom: 0.12, -0.10

Listening

Top: 0.11, +0.03 Bottom: 0.12, -0.05

Speaking Animation

The bottom lid opens based on voice volume, creating natural lip sync.

Bottom Lid Speaking

  • Min cutoff: 0.10 (barely open)
  • Max cutoff: 0.35 (fully open)
  • Volume scale: 0.25 (sensitivity)

Smoothing

  • Attack: 0.25 (fast response)
  • Release: 0.12 (slow decay)

Spring Physics

  • Stiffness: 400
  • Damping: 25
  • Mass: 1

Phoneme Shapes

Mouth shapes for different speech sounds.

Rest —
A ah, father
E eh, bed
I ee, see
O oh, go
U oo, blue
M/B/P closed
F/V f, v
W/R w, r

Animation Timing

Mouth

  • Idle: 200ms
  • Speaking: 60ms
  • Transition: 300ms

Brow

  • Raise: 250ms
  • Lower: 400ms
  • Transition: 350ms

Expression

  • Micro-expression: 80ms
  • Transition: 300ms
  • Hold: 500ms

State Transitions

Connecting

pulse animation

Thinking

contemplative-drift

Listening

attentive-lean

Speaking

voice-reactive

Farewell

gentle-close

Scale Variants

Avatar size affects window visibility and expression range.

24-32px Tiny

Eyes only - favicon, badge

40-64px Small

Minimal expression - nav, lists

80-120px Medium

Full expression - main avatar

160-240px Large

Maximum detail - hero, onboarding

Notification Badge

Dot 8px, no count
3
Small 16px, 1-2 digits
12
Default 20px, standard

Badge Variants

5
Default

Urgent notifications

5
Subtle

Non-urgent counts

✓
Success

Completed tasks

5
Persona

Persona-specific