Bringing Vega to Life: Storybook Warmth Meets Native iOS State Machines

Built specifically for 111 Insights (Vega iOS Learning App). Inspired by the tactile warmth of Hilda and the expressive ocular language of The Wild Robot, this live prototype runs a real compiled .riv binary (Artboard: VegaCompanion, StateMachine: VegaStateMachine) at 60 FPS with 4 latency-free states.

STATE: IDLE (60 FPS)

RiveRuntime 60Hz

"Hi! I'm Vega. Tap a state or test my voice lip-sync!"

1. Interactive State Machine Triggers VegaStateMachine

Click any state below to mutate the live Rive State Machine inputs (isListening, isSpeaking, celebrate) inside vega_companion.riv:

Bonus: Audio-Driven Lip Sync Demo Drives isSpeaking = true synchronized with WebSpeech/Audio amplitude envelope.

2. Live Rive Input Telemetry

Input Name	Rive Type	Live Value	Transition Blend
`isListening`	StateMachineBool	false	200ms Cubic
`isSpeaking`	StateMachineBool	false	150ms Cubic
`celebrate`	StateMachineTrigger	ready	120ms AnyState -> Exit 100%

3. Native iOS Integration (SwiftUI + RiveRuntime)

import SwiftUI
import RiveRuntime

struct VegaCompanionView: View {
    @StateObject private var riveVM = RiveViewModel(
        fileName: "vega_companion",
        stateMachineName: "VegaStateMachine",
        artboardName: "VegaCompanion"
    )

    var body: some View {
        riveVM.view()
            .frame(width: 300, height: 300)
    }

    func updateAIState(listening: Bool, speaking: Bool) {
        riveVM.setInput("isListening", value: listening)
        riveVM.setInput("isSpeaking", value: speaking)
    }

    func triggerCelebration() {
        riveVM.triggerInput("celebrate")
    }
}

1. Emotional Legibility Before Words

Young learners process posture and ocular focus faster than text or speech. When a child speaks, Vega immediately tilts its head 8 degrees, perks its ears forward, and pulses its chest gem so the child feels genuinely heard before the AI even finishes transcribing.

2. Zero-Latency State Blending

Every state transition in VegaStateMachine uses 120ms–200ms cubic interpolation with non-destructive layered keys. Interrupting Idle or Listening into Speaking or Celebrating never snaps or glitches on iOS.

3. Tactile Storybook Palette

Inspired by Hilda and The Wild Robot, Vega avoids hyper-saturated neon overload in favor of warm russet-orange, soft cream facial framing, and dual-specular eye highlights that create warmth, safety, and curiosity.