# 08 Reagáló karakterek és állapotvezérelt animáció | Astro Dizájn Elemek > Állapotvezérelt vizuális visszajelzés: 5-állapotú SVG márkafigura, vezetett folyamat-szimuláció, absztrakt állapotgép és Rive csatlakozófelület (3 élő változat + Rive-előkészítés). *Source: https://airanking.pro/autonom-weboldal/astro-dizajn-elemek/08-reagalo-karakter* --- [Autonóm Weboldal](/autonom-weboldal) / [✦ Astro Dizájn Elemek (12)](/autonom-weboldal/astro-dizajn-elemek) [← 07](/autonom-weboldal/astro-dizajn-elemek/07-felulet-es-oldalatmenet)[12](/autonom-weboldal/astro-dizajn-elemek)[09 →](/autonom-weboldal/astro-dizajn-elemek/09-rontgen-latas) [01Morphing](/autonom-weboldal/astro-dizajn-elemek/01-morphing)[02Kamera & Tér](/autonom-weboldal/astro-dizajn-elemek/02-kamera-es-ter)[03Anyagok & Fény](/autonom-weboldal/astro-dizajn-elemek/03-anyagok-es-feny)[04Tartalomfeltárás](/autonom-weboldal/astro-dizajn-elemek/04-tartalomfeltaras)[05Tipográfia](/autonom-weboldal/astro-dizajn-elemek/05-mozgo-tipografia)[06Termék 3D](/autonom-weboldal/astro-dizajn-elemek/06-terbeli-termek)[07UI & Átmenetek](/autonom-weboldal/astro-dizajn-elemek/07-felulet-es-oldalatmenet)[08Karakter & Állapot](/autonom-weboldal/astro-dizajn-elemek/08-reagalo-karakter)[09Röntgen-látás](/autonom-weboldal/astro-dizajn-elemek/09-rontgen-latas)[10Élő Kalkulátor](/autonom-weboldal/astro-dizajn-elemek/10-elo-adat-es-kalkulator)[11Bento & Tér](/autonom-weboldal/astro-dizajn-elemek/11-bento-es-gorgetesi-ter)[12Mikro-UI & Hang](/autonom-weboldal/astro-dizajn-elemek/12-magneses-mikrointerakciok) 08 / 12 · Élő Bemutató 2. lépcső · Canvas/JS Sziget AI Asszisztensek · Ügyfélkapuk · Onboarding felületek # Reagáló karakterek és állapotvezérelt illusztrációk Ötállapotú márkafigura, megszakítható folyamat-szimuláció, absztrakt folyamatábra-összehasonlítás és Rive állapotgép-csatlakozó. Aktuális állapot: **Nyugalom (Készenlét)** · Egérkövetés aktív ### A. Reagáló márkafigura Saját, világító geometrikus SVG karakter öt megkülönböztetett rendszerállapottal. Élő, interaktív visszajelzést ad a felhasználónak az AI asszisztens működéséről. Rendszerállapot: 1. Előkészítés 2. Feldolgozás 3. Eredmény #### Készenlétben Kattints a demó indítására egy szimulált auditfolyamat megtekintéséhez. Fázis: **0. Alapállapot** ### B. Vezetett vizsgálat szimulációja Többlépcsős interaktív folyamat: a látogató látja az előrehaladást (előkészítés → elemzés → hitelesítés). Csökkenti a bizonytalanságot a háttérben futó számítások alatt. Gépállapot: **1. Készenlét (Lassú keringés)** ### C. Állapotvezérelt gépillusztráció Absztrakt fogaskerekes gépezet három sebességfokozattal. Szemlélteti, hogyan gyorsulnak fel az integrált rendszerek a háttérműveletek során. RIVE RUNTIME SPECIFICATION & ADAPTER .RIV READY #### Rive Állapotgép Bemeneti Panel (Inspector) Ez a dokumentált csatlakozási felület előkészíti a projektet külső `.riv` animációs assetek és a hivatalos `@rive-app/canvas` runtime későbbi 0-bájtos bekötésére. State Machine: "Aura_Main_FSM" Boolean Input: isListening = true Number Input: thinkingProgress = 84.0 Trigger Input: onAnalysisSuccess() Integráció: **Rive runtime előkészítve (3 natív élő változat mellett)** ### D. Rive állapotgép-csatlakozó felület Ha a megrendelő vektorgrafikus karakteranimációt (Rive) szeretne, ez a szabványos vezérlőhíd garantálja, hogy a böngészős események (kattintás, beszéd, kurzorkövetés) közvetlenül átadódjanak az animációnak. Jelölés: „3 élő változat + Rive-előkészítés”. A korábbi 3 fül 100%-ban működő natív kód; ez a felület a jövőbeli .riv csatolmányok dokkja. TÁRGYALÁSI DEMÓ Összehasonlítás: Statikus robotkép vs. Élő Reagáló AI Asszisztens AIRanking.pro ## Emberi közvetlenség & Interaktív AI asszisztens A látogató nem egy rideg adatbázissal vagy űrlappal találkozik, hanem egy élő márkafigurával, amely figyel a válaszaira, elkíséri a folyamaton és megerősíti a sikeres konverziót. [Fő demók megtekintése (01, 03, 06) →](/autonom-weboldal/astro-dizajn-elemek/01-morphing) 🤖 Hagyományos sablon chatbot ikon Statikus kép. Nincs pislogás, nincs reakció a műveletekre, nincs élmény. Aktív figyelem... 👆 5 valós állapotban működő interaktív karakter ⚙️ **Hogyan működik? & Technikai adatok** 1. Szint · Statikus CSS/SVG (3 élő változat + Rive-előkészítés) Grafikai motor **SVG Path manipuláció, requestAnimationFrame szemkövetés és Rive runtime interfész** Eszköz DPR korlát **Math.min(DPR, 2)** Életciklus védelem **Rejtett lapon automatikusan leáll** Hozzáférhetőség **prefers-reduced-motion támogatott** 3 teljes értékű élő natív változat (A, B, C) SVG Bézier koordináta-vezérléssel és állapotgéppel. A D változat a jövőbeli Rive (.riv bináris WebGL) csatlakozási felületét definiálja eseménykezelőkkel és runtime állapot-átadással. Becsült ráta: **--** FPS (Helyi mérés, eszközfüggő) ✦ Ügyfél-Márka Stúdió ## Személyre Szabás Tárgyaláshoz Márkapreset kiválasztása: Cégnév / Márkanév: Rövid ajánlat / Főcím: CTA Gomb felirat: Márkaszínek: Főszín (Elsődleges): Akcentszín (Másodlagos): Ügyfél Logó feltöltése (PNG, SVG, WebP · max 8 MB): 📁 Húzd ide a logófájlt, vagy **kattints a tallózáshoz** Transzparens PNG vagy tiszta SVG ajánlott Logó-kontraszt párna (fehér/sötét logókhoz): Termék- vagy Referenciakép (max 8 MB): 🖼️ Húzd ide a referenciaképet vagy termékfotót Használható a 01, 03, 04, 06, 07 és 11 modulokban Másodlagos / „Előtte” Képfeltöltés (pl. összehasonlításhoz · max 8 MB): 🖼️ Húzd ide az „Előtte” képet vagy másodlagos referenciát Használható a 03 és 04 modulokban az összehasonlító és folyékony átmenetekhez **Színek javaslata a feltöltött képből:** Kiolvastuk a domináns márkaszíneket a grafikából. **Megjegyzés ezen az eszközön** Alapértelmezésben a beállítások csak a jelenlegi böngészőlap bezárásáig élnek. 🔒 **100% Helyi adatvédelem:** A kiválasztott fájlok és márkanevek feldolgozása helyben, ebben a böngészőben történik; a bemutatóterem nem tölti fel őket szerverre és nem küldi analitikának. TÁRGYALÁSI KONCEPCIÓ ## Kiválasztott Elemek 0 db ☆ ### Még nincs kiválasztott dizájnelem Bármelyik modulban kattints a **„☆ Hozzáadás a koncepcióhoz”** gombra a kedvenc megoldások és beállított csúszkaértékek elmentéséhez! 🔒 Helyi exportálás: a fájlok nem mennek szerverre vagy CRM-be. ⛶ MOZIMÓD Élő Színpad