Motion

Animation timing, easing, and choreography - Pixar-inspired motion that feels alive.

Pixar Principles

Our motion system is grounded in the 12 principles of animation, adapted for UI.

Squash & Stretch

Organic deformation during movement

Anticipation

Wind-up before action

Staging

Clear focus on important elements

Follow Through

Secondary actions trail primary

Slow In & Slow Out

Natural acceleration/deceleration

Arcs

Natural curved motion paths

Secondary Action

Supporting movements reinforce main

Timing

Personality through speed

Exaggeration

Emphasis through amplification

Appeal

Charismatic, engaging motion

Duration Tokens

Timing categories for consistent animation speed across the system.

instant 40ms Micro-expressions, subliminal
micro 80ms Micro-expressions upper bound
quick 100ms Quick feedback
fast 150ms Blink duration
normal 250ms Standard UI transitions
slow 400ms Deliberate, noticeable moves
moderate 450ms Speaking pulse
deliberate 600ms Emphasis, sparkle rotation
dramatic 800ms Eyes group transition
celebration 1000ms Contemplative transitions
glacial 1500ms Ambient, background effects

Easing Curves

Bezier curves that define motion character.

standard

cubic-bezier(0.4, 0.0, 0.2, 1)

Material standard deceleration

accelerate

cubic-bezier(0.4, 0.0, 1, 1)

Elements leaving the screen

decelerate

cubic-bezier(0.0, 0.0, 0.2, 1)

Elements entering the screen

sharp

cubic-bezier(0.4, 0.0, 0.6, 1)

Quick, decisive movements

spring

cubic-bezier(0.34, 1.56, 0.64, 1)

Expressive bounce with overshoot

springHeavy

cubic-bezier(0.34, 1.8, 0.64, 1)

Stronger bounce

gentle

cubic-bezier(0.4, 0, 0.2, 1)

Soft, natural movement

organic

cubic-bezier(0.25, 0.46, 0.45, 0.94)

Living, breathing motion

bounce

cubic-bezier(0.68, -0.55, 0.265, 1.55)

Playful bounce effect

anticipate

cubic-bezier(0.38, -0.4, 0.88, 0.65)

Wind-up before action

Stagger Timing

Delays for cascading animations.

Name Value Use Case
fast 30ms Quick cascade, list items
normal 50ms Standard stagger delay
slow 80ms Deliberate cascade
dramatic 120ms Pronounced reveal

UI Animation Presets

Ready-to-use animation configurations for common patterns.

buttonPress

fast / spring scale: 1 → 0.95

buttonHover

fast / gentle scale: 1 → 1.02

cardHover

normal / gentle translateY: 0 → -4px

modalEnter

slow / spring scale: 0.9 → 1, opacity: 0 → 1

modalExit

normal / accelerate scale: 1 → 0.95, opacity: 1 → 0

toastEnter

slow / spring translateY: 16 → 0, opacity: 0 → 1

fadeIn

normal / decelerate opacity: 0 → 1

celebration

1000ms / spring scale: 0.8 → 1

Persona Motion Modifiers

Each persona has unique timing characteristics.

F

Ferni

1.0x gentle

Balanced, warm pacing

P

Peter

0.85x spring

Quick, energetic

A

Alex

1.0x standard

Balanced, professional

M

Maya

0.95x standard

Efficient, organized

J

Jordan

0.8x spring

Fast, celebratory

N

Nayan

1.1x gentle

Thoughtful, measured

Ferni EQ - Superhuman Emotional Intelligence

Motion patterns that create connection through micro-expressions, active listening, and anticipation.

Micro-Expressions

Subliminal emotional flashes (40-150ms) - below conscious perception but felt.

80ms

recognition

Curious flash when user mentions familiar topic

60ms

concernFlash

Worried flash before empathy kicks in

100ms

delightFlash

Pleased flash when user achieves something

120ms

warmthPulse

Warm flash during connection moments

70ms

interestFlash

Curious flash at unexpected content

Active Listening

Real-time feedback during user speech to show presence.

Nod Type Duration Movement Pause Range
microNod 180ms 1.5px translateY, 0.3deg rotate 300-800ms
subtleNod 220ms 2.5px translateY, 0.5deg rotate 800-1500ms
visibleNod 280ms 4px translateY, 0.8deg rotate 1200-2000ms
listeningLean 400ms -3px translateY (forward lean) Hold 1500ms

Breath Synchronization

Neural mirroring - sync breathing with user for connection.

10 breaths/min Calming effect
15 breaths/min Natural sync
20 breaths/min Energized connection

Ferni breathes slightly slower than user rhythm (0.95x multiplier) for calming effect.

Avatar Animation Layers

Layered animation system with priority ordering.

1

Breathing

Always-on base layer - 4000ms cycle, 1.8% expansion

2

Blinking

Random natural blinking - 3000-7000ms interval

3

Gaze Drift

Subtle eye movement - 8000ms cycle

4

Anticipation

Slight overshoot on transitions

5

Expression

Emotional state changes - 350ms duration

6

Speaking

Active speech animation - overrides breathing

Glow States

Ambient glow animation for emotional states.

idle

blur: 20px, spread: 8px, opacity: 0.4
Pulse: 4000ms

active

blur: 30px, spread: 12px, opacity: 0.6
Pulse: 2000ms

excited

blur: 40px, spread: 16px, opacity: 0.8
Pulse: 1500ms

calm

blur: 25px, spread: 10px, opacity: 0.35
Pulse: 5000ms

concern

blur: 22px, spread: 8px, opacity: 0.5
Pulse: 3000ms

Reduced Motion

Accessibility First

Simplified animations for users who prefer reduced motion.

Setting Value
Easing Replacements spring, bounce, elastic, anticipate → standard
Max Duration 200ms
Stagger Disabled
Disabled Transforms scale, rotate
Allowed Transforms opacity, translateY