Neutral

Default resting state - ready and present

Lid Position
Q 50,-10
Eye Scale
1.0
Body Transform
none
Glow
Sage

Micro-Expressions

Subliminal emotional flashes (40-150ms) that build unconscious trust

Better Than Human
Recognition
80ms
Flash of "I see you"
Concern
100ms
Subtle worry flash
Delight
120ms
Quick joy spark
Warmth
100ms
Caring flash
Interest
90ms
Curiosity spark
Surprise
150ms
Brief startle

Animation Layers

Independent systems that stack to create lifelike presence

Breathing
4s cycle
Subtle body expansion creates sense of life
Blinking
3-7s random
Natural blink rhythm at random intervals
Gaze Drift
8s cycle
Subtle eye movement during idle states
Anticipation
Overshoot settle
Pixar-style overshoot and settle on transitions

Waveform Shapes by Emotion

Voice visualization patterns that match emotional states

Happy / Excited
Bouncy, high amplitude
Calm / Peaceful
Gentle, slow waves
Thinking / Processing
Intermittent bursts
Worried / Nervous
Jittery, irregular

Happy Family

8 states

Warmth Family

7 states

Playful Family

6 states

Thinking Family

6 states

Listening Family

5 states

Surprised Family

5 states

Concern Family

5 states

Sad Family

4 states

Confused Family

5 states

Nervous Family

5 states

Confident Family

5 states

Speaking Family

4 states

Animation System Specs

Primary Easing
Spring (0.34, 1.56, 0.64, 1)
Transition Duration
300-400ms
Lid System
Quadratic Bezier Paths
Micro-Expression Range
40-150ms (subliminal)
Animation Layers
4 (breathing, blink, gaze, anticipation)
Total Expressions
100+

Design Rules

Luxo-Style Eyes (MANDATORY)

All Ferni avatar eyes MUST be opaque white ellipses with NO pupils. Inspired by Pixar's Luxo Jr. lamp.

<!-- CORRECT --> <ellipse cx="36" cy="48" rx="7" ry="9" fill="white"/> <!-- WRONG: Never add pupils --> <circle cx="36" cy="50" r="3.5" fill="#2c2520"/>

Eye Shape = Emotion

Emotion comes from eye SHAPE transforms (scaleX, scaleY), not pupil position.

/* Happy: squinted */ transform: scaleY(0.8) scaleX(1.06); /* Surprised: wide */ transform: scaleY(1.15) scaleX(1.05);

Lid Curves Define Expression

SVG path curves on top/bottom lids create the expression shape.

/* Neutral: slight curve */ d: path("M 0,0 Q 50,-10 100,0"); /* Happy: deep squint */ d: path("M 0,0 Q 50,25 100,0");