Körsatiş · primitive
Zarraçalar
Hero yoki CTA bloki ortidagi canvas qatlam (4.66): sekin suzuvçi nuqtalar, kursor yaqinida itariladi; data-links bilan yaqin nuqtalar ingiçka çiziq bilan boğlanadi («tarmoq», integratsiya mavzusi). Ota blok position: relative boʻlsa, butun maydonni egallaydi, bosilmaydi va matn ostida qoladi. Rang mavzudan (matn yoki brend rangi) — yorugʻ va qorongʻida oʻzi moslashadi. Koʻrinmasa chizmaydi; harakat kamaytirilganda statik kadr.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-tone | brandstrong | subtle |
data-on | brand brend rangli blok içida | surface |
data-links | on yaqin nuqtalar çiziq bilan | off |
data-fade | on çetlarga sönadi | off |
data-count | N nuqtalar soni (≤ 220) | auto |
Anatomiya
- root
.fx-particlesşart - canvas
.fx-particles__canvasixtiyoriy
Klaviatura va kiriş
Bezak: aria-hidden="true", pointer-events yöq. Körinmasa va tab yaşirin bölsa çizmaydi; prefers-reduced-motion va data-fx-motion="calm|none" — bitta statik kadr. forced-colors'da yaşiriladi.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Landing hero, «integratsiyalar» yoki CTA bloki ortida jonli, lekin tinç fon.
- Brend rangli banner içida (data-on="brand").
npx foxui add particles
<section style="position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;align-content:center;gap:var(--fx-space-3);min-block-size:20rem;padding:var(--fx-space-8);border:var(--fx-border-width-default) solid var(--fx-border-color-default);border-radius:var(--fx-radius-surface);text-align:center"> <div class="fx-particles" data-fx-particles data-links data-fade aria-hidden="true"></div> <span class="fx-badge" data-color="blue">Integratsiyalar</span> <h2 style="margin:0;font-size:var(--fx-font-size-2xl)">CRM, Telegram va 1C — bitta oqimda</h2> <p style="margin:0;color:var(--fx-text-secondary)">Arizalar sayt, bot va dökondan avtomatik tuşadi.</p> <a class="fx-btn" data-variant="primary" href="#">Ulaşni boşlaş</a> </section> <section style="position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;min-block-size:12rem;margin-block-start:var(--fx-space-4);border-radius:var(--fx-radius-surface);background:var(--fx-bg-brand-solid);color:var(--fx-text-on-brand)"> <div class="fx-particles" data-fx-particles data-on="brand" data-count="60" aria-hidden="true"></div> <strong style="font-size:var(--fx-font-size-xl)">Obuna — 1-noyabrdan</strong> </section>
Tokenlar: --fx-bg-brand-solid --fx-text-on-brand --fx-text-primary
Şu toifadan
Nişon kartasiYutuq nişoni: belgi (emoji yoki ikon) + nom + sabab.BiriktirmaFayl yoki rasm kartoçkasi: belgi (tur) yoki rasm, nom, hajm, olib taşlaş ×, yuklaniş çiziği.Audio pleyerIxçam audio pleyer: ijro tugmasi, sarlavha, tölqinsimon progress (bosib yoki ← → bilan suriladi), vaqt va tezlik (1× · 1,5× · 2×).AvatarKvadrat avatar: ikki harf yoki surat, 6 toifa rangi, 3 ölçam (sm 22 · md 36 · lg 56), ixtiyoriy holat nuqtasi (active — puls, waiting, stopped, idle).Belgi (badge)Holat yoki toifa yorliği.Boğlovçi nurIntegratsiya va ma'lumot oqimi sxemasi (4.70): tugunlar (logo yoki ikon) orasida yumşoq egri çiziq, ustidan yuguruvçi nur yönalişni körsatadi.