[V0_FILE]typescriptreact:file="hooks/use-interval.ts" isMerged="true" "use client" import { useEffect, useRef } from "react" export function useInterval(callback: () => void, delay: number | null) { const savedCallback = useRef<() => void>() // Remember the latest callback useEffect(() => { savedCallback.current = callback }, [callback]) // Set up the interval useEffect(() => { function tick() { savedCallback.current?.() } if (delay !== null) { const id = setInterval(tick, delay) return () => clearInterval(id) } }, [delay]) } [V0_FILE]png:file="public/friendly-female-assistant.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/friendly-female-assistant-kpo6EIZkPUELSQh9p3gnkSztYHEz75.png" isMerged="true" [V0_FILE]typescriptreact:file="package.json" type="code" isMerged="true" { "dependencies": { "lottie-react": "^2.4.0" } } [V0_FILE]json:file="public/lottie/bubble-animation.json" isQuickEdit="true" isMerged="true" { "autoplay": true, "loop": true, "prerender": true, "rendererSettings": { "preserveAspectRatio": "xMidYMid meet" }, "layers": [] } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import MiraAssistant from "@/components/mira-assistant" export default function Home() { return (

Mira Virtual Assistant

Idle/Speaking State

Listening State

Loading State

Interactive Demo

This demo cycles through all states automatically with linear 450ms animations. The avatar moves within the animated Lottie bubble. Click "Start Demo" to see the transitions.

) } [V0_FILE]png:file="public/mira-agent.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-N1pBC9Wb3mDfflElsdHPC91FAh84N6.png" isMerged="true" [V0_FILE]json:file="public/wave-animation.json" url="https://blobs.vusercontent.net/blob/Animation%20-%201746551934894-ikL70svfczHOOQDBC9Qlek8WleGvvQ.json" [V0_FILE]typescriptreact:file="components/mira-assistant.tsx" isEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { motion, AnimatePresence } from "framer-motion" import { useInterval } from "@/hooks/use-interval" import Lottie from "lottie-react" type MiraState = "idle" | "listening" | "speaking" | "loading" interface MiraAssistantProps { state?: MiraState size?: number avatarUrl?: string onStateChange?: (state: MiraState) => void } export default function MiraAssistant({ state = "idle", size = 120, avatarUrl = "/mira-agent.png", onStateChange, }: MiraAssistantProps) { const [currentState, setCurrentState] = useState(state) const bubbleLottieRef = useRef(null) const waveLottieRef = useRef(null) // Demo state cycling const [demoMode, setDemoMode] = useState(false) useEffect(() => { if (!demoMode) { setCurrentState(state) } }, [state, demoMode]) useInterval( () => { if (demoMode) { setCurrentState((prev) => { const states: MiraState[] = ["idle", "listening", "speaking", "loading"] const currentIndex = states.indexOf(prev) const nextIndex = (currentIndex + 1) % states.length const nextState = states[nextIndex] onStateChange?.(nextState) return nextState }) } }, demoMode ? 3000 : null, ) const bubbleSize = size const avatarSize = bubbleSize * 0.9 const waveSize = bubbleSize * 2.5 // Lottie animation data directly embedded const bubbleAnimation = { nm: "Main Scene", ddd: 0, h: 700, w: 700, meta: { g: "@lottiefiles/creator 1.45.0" }, layers: [ { ty: 0, nm: "Pre-comp 3", sr: 1, st: 141.000005743048, op: 231.000009408823, ip: 141.000005743048, hd: true, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [349.9707161222536, 358.4428027441661], ix: 1 }, s: { a: 0, k: [100, 100, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [349.9707161222536, 358.4428027441661], ix: 2 }, r: { a: 0, k: 0, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 0, k: 100, ix: 11 }, }, w: 700, h: 700, refId: "comp_0_af3827db-10dc-40b4-bdbe-f38a80064eb2", ind: 1, }, { ty: 0, nm: "Pre-comp 3", sr: 1, st: 71.0000028918893, op: 161.000006557664, ip: 71.0000028918893, hd: true, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [349.3325478912665, 350.6780010220082], ix: 1 }, s: { a: 0, k: [100, 100, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [349.3325478912665, 350.6780010220082], ix: 2 }, r: { a: 0, k: 0, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 0, k: 100, ix: 11 }, }, w: 700, h: 700, refId: "comp_0_af3827db-10dc-40b4-bdbe-f38a80064eb2", ind: 2, }, { ty: 0, nm: "Pre-comp 3", sr: 1, st: 0, op: 90.0000036657751, ip: 0, hd: true, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [350, 350, 0], ix: 1 }, s: { a: 0, k: [100, 100, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [350, 350, 0], ix: 2 }, r: { a: 0, k: 0, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 0, k: 100, ix: 11 }, }, w: 700, h: 700, refId: "comp_0_af3827db-10dc-40b4-bdbe-f38a80064eb2", ind: 3, }, { ty: 0, nm: "bubble", sr: 1, st: 0, op: 600.000024438501, ip: 0, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [266.06924020893905, 350.611255089682], ix: 1 }, s: { a: 0, k: [91, 91, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [293.7620483923032, 298.31782685391414], ix: 2 }, r: { a: 0, k: 43, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 0, k: 70, ix: 11 }, }, ef: [ { ty: 29, mn: "ADBE Gaussian Blur 2", nm: "Gaussian Blur", ix: 1, en: 1, ef: [ { ty: 0, mn: "ADBE Gaussian Blur 2-0001", nm: "Blurriness", ix: 1, v: { a: 0, k: 40.5, ix: 1 } }, { ty: 7, mn: "ADBE Gaussian Blur 2-0002", nm: "Blur Dimensions", ix: 2, v: { a: 0, k: 1, ix: 2 } }, { ty: 7, mn: "ADBE Gaussian Blur 2-0003", nm: "Repeat Edge Pixels", ix: 3, v: { a: 0, k: 0, ix: 3 } }, ], }, ], w: 700, h: 700, refId: "comp_4_242056d8-406d-47b9-a851-96d5ffa85805", ind: 4, }, { ty: 0, nm: "bubble", sr: 1, st: 0, op: 600.000024438501, ip: 0, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [350, 350, 0], ix: 1 }, s: { a: 0, k: [100, 100, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [350, 350, 0], ix: 2 }, r: { a: 0, k: 226, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 0, k: 48, ix: 11 }, }, ef: [ { ty: 20, mn: "ADBE Tint", nm: "Tint", ix: 1, en: 1, ef: [ { ty: 2, mn: "ADBE Tint-0001", nm: "Map Black To", ix: 1, v: { a: 0, k: [0, 0.7569, 0.6353], ix: 1 } }, { ty: 2, mn: "ADBE Tint-0002", nm: "Map White To", ix: 2, v: { a: 0, k: [0.3176, 0, 1], ix: 2 } }, { ty: 0, mn: "ADBE Tint-0003", nm: "Amount to Tint", ix: 3, v: { a: 0, k: 100, ix: 3 } }, { ty: 6, mn: "ADBE Tint-0004", nm: "", ix: 4, v: 0 }, ], }, ], w: 700, h: 700, refId: "comp_4_242056d8-406d-47b9-a851-96d5ffa85805", ind: 5, }, { ty: 0, nm: "bubble", sr: 1, st: 0, op: 600.000024438501, ip: 0, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [350, 350, 0], ix: 1 }, s: { a: 0, k: [100, 100, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [350, 350, 0], ix: 2 }, r: { a: 0, k: 0, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 0, k: 100, ix: 11 }, }, w: 700, h: 700, refId: "comp_4_242056d8-406d-47b9-a851-96d5ffa85805", ind: 6, }, ], v: "5.7.0", fr: 29.9700012207031, op: 232, ip: 0, assets: [ { nm: "Scene", id: "comp_0_af3827db-10dc-40b4-bdbe-f38a80064eb2", layers: [ { ty: 0, nm: "Pre-comp 2", sr: 1, st: 13.0000005295009, op: 90.0000036657751, ip: 13.0000005295009, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [350, 350, 0], ix: 1 }, s: { a: 0, k: [100, 100, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [350, 350, 0], ix: 2 }, r: { a: 0, k: 42, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 0, k: 55, ix: 11 }, }, w: 700, h: 700, refId: "comp_1_bf848760-8096-4f6d-9d81-fd3c323a023e", ind: 1, }, { ty: 0, nm: "Pre-comp 2", sr: 1, st: 0, op: 77.0000031362743, ip: 0, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [350, 350, 0], ix: 1 }, s: { a: 0, k: [100, 100, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [350, 350, 0], ix: 2 }, r: { a: 0, k: 0, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 0, k: 100, ix: 11 }, }, w: 700, h: 700, refId: "comp_1_bf848760-8096-4f6d-9d81-fd3c323a023e", ind: 2, }, ], }, { nm: "Scene_1", id: "comp_1_bf848760-8096-4f6d-9d81-fd3c323a023e", layers: [ { ty: 0, nm: "Pre-comp 1", sr: 1, st: 9.00000036657752, op: 77.0000031362743, ip: 9.00000036657752, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [350, 350, 0], ix: 1 }, s: { a: 0, k: [100, 100, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [350, 350, 0], ix: 2 }, r: { a: 0, k: 69, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 0, k: 100, ix: 11 }, }, ef: [ { ty: 20, mn: "ADBE Tint", nm: "Tint", ix: 1, en: 1, ef: [ { ty: 2, mn: "ADBE Tint-0001", nm: "Map Black To", ix: 1, v: { a: 0, k: [0, 0.7569, 0.6353], ix: 1 }, }, { ty: 2, mn: "ADBE Tint-0002", nm: "Map White To", ix: 2, v: { a: 0, k: [0.5882, 0.4, 1], ix: 2 } }, { ty: 0, mn: "ADBE Tint-0003", nm: "Amount to Tint", ix: 3, v: { a: 0, k: 100, ix: 3 } }, { ty: 6, mn: "ADBE Tint-0004", nm: "", ix: 4, v: 0 }, ], }, ], w: 700, h: 700, refId: "comp_2_4b583933-80bd-4250-946e-e19333b46253", ind: 1, }, { ty: 0, nm: "Pre-comp 1", sr: 1, st: 0, op: 68.0000027696968, ip: 0, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [350, 350, 0], ix: 1 }, s: { a: 0, k: [100, 100, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [350, 350, 0], ix: 2 }, r: { a: 0, k: 0, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 0, k: 100, ix: 11 }, }, w: 700, h: 700, refId: "comp_2_4b583933-80bd-4250-946e-e19333b46253", ind: 2, }, ], }, { nm: "Scene_2", id: "comp_2_4b583933-80bd-4250-946e-e19333b46253", layers: [ { ty: 0, nm: "Shape Layer 1 Comp 1", sr: 1, st: 0, op: 47.0000019143492, ip: 0, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [350, 350, 0], ix: 1 }, s: { a: 0, k: [100, 100, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [350, 350, 0], ix: 2 }, r: { a: 0, k: 275, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 0, k: 100, ix: 11 }, }, w: 700, h: 700, refId: "comp_3_37dd3a5e-0b8f-4716-bcdc-5a0af7e077f9", ind: 1, }, { ty: 0, nm: "Shape Layer 1 Comp 1", sr: 1, st: 12.00000048877, op: 59.0000024031193, ip: 12.00000048877, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [350, 350, 0], ix: 1 }, s: { a: 0, k: [100, 100, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [350, 350, 0], ix: 2 }, r: { a: 0, k: 227, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 0, k: 100, ix: 11 }, }, w: 700, h: 700, refId: "comp_3_37dd3a5e-0b8f-4716-bcdc-5a0af7e077f9", ind: 2, }, { ty: 0, nm: "Shape Layer 1 Comp 1", sr: 1, st: 5.00000020365417, op: 52.0000021180034, ip: 5.00000020365417, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [350, 350, 0], ix: 1 }, s: { a: 0, k: [100, 100, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [350, 350, 0], ix: 2 }, r: { a: 0, k: 140, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 0, k: 100, ix: 11 }, }, w: 700, h: 700, refId: "comp_3_37dd3a5e-0b8f-4716-bcdc-5a0af7e077f9", ind: 3, }, { ty: 0, nm: "Shape Layer 1 Comp 1", sr: 1, st: 21.0000008553475, op: 68.0000027696968, ip: 21.0000008553475, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [350, 350, 0], ix: 1 }, s: { a: 0, k: [100, 100, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [350, 350, 0], ix: 2 }, r: { a: 0, k: 48, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 0, k: 100, ix: 11 }, }, w: 700, h: 700, refId: "comp_3_37dd3a5e-0b8f-4716-bcdc-5a0af7e077f9", ind: 4, }, { ty: 0, nm: "Shape Layer 1 Comp 1", sr: 1, st: 14.0000005702317, op: 61.0000024845809, ip: 14.0000005702317, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [350, 350, 0], ix: 1 }, s: { a: 0, k: [100, 100, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [350, 350, 0], ix: 2 }, r: { a: 0, k: 0, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 0, k: 100, ix: 11 }, }, w: 700, h: 700, refId: "comp_3_37dd3a5e-0b8f-4716-bcdc-5a0af7e077f9", ind: 5, }, ], }, { nm: "Scene_3", id: "comp_3_37dd3a5e-0b8f-4716-bcdc-5a0af7e077f9", layers: [ { ty: 4, nm: "Shape Layer 1", sr: 1, st: 0, op: 47.0000019143492, ip: 0, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [-261, 141, 0], ix: 1 }, s: { a: 1, k: [ { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [0, 0, 100], t: 0 }, { s: [100, 100, 100], t: 48.0000019550801 }, ], ix: 6, }, sk: { a: 0, k: 0 }, p: { a: 1, k: [ { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [349, 350, 0], t: 0 }, { s: [234, 442, 0], t: 48.0000019550801 }, ], ix: 2, }, r: { a: 0, k: 0, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 1, k: [ { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [100], t: 26 }, { s: [0], t: 46.0000018736184 }, ], ix: 11, }, }, shapes: [ { ty: "gr", bm: 0, hd: false, mn: "ADBE Vector Group", nm: "Ellipse 1", ix: 1, cix: 2, np: 3, it: [ { ty: "el", bm: 0, hd: false, mn: "ADBE Vector Shape - Ellipse", nm: "Ellipse Path 1", d: 1, p: { a: 0, k: [0, 0], ix: 3 }, s: { a: 0, k: [12, 12], ix: 2 }, }, { ty: "st", bm: 0, hd: false, mn: "ADBE Vector Graphic - Stroke", nm: "Stroke 1", lc: 1, lj: 1, ml: 4, o: { a: 0, k: 0, ix: 4 }, w: { a: 0, k: 3, ix: 5 }, c: { a: 0, k: [0.5373, 0.3216, 1], ix: 3 }, }, { ty: "fl", bm: 0, hd: false, mn: "ADBE Vector Graphic - Fill", nm: "Fill 1", c: { a: 0, k: [0.6863, 0.5412, 1], ix: 4 }, r: 1, o: { a: 0, k: 100, ix: 5 }, }, { ty: "tr", a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, sk: { a: 0, k: 0, ix: 4 }, p: { a: 0, k: [-261, 141], ix: 2 }, r: { a: 0, k: 0, ix: 6 }, sa: { a: 0, k: 0, ix: 5 }, o: { a: 0, k: 100, ix: 7 }, }, ], }, ], ind: 1, }, ], }, { nm: "Scene_4", id: "comp_4_242056d8-406d-47b9-a851-96d5ffa85805", layers: [ { ty: 4, nm: "Shape Layer 1", sr: 1, st: 0, op: 600.000024438501, ip: 0, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [0, 0, 0], ix: 1 }, s: { a: 0, k: [100, 100, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [350, 350, 0], ix: 2 }, r: { a: 1, k: [ { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [0], t: 0 }, { s: [720], t: 231.000009408823 }, ], ix: 10, }, sa: { a: 0, k: 0 }, o: { a: 0, k: 100, ix: 11 }, }, shapes: [ { ty: "gr", bm: 0, hd: false, mn: "ADBE Vector Group", nm: "Ellipse 1", ix: 1, cix: 2, np: 3, it: [ { ty: "el", bm: 0, hd: false, mn: "ADBE Vector Shape - Ellipse", nm: "Ellipse Path 1", d: 1, p: { a: 0, k: [0, 0], ix: 3 }, s: { a: 0, k: [400, 400], ix: 2 }, }, { ty: "gs", bm: 0, hd: false, mn: "ADBE Vector Graphic - G-Stroke", nm: "Gradient Stroke 1", e: { a: 0, k: [-761.875, 495.96], ix: 5 }, g: { p: 3, k: { a: 0, k: [ 0, 1, 1, 1, 0.496, 0.6588235294117647, 0.5019607843137255, 1, 0.993, 0.3176470588235294, 0, 1, 0, 0, 0.5, 0.5, 1, 1, ], ix: 8, }, }, t: 2, a: { a: 0, k: 0, ix: 7 }, h: { a: 0, k: 0, ix: 6 }, s: { a: 0, k: [154.435, -126.834], ix: 4 }, lc: 1, lj: 1, ml: 4, o: { a: 0, k: 100, ix: 9 }, w: { a: 0, k: 1, ix: 10 }, }, { ty: "fl", bm: 0, hd: false, mn: "ADBE Vector Graphic - Fill", nm: "Fill 1", c: { a: 0, k: [0.6863, 0.5412, 1], ix: 4 }, r: 1, o: { a: 0, k: 0, ix: 5 }, }, { ty: "tr", a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, sk: { a: 0, k: 0, ix: 4 }, p: { a: 0, k: [1, -1], ix: 2 }, r: { a: 0, k: 0, ix: 6 }, sa: { a: 0, k: 0, ix: 5 }, o: { a: 0, k: 100, ix: 7 }, }, ], }, ], ind: 1, }, { ty: 4, nm: "Shape Layer 10", sr: 1, st: 0, op: 600.000024438501, ip: 0, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [59.113, -37.893, 0], ix: 1 }, s: { a: 0, k: [131.951, 131.951, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [351, 351, 0], ix: 2 }, r: { a: 1, k: [ { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [382], t: 0 }, { s: [742], t: 231.000009408823 }, ], ix: 10, }, sa: { a: 0, k: 0 }, o: { a: 0, k: 100, ix: 11 }, }, shapes: [ { ty: "gr", bm: 0, hd: false, mn: "ADBE Vector Group", nm: "Shape 1", ix: 1, cix: 2, np: 3, it: [ { ty: "sh", bm: 0, hd: false, mn: "ADBE Vector Shape - Group", nm: "Path 1", ix: 1, d: 1, ks: { a: 0, k: { c: true, i: [ [0, 75.084], [-2.326, 11.481], [8.484, -20.679], [0, -18.258], [-75.111, 0], [-2.638, 0.152], ], o: [ [0, -12.43], [4.439, -21.907], [-6.526, 15.906], [0, 75.111], [2.677, 0], [-56.982, -4.209], ], v: [ [-30.208, -36.759], [-26.642, -72.724], [-61.861, -83.451], [-71.985, -31.87], [64.015, 104.13], [71.985, 103.892], ], }, ix: 2, }, }, { ty: "st", bm: 0, hd: false, mn: "ADBE Vector Graphic - Stroke", nm: "Stroke 1", lc: 1, lj: 1, ml: 4, o: { a: 0, k: 0, ix: 4 }, w: { a: 0, k: 3, ix: 5 }, c: { a: 0, k: [0.5373, 0.3216, 1], ix: 3 }, }, { ty: "gf", bm: 0, hd: false, mn: "ADBE Vector Graphic - G-Fill", nm: "Gradient Fill 1", e: { a: 0, k: [100, 0], ix: 6 }, g: { p: 3, k: { a: 0, k: [ 0, 0.3176470588235294, 0, 1, 0.487, 0.3176470588235294, 0, 1, 0.998, 0.3176470588235294, 0, 1, 0, 0.44, 0.5, 0.22, 1, 0, ], ix: 9, }, }, t: 2, a: { a: 0, k: 0, ix: 8 }, h: { a: 0, k: 0, ix: 7 }, s: { a: 0, k: [0, 0], ix: 5 }, r: 1, o: { a: 0, k: 100, ix: 10 }, }, { ty: "tr", a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, sk: { a: 0, k: 0, ix: 4 }, p: { a: 0, k: [0, 0], ix: 2 }, r: { a: 0, k: 0, ix: 6 }, sa: { a: 0, k: 0, ix: 5 }, o: { a: 0, k: 100, ix: 7 }, }, ], }, ], ind: 2, }, { ty: 4, nm: "Shape Layer 4", sr: 1, st: 0, op: 600.000024438501, ip: 0, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [-128, 0, 0], ix: 1 }, s: { a: 0, k: [65.625, 100, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [222, 350, 0], ix: 2 }, r: { a: 0, k: 0, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 0, k: 54, ix: 11 }, }, shapes: [ { ty: "gr", bm: 0, hd: false, mn: "ADBE Vector Group", nm: "Ellipse 1", ix: 1, cix: 2, np: 3, it: [ { ty: "el", bm: 0, hd: false, mn: "ADBE Vector Shape - Ellipse", nm: "Ellipse Path 1", d: 1, p: { a: 0, k: [0, 0], ix: 3 }, s: { a: 0, k: [16, 16], ix: 2 }, }, { ty: "st", bm: 0, hd: false, mn: "ADBE Vector Graphic - Stroke", nm: "Stroke 1", lc: 1, lj: 1, ml: 4, o: { a: 0, k: 0, ix: 4 }, w: { a: 0, k: 3, ix: 5 }, c: { a: 0, k: [0.5373, 0.3216, 1], ix: 3 }, }, { ty: "gf", bm: 0, hd: false, mn: "ADBE Vector Graphic - G-Fill", nm: "Gradient Fill 1", e: { a: 0, k: [100, 0], ix: 6 }, g: { p: 3, k: { a: 0, k: [0.002, 1, 1, 1, 0.488, 1, 1, 1, 0.998, 1, 1, 1, 0, 1, 0.5, 0.5, 1, 0], ix: 9 }, }, t: 2, a: { a: 0, k: 0, ix: 8 }, h: { a: 0, k: 0, ix: 7 }, s: { a: 0, k: [0, 0], ix: 5 }, r: 1, o: { a: 0, k: 100, ix: 10 }, }, { ty: "tr", a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, sk: { a: 0, k: 0, ix: 4 }, p: { a: 0, k: [-128, 0], ix: 2 }, r: { a: 0, k: 0, ix: 6 }, sa: { a: 0, k: 0, ix: 5 }, o: { a: 0, k: 100, ix: 7 }, }, ], }, ], ind: 3, }, { ty: 4, nm: "Shape Layer 8", sr: 1, st: 0, op: 600.000024438501, ip: 0, hd: false, ddd: 0, bm: 0, hasMask: false, td: 1, ao: 0, ks: { a: { a: 0, k: [0, 0, 0], ix: 1 }, s: { a: 0, k: [100, 100, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [350, 350, 0], ix: 2 }, r: { a: 1, k: [ { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [0], t: 0 }, { s: [360], t: 59.0000024031193 }, ], ix: 10, }, sa: { a: 0, k: 0 }, o: { a: 0, k: 100, ix: 11 }, }, shapes: [ { ty: "gr", bm: 0, hd: false, mn: "ADBE Vector Group", nm: "Ellipse 1", ix: 1, cix: 2, np: 3, it: [ { ty: "el", bm: 0, hd: false, mn: "ADBE Vector Shape - Ellipse", nm: "Ellipse Path 1", d: 1, p: { a: 0, k: [0, 0], ix: 3 }, s: { a: 0, k: [400, 400], ix: 2 }, }, { ty: "st", bm: 0, hd: false, mn: "ADBE Vector Graphic - Stroke", nm: "Stroke 1", lc: 1, lj: 1, ml: 4, o: { a: 0, k: 0, ix: 4 }, w: { a: 0, k: 3, ix: 5 }, c: { a: 0, k: [0.5373, 0.3216, 1], ix: 3 }, }, { ty: "gf", bm: 0, hd: false, mn: "ADBE Vector Graphic - G-Fill", nm: "Gradient Fill 1", e: { a: 0, k: [202.396, -0.369], ix: 6 }, g: { p: 3, k: { a: 0, k: [0, 1, 1, 1, 0.487, 1, 1, 1, 0.998, 1, 1, 1, 0, 0.44, 0.5, 0.22, 1, 0], ix: 9 }, }, t: 2, a: { a: 0, k: 0, ix: 8 }, h: { a: 0, k: 0, ix: 7 }, s: { a: 0, k: [0, 0], ix: 5 }, r: 1, o: { a: 0, k: 100, ix: 10 }, }, { ty: "tr", a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, sk: { a: 0, k: 0, ix: 4 }, p: { a: 0, k: [1, -1], ix: 2 }, r: { a: 0, k: 0, ix: 6 }, sa: { a: 0, k: 0, ix: 5 }, o: { a: 0, k: 100, ix: 7 }, }, ], }, ], ind: 4, }, { ty: 4, nm: "Shape Layer 7", sr: 1, st: 0, op: 600.000024438501, ip: 0, hd: false, ddd: 0, bm: 0, tt: 1, hasMask: false, ao: 0, ks: { a: { a: 0, k: [-118, 46, 0], ix: 1 }, s: { a: 1, k: [ { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [33.333, 100, 100], t: 0 }, { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [100, 100, 100], t: 29 }, { s: [33.333, 100, 100], t: 59.0000024031193 }, ], ix: 6, }, sk: { a: 0, k: 0 }, p: { a: 1, k: [ { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [106, 342, 0], t: 0 }, { s: [596, 342, 0], t: 59.0000024031193 }, ], ix: 2, }, r: { a: 0, k: 38, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 0, k: 39, ix: 11 }, }, shapes: [ { ty: "gr", bm: 0, hd: false, mn: "ADBE Vector Group", nm: "Rectangle 1", ix: 1, cix: 2, np: 3, it: [ { ty: "rc", bm: 0, hd: false, mn: "ADBE Vector Shape - Rect", nm: "Rectangle Path 1", d: 1, p: { a: 0, k: [0, 0], ix: 3 }, r: { a: 0, k: 0, ix: 4 }, s: { a: 0, k: [72, 596], ix: 2 }, }, { ty: "st", bm: 0, hd: false, mn: "ADBE Vector Graphic - Stroke", nm: "Stroke 1", lc: 1, lj: 1, ml: 4, o: { a: 0, k: 0, ix: 4 }, w: { a: 0, k: 3, ix: 5 }, c: { a: 0, k: [0.5373, 0.3216, 1], ix: 3 }, }, { ty: "gf", bm: 0, hd: false, mn: "ADBE Vector Graphic - G-Fill", nm: "Gradient Fill 1", e: { a: 0, k: [-2.662, 190], ix: 6 }, g: { p: 3, k: { a: 0, k: [0, 1, 1, 1, 0.487, 1, 1, 1, 0.998, 1, 1, 1, 0, 0.44, 0.5, 0.22, 1, 0], ix: 9 }, }, t: 2, a: { a: 0, k: 0, ix: 8 }, h: { a: 0, k: 0, ix: 7 }, s: { a: 0, k: [1.369, -19], ix: 5 }, r: 1, o: { a: 0, k: 100, ix: 10 }, }, { ty: "tr", a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, sk: { a: 0, k: 0, ix: 4 }, p: { a: 0, k: [-118, 46], ix: 2 }, r: { a: 0, k: 0, ix: 6 }, sa: { a: 0, k: 0, ix: 5 }, o: { a: 0, k: 100, ix: 7 }, }, ], }, ], ind: 5, tp: 4, }, { ty: 4, nm: "Shape Layer 6", sr: 1, st: 0, op: 600.000024438501, ip: 0, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [0, 0, 0], ix: 1 }, s: { a: 0, k: [146.132, 146.132, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [350, 350, 0], ix: 2 }, r: { a: 0, k: 0, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 0, k: 100, ix: 11 }, }, shapes: [ { ty: "gr", bm: 0, hd: false, mn: "ADBE Vector Group", nm: "Ellipse 1", ix: 1, cix: 2, np: 3, it: [ { ty: "el", bm: 0, hd: false, mn: "ADBE Vector Shape - Ellipse", nm: "Ellipse Path 1", d: 1, p: { a: 0, k: [0, 0], ix: 3 }, s: { a: 0, k: [142, 142], ix: 2 }, }, { ty: "st", bm: 0, hd: false, mn: "ADBE Vector Graphic - Stroke", nm: "Stroke 1", lc: 1, lj: 1, ml: 4, o: { a: 0, k: 0, ix: 4 }, w: { a: 0, k: 3, ix: 5 }, c: { a: 0, k: [0.5373, 0.3216, 1], ix: 3 }, }, { ty: "gf", bm: 0, hd: false, mn: "ADBE Vector Graphic - G-Fill", nm: "Gradient Fill 1", e: { a: 0, k: [60.839, 0], ix: 6 }, g: { p: 3, k: { a: 0, k: [ 0, 0.8588235294117647, 0.8588235294117647, 0.8588235294117647, 0.487, 0.7294117647058823, 0.6078431372549019, 0.9882352941176471, 0.998, 1, 1, 1, 0, 0.44, 0.5, 0.22, 1, 0, ], ix: 9, }, }, t: 2, a: { a: 0, k: 0, ix: 8 }, h: { a: 0, k: 0, ix: 7 }, s: { a: 0, k: [0, 0], ix: 5 }, r: 1, o: { a: 0, k: 100, ix: 10 }, }, { ty: "tr", a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [181.304, 181.304], ix: 3 }, sk: { a: 0, k: 0, ix: 4 }, p: { a: 0, k: [0, -3], ix: 2 }, r: { a: 0, k: 0, ix: 6 }, sa: { a: 0, k: 0, ix: 5 }, o: { a: 0, k: 100, ix: 7 }, }, ], }, ], ind: 6, }, { ty: 4, nm: "Shape Layer 5", sr: 1, st: 0, op: 600.000024438501, ip: 0, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [0, 0, 0], ix: 1 }, s: { a: 0, k: [124.841, 124.841, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [350, 458, 0], ix: 2 }, r: { a: 0, k: 180, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 0, k: 10, ix: 11 }, }, shapes: [ { ty: "gr", bm: 0, hd: false, mn: "ADBE Vector Group", nm: "Shape 2", ix: 1, cix: 2, np: 3, it: [ { ty: "sh", bm: 0, hd: false, mn: "ADBE Vector Shape - Group", nm: "Path 1", ix: 1, d: 1, ks: { a: 0, k: { c: true, i: [ [0, 0], [-36.43, 1.19], [0, 0], [24.53, -18.36], ], o: [ [25.85, -22.17], [0, 0], [-32.74, 1.05], [0, 0], ], v: [ [-100.64, -30.635], [-5.11, -67.775], [-5.11, 37.125], [-92.55, 67.775], ], }, ix: 2, }, }, { ty: "st", bm: 0, hd: false, mn: "ADBE Vector Graphic - Stroke", nm: "Stroke 1", lc: 1, lj: 1, ml: 4, o: { a: 0, k: 0, ix: 4 }, w: { a: 0, k: 3, ix: 5 }, c: { a: 0, k: [0.5373, 0.3216, 1], ix: 3 }, }, { ty: "gf", bm: 0, hd: false, mn: "ADBE Vector Graphic - G-Fill", nm: "Gradient Fill 1", e: { a: 0, k: [0, 105.643], ix: 6 }, g: { p: 3, k: { a: 0, k: [0, 1, 1, 1, 0.487, 1, 1, 1, 0.998, 1, 1, 1, 0, 1, 0.5, 0.5, 1, 0], ix: 9 }, }, t: 1, a: { a: 0, k: 0 }, h: { a: 0, k: 0 }, s: { a: 0, k: [-1, -118.622], ix: 5 }, r: 1, o: { a: 0, k: 100, ix: 10 }, }, { ty: "tr", a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, sk: { a: 0, k: 0, ix: 4 }, p: { a: 0, k: [0, 0], ix: 2 }, r: { a: 0, k: 0, ix: 6 }, sa: { a: 0, k: 0, ix: 5 }, o: { a: 0, k: 100, ix: 7 }, }, ], }, { ty: "gr", bm: 0, hd: false, mn: "ADBE Vector Group", nm: "Shape 1", ix: 2, cix: 2, np: 3, it: [ { ty: "sh", bm: 0, hd: false, mn: "ADBE Vector Shape - Group", nm: "Path 1", ix: 1, d: 1, ks: { a: 0, k: { c: true, i: [ [-25.85, -22.17], [0, 0], [32.74, 1.05], [0, 0], ], o: [ [0, 0], [-24.53, -18.36], [0, 0], [36.43, 1.19], ], v: [ [100.64, -30.635], [92.55, 67.775], [5.11, 37.125], [5.11, -67.775], ], }, ix: 2, }, }, { ty: "st", bm: 0, hd: false, mn: "ADBE Vector Graphic - Stroke", nm: "Stroke 1", lc: 1, lj: 1, ml: 4, o: { a: 0, k: 0, ix: 4 }, w: { a: 0, k: 3, ix: 5 }, c: { a: 0, k: [0.5373, 0.3216, 1], ix: 3 }, }, { ty: "gf", bm: 0, hd: false, mn: "ADBE Vector Graphic - G-Fill", nm: "Gradient Fill 1", e: { a: 0, k: [0, 105.643], ix: 6 }, g: { p: 3, k: { a: 0, k: [0, 1, 1, 1, 0.487, 1, 1, 1, 0.998, 1, 1, 1, 0, 1, 0.5, 0.5, 1, 0], ix: 9 }, }, t: 1, a: { a: 0, k: 0 }, h: { a: 0, k: 0 }, s: { a: 0, k: [-1, -118.622], ix: 5 }, r: 1, o: { a: 0, k: 100, ix: 10 }, }, { ty: "tr", a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, sk: { a: 0, k: 0, ix: 4 }, p: { a: 0, k: [0, 0], ix: 2 }, r: { a: 0, k: 0, ix: 6 }, sa: { a: 0, k: 0, ix: 5 }, o: { a: 0, k: 100, ix: 7 }, }, ], }, ], ind: 7, }, { ty: 4, nm: "Shape Layer 3", sr: 1, st: 0, op: 600.000024438501, ip: 0, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [0, 0, 0], ix: 1 }, s: { a: 0, k: [100, 100, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [343, 317, 0], ix: 2 }, r: { a: 0, k: 0, ix: 10 }, sa: { a: 0, k: 0 }, o: { a: 0, k: 100, ix: 11 }, }, shapes: [ { ty: "gr", bm: 0, hd: false, mn: "ADBE Vector Group", nm: "Ellipse 1", ix: 1, cix: 2, np: 3, it: [ { ty: "el", bm: 0, hd: false, mn: "ADBE Vector Shape - Ellipse", nm: "Ellipse Path 1", d: 1, p: { a: 0, k: [0, 0], ix: 3 }, s: { a: 0, k: [177, 116], ix: 2 }, }, { ty: "st", bm: 0, hd: false, mn: "ADBE Vector Graphic - Stroke", nm: "Stroke 1", lc: 1, lj: 1, ml: 4, o: { a: 0, k: 0, ix: 4 }, w: { a: 0, k: 3, ix: 5 }, c: { a: 0, k: [0.5373, 0.3216, 1], ix: 3 }, }, { ty: "gf", bm: 0, hd: false, mn: "ADBE Vector Graphic - G-Fill", nm: "Gradient Fill 1", e: { a: 0, k: [100, 0], ix: 6 }, g: { p: 3, k: { a: 0, k: [ 0.002, 0.9490196078431372, 0.9490196078431372, 0.9490196078431372, 0.488, 0.9803921568627451, 0.9803921568627451, 0.9803921568627451, 0.998, 1, 1, 1, 0, 1, 0.5, 0.5, 1, 0, ], ix: 9, }, }, t: 2, a: { a: 0, k: 0, ix: 8 }, h: { a: 0, k: 0, ix: 7 }, s: { a: 0, k: [-10, -146], ix: 5 }, r: 1, o: { a: 0, k: 100, ix: 10 }, }, { ty: "tr", a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, sk: { a: 0, k: 0, ix: 4 }, p: { a: 0, k: [7.5, -104], ix: 2 }, r: { a: 0, k: 0, ix: 6 }, sa: { a: 0, k: 0, ix: 5 }, o: { a: 0, k: 100, ix: 7 }, }, ], }, ], ind: 8, }, { ty: 4, nm: "Shape Layer 9", sr: 1, st: 0, op: 600.000024438501, ip: 0, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [0, 0, 0], ix: 1 }, s: { a: 0, k: [100, 100, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [350, 350, 0], ix: 2 }, r: { a: 1, k: [ { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [190], t: 0 }, { s: [550], t: 230.000009368092 }, ], ix: 10, }, sa: { a: 0, k: 0 }, o: { a: 0, k: 100, ix: 11 }, }, shapes: [ { ty: "gr", bm: 0, hd: false, mn: "ADBE Vector Group", nm: "Ellipse 1", ix: 1, cix: 2, np: 3, it: [ { ty: "el", bm: 0, hd: false, mn: "ADBE Vector Shape - Ellipse", nm: "Ellipse Path 1", d: 1, p: { a: 0, k: [0, 0], ix: 3 }, s: { a: 0, k: [400, 400], ix: 2 }, }, { ty: "st", bm: 0, hd: false, mn: "ADBE Vector Graphic - Stroke", nm: "Stroke 1", lc: 1, lj: 1, ml: 4, o: { a: 0, k: 0, ix: 4 }, w: { a: 0, k: 3, ix: 5 }, c: { a: 0, k: [0.5373, 0.3216, 1], ix: 3 }, }, { ty: "gf", bm: 0, hd: false, mn: "ADBE Vector Graphic - G-Fill", nm: "Gradient Fill 1", e: { a: 0, k: [29.602, -44.441], ix: 6 }, g: { p: 3, k: { a: 0, k: [ 0.002, 0.3176470588235294, 0, 1, 0.488, 0.3176470588235294, 0, 1, 0.998, 0.3176470588235294, 0, 1, 0, 1, 0.5, 0.5, 1, 0, ], ix: 9, }, }, t: 2, a: { a: 0, k: 0, ix: 8 }, h: { a: 0, k: 0, ix: 7 }, s: { a: 0, k: [-131.837, 65.407], ix: 5 }, r: 1, o: { a: 0, k: 100, ix: 10 }, }, { ty: "tr", a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, sk: { a: 0, k: 0, ix: 4 }, p: { a: 0, k: [1, -1], ix: 2 }, r: { a: 0, k: 0, ix: 6 }, sa: { a: 0, k: 0, ix: 5 }, o: { a: 0, k: 100, ix: 7 }, }, ], }, ], ind: 9, }, { ty: 4, nm: "Shape Layer 2", sr: 1, st: 0, op: 600.000024438501, ip: 0, hd: false, ddd: 0, bm: 0, hasMask: false, ao: 0, ks: { a: { a: 0, k: [0, 0, 0], ix: 1 }, s: { a: 0, k: [100, 100, 100], ix: 6 }, sk: { a: 0, k: 0 }, p: { a: 0, k: [350, 350, 0], ix: 2 }, r: { a: 1, k: [ { o: { x: 0.167, y: 0.167 }, i: { x: 0.833, y: 0.833 }, s: [190], t: 0 }, { s: [1270], t: 230.000009368092 }, ], ix: 10, }, sa: { a: 0, k: 0 }, o: { a: 0, k: 100, ix: 11 }, }, shapes: [ { ty: "gr", bm: 0, hd: false, mn: "ADBE Vector Group", nm: "Ellipse 1", ix: 1, cix: 2, np: 3, it: [ { ty: "el", bm: 0, hd: false, mn: "ADBE Vector Shape - Ellipse", nm: "Ellipse Path 1", d: 1, p: { a: 0, k: [0, 0], ix: 3 }, s: { a: 0, k: [400, 400], ix: 2 }, }, { ty: "st", bm: 0, hd: false, mn: "ADBE Vector Graphic - Stroke", nm: "Stroke 1", lc: 1, lj: 1, ml: 4, o: { a: 0, k: 0, ix: 4 }, w: { a: 0, k: 3, ix: 5 }, c: { a: 0, k: [0.5373, 0.3216, 1], ix: 3 }, }, { ty: "gf", bm: 0, hd: false, mn: "ADBE Vector Graphic - G-Fill", nm: "Gradient Fill 1", e: { a: 0, k: [-48.365, -83.495], ix: 6 }, g: { p: 3, k: { a: 0, k: [ 0.002, 0, 0.7137254901960784, 0.996078431372549, 0.488, 0.4823529411764706, 0.27450980392156865, 0.9254901960784314, 0.998, 0.3176470588235294, 0, 1, 0, 1, 0.5, 0.5, 1, 0, ], ix: 9, }, }, t: 1, a: { a: 0, k: 0 }, h: { a: 0, k: 0 }, s: { a: 0, k: [-134.449, -317.964], ix: 5 }, r: 1, o: { a: 0, k: 100, ix: 10 }, }, { ty: "tr", a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, sk: { a: 0, k: 0, ix: 4 }, p: { a: 0, k: [1, -1], ix: 2 }, r: { a: 0, k: 0, ix: 6 }, sa: { a: 0, k: 0, ix: 5 }, o: { a: 0, k: 100, ix: 7 }, }, ], }, ], ind: 10, }, ], }, ], } return (

{/* Wave Animation - Behind the bubble when in listening mode */} {currentState === "listening" && ( )} {/* Lottie Animation Bubble */}

{/* Avatar Container - This stays fixed within the bubble */}

{(currentState === "idle" || currentState === "speaking") && ( Mira virtual assistant

)}

{/* State indicator and demo toggle */}

Current state: {currentState}

) }