Animation Sequences

Choreographed multi-step animation sequences for key brand moments. Pixar-style orchestration that makes every interaction feel alive.

Sequence Orchestration

Priority Levels

  • Critical: connection_success, error_recovery
  • High: celebration_big, team_unlock
  • Normal: handoff_transition, celebration_small
  • Low: deep_moment, session_end

Timing Rules

  • Max queue: 3 sequences
  • Min gap between: 500ms
  • Max concurrent: 1
  • No overlapping

Onboarding Reveal

Trigger: first_app_open · Duration: 4500ms · Non-interruptible

0ms

Backdrop

fadeIn · expoOut

Warm backdrop fades in
400ms

Avatar

breatheIn · gentle

Avatar materializes with soft breath
600ms

Avatar Glow

pulseIn · gentle

Persona glow awakens
1600ms

Greeting

typewriter · linear

"Hey. I'm Ferni."
3500ms

CTA

fadeSlideUp · spring

CTA appears, inviting conversation
Sound: system.startup @ 300ms Haptic: warmWelcome @ 500ms

Connection Success

Trigger: livekit_connected · Duration: 1200ms · Interruptible

0ms

Avatar

settleBounce · spring

Satisfying arrival bounce
100ms

Avatar Glow

pulse · gentle

Glow pulses with life
200ms

Status Text

swap

"Connected" in success color
400ms

Waveform

fadeIn · decelerate

Waveform appears, ready to listen

Handoff Transition

Trigger: persona_switch · Duration: 2200ms · Non-interruptible

0ms

Current Avatar

fadeGlow · accelerate

Current persona gently fades
200ms

Transition Glow

colorShift · gentle

Color transitions between personas
700ms

New Avatar

breatheIn · spring

New persona materializes
1200ms

Name Tag

slideUp · spring

Name appears with personality

Major Celebration

Trigger: achievement_major · Duration: 3500ms · Non-interruptible

0ms

Overlay

fadeIn

Dimmed backdrop
100ms

Avatar

joyBounce · spring

Pixar-style joy bounce
200ms

Avatar Glow

radiate · expoOut

Glow radiates outward
300ms

Confetti

burst · 50 particles

Confetti celebration
600ms

Achievement Card

popIn · spring

Card pops in
1100ms

Achievement Text

typewriter · 40ms/char

Text types out

Team Unlock

Trigger: persona_unlocked · Duration: 4000ms · Non-interruptible

0ms

Overlay

fadeIn

300ms

Mystery Orb

materialize · spring

900ms

New Persona Avatar

reveal · expoOut

Circle clip reveal
1200ms

Confetti

burst · 40 particles

1600ms

Persona Name

typewriter

2200ms

Persona Bio

fadeSlideUp · spring

2800ms

Meet Button

pulseAttention · repeat 2

Reduced Motion

Alternative sequences for prefers-reduced-motion.

celebration_big

Removes confetti, simplifies avatar bounce to subtle scale

onboarding_reveal

Avatar uses simple fadeIn, greeting uses fadeIn instead of typewriter

handoff_transition

Simple crossfade: current avatar fades out, new avatar fades in

Animation Library

Reusable animation definitions referenced by sequences.

fadeIn

opacity: 0 → 1

fadeSlideUp

opacity: 0, Y: 16px → opacity: 1, Y: 0

breatheIn

scale: 0.9, blur → scale: 1.02 → scale: 1

joyBounce

Pixar-style multi-stage bounce

spring

scale: 0.9 → 1.05 → 0.98 → 1

nod

Y: 0 → -4px, rotate: 2° → 0