Körsatiş · primitive
Şar (orb)
AI yordamçining abstrakt «yuzi» — Siri şaridan ilhom: yuz, qöl, köz yöq, şuning uçun çizgi xatosi bölmaydi. Bitta rangdan (standart — brend, data-color — 6 toifa rangi, AI yordamçida — saytning brend rangi) töq yadro, uçta suzuvçi rang tölqini va şişasimon yaltiroq yasaladi. Holatlar: tinç (sekin nafas), öylayapti (tölqinlar tezlaşadi va içkariga buraladi), gapiryapti (urib turadi), menejerga ulaş (bir marta çaqnaydi). Içida Siri kabi ovoz tölqinlari — data-fx-orb bilan canvas lentalar (JS ~2 KB; JS bölmasa yoki harakat kamaytirilsa — gradient şar); AI yordamçida data-face="orb" bilan.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-color | coralpinkbluegreenyellowpurple | brand |
data-size | sm 22lg 56xl 112 | md |
data-state | thinking öylayapti — tölqinlar tezlaşaditalking gapiryapti — 4 marta urib turadihandoff menejerga ulaş — bir marta çaqnaydi | idle |
Anatomiya
- root
.fx-orbşart - wave
.fx-orb__waveşart - lines
.fx-orb__linesixtiyoriy
Holatlar
Klaviatura va kiriş
role="img" + aria-label (ism va holat). prefers-reduced-motion'da harakat töxtaydi, şar rangli doira bölib qoladi; forced-colors'da — tizim rangi.
Kod
AI uçun: qaçon işlatiladi
- AI yordamçi, ovozli yordamçi yoki «tirik» agentning belgisi — personaj çizilmagan joyda.
- Agent öylayotgani yoki javob berayotganini körsatiş.
npx foxui add orb
<span class="fx-orb" data-fx-orb data-size="xl" role="img" aria-label="Guli, tinç"><span class="fx-orb__wave"></span><span class="fx-orb__wave"></span><span class="fx-orb__wave"></span></span> <span class="fx-orb" data-fx-orb data-size="xl" data-state="thinking" role="img" aria-label="Guli öylayapti"><span class="fx-orb__wave"></span><span class="fx-orb__wave"></span><span class="fx-orb__wave"></span></span> <span class="fx-orb" data-fx-orb data-size="lg" data-color="coral" role="img" aria-label="Guli, koral rangda"><span class="fx-orb__wave"></span><span class="fx-orb__wave"></span><span class="fx-orb__wave"></span></span> <span class="fx-orb" data-fx-orb role="img" aria-label="Guli"><span class="fx-orb__wave"></span><span class="fx-orb__wave"></span><span class="fx-orb__wave"></span></span> <span class="fx-orb" data-fx-orb data-size="sm" role="img" aria-label="Guli"><span class="fx-orb__wave"></span><span class="fx-orb__wave"></span><span class="fx-orb__wave"></span></span>
Tokenlar: --fx-bg-brand-solid --fx-bg-category-blue --fx-bg-category-coral --fx-bg-category-green --fx-bg-category-pink --fx-bg-category-purple --fx-bg-category-yellow --fx-bg-static-light --fx-duration-pulse --fx-duration-slower --fx-ease-standard --fx-motion-slow --fx-radius-circle --fx-size-avatar-lg --fx-size-avatar-md --fx-size-avatar-sm