Körsatiş · primitive
Fon: naqş va effektlar
Hero, böş holat va CTA bloklari orqasidagi bezak fon (4.61): nuqtalar, katak yoki qiya çiziqlar — faqat CSS gradient va mask, rasm faylisiz. Çetga qarab yumşoq sönadi (data-fade: markaz — standart, tepa, past, yöq), data-glow bilan tepadan mavzu rangidagi yumşoq nur qöşiladi. Rang matn rangidan aralaştiriladi — yoruğ va qoronği rejimda, har mavzuda özi moslaşadi. Ota blok position: relative boʻlishi kifoya: fon butun maydonni egallaydi, bosilmaydi va matn ostida qoladi. 5-toʻlqin — fon effektlari: don teksturasi (data-texture="noise", 4.62), avrora — mavzu ranglaridan sekin oqadigan doğlar (data-fx="aurora", 4.63), retro perspektiv tör (data-fx="retro-grid", 4.64), meteorlar (data-fx="meteors", 4.65), tepadan tuşuvçi nur (data-fx="rays", 4.67), miltillovçi tör — canvas, data-interactive bilan kursor yonida yonadi (data-fx="flicker", 4.68) va markazdan tarqaluvçi halqalar (data-fx="ripple", 4.69). Harakatli effektlar foxui.js (data-fx-bg) bilan faqat körinişda harakatlanadi; JS yöq, harakat kamaytirilgan yoki data-fx-motion="calm|none" — statik kadr.
Nuqtalar
Katak + nur
Çiziqlar
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-pattern | dots nuqtalargrid kataklines qiya çiziqlar | none |
data-size | sm 16lg 48 | md |
data-fade | top tepada körinadibottom pastda körinadinone sönmaydi | center |
data-tone | strongbrand | subtle |
data-on | brand brend rangli blok içida | surface |
data-glow | on tepadan mavzu nuri | off |
data-texture | noise don teksturasi (4.62); tone="strong" — kuçliroq | none |
data-fx | aurora avrora doğlari (4.63)retro-grid perspektiv tör (4.64)meteors uçar yulduzlar (4.65), data-countrays tepadan nur (4.67)flicker miltillovçi kataklar, canvas (4.68)ripple konsentrik halqalar (4.69) | none |
data-interactive | on flicker: kursor yonidagi kataklar yonadi | off |
data-count | N meteors soni (≤ 30) | 8 |
Anatomiya
- root
.fx-bgşart - meteor
.fx-bg__meteorixtiyoriy - canvas
.fx-bg__canvasixtiyoriy
Holatlar
inview
Klaviatura va kiriş
Bezak: aria-hidden="true", pointer-events yöq — fokus va bosişga ta'sir qilmaydi. Harakatli effektlar faqat körinişda harakatlanadi; prefers-reduced-motion va data-fx-motion="calm|none" da statik kadr; miltillaş sekin va past kontrastli (yoruğlik sakraşi yöq, WCAG 2.3.1). forced-colors'da körinmaydi.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Landing hero orqasi — sahifa tekis va böş körinmasin.
- Böş holat, 404 yoki CTA bloki ortida yengil tekstura.
- Landing hero, işga tuşiriş, «yangi tarif» bannerida harakatli fon (avrora, nur, meteor) — bitta urğu sifatida.
- Integratsiya yoki bot ulangan holat ortida halqa tölqinlari (ripple).
Işlatmang
- Kontent kartasi foni →
card - Rasm yoki illyustratsiya →
image - Kursorga ta'sirlanuvçi zarraçalar →
particles - Ikki element orasidagi oqim çiziği →
beam - Naqşni matn ustida kuçli qilmang — öqilişi buzilmasin (tone="strong" faqat böş maydonda).
- Bitta sahifada har bölimga naqş qöymang — hero va yakuniy CTA yetarli.
- Fonni ma'no uçun işlatmang — u faqat bezak (aria-hidden).
- Bitta sahifada bittadan ortiq harakatli fon qöymang — hero yetarli; matn ostida harakat öqişni qiyinlaştiradi.
- Harakatli fonni ma'lumot kartalari, jadval yoki forma orqasiga qöymang.
npx foxui add bg
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--fx-space-4)"> <div style="position:relative;isolation:isolate;display:grid;place-items:center;min-block-size:14rem;border:var(--fx-border-width-default) solid var(--fx-border-color-default);border-radius:var(--fx-radius-surface)"><div class="fx-bg" data-pattern="dots" aria-hidden="true"></div><strong>Nuqtalar</strong></div> <div style="position:relative;isolation:isolate;display:grid;place-items:center;min-block-size:14rem;border:var(--fx-border-width-default) solid var(--fx-border-color-default);border-radius:var(--fx-radius-surface)"><div class="fx-bg" data-pattern="grid" data-glow aria-hidden="true"></div><strong>Katak + nur</strong></div> <div style="position:relative;isolation:isolate;display:grid;place-items:center;min-block-size:14rem;border:var(--fx-border-width-default) solid var(--fx-border-color-default);border-radius:var(--fx-radius-surface)"><div class="fx-bg" data-pattern="lines" data-fade="bottom" aria-hidden="true"></div><strong>Çiziqlar</strong></div> </div> <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--fx-space-4);margin-block-start:var(--fx-space-4)"> <div style="position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;align-content:center;gap:var(--fx-space-1);min-block-size:14rem;padding:var(--fx-space-6);border:var(--fx-border-width-default) solid var(--fx-border-color-default);border-radius:var(--fx-radius-surface);text-align:center"><div class="fx-bg" data-texture="noise" data-glow aria-hidden="true"></div><strong>Don + nur</strong><span style="color:var(--fx-text-secondary);font-size:var(--fx-font-size-sm)">Tekis gradient «jonlanadi»</span></div> <div style="position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;align-content:center;gap:var(--fx-space-1);min-block-size:14rem;padding:var(--fx-space-6);border:var(--fx-border-width-default) solid var(--fx-border-color-default);border-radius:var(--fx-radius-surface);text-align:center"><div class="fx-bg" data-fx="aurora" data-texture="noise" data-fx-bg aria-hidden="true"></div><strong>Avrora</strong><span style="color:var(--fx-text-secondary);font-size:var(--fx-font-size-sm)">Yangi tarif — 1-noyabrdan</span></div> <div style="position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;align-content:center;gap:var(--fx-space-1);min-block-size:14rem;padding:var(--fx-space-6);border:var(--fx-border-width-default) solid var(--fx-border-color-default);border-radius:var(--fx-radius-surface);text-align:center"><div class="fx-bg" data-fx="retro-grid" data-tone="brand" data-fx-bg aria-hidden="true"></div><strong>Retro tör</strong><span style="color:var(--fx-text-secondary);font-size:var(--fx-font-size-sm)">Hackathon 2026 · Toşkent</span></div> <div style="position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;align-content:center;gap:var(--fx-space-1);min-block-size:14rem;padding:var(--fx-space-6);border:var(--fx-border-width-default) solid var(--fx-border-color-default);border-radius:var(--fx-radius-surface);text-align:center"><div class="fx-bg" data-fx="meteors" data-count="10" data-fx-bg aria-hidden="true"></div><strong>Meteorlar</strong><span style="color:var(--fx-text-secondary);font-size:var(--fx-font-size-sm)">Işga tuşiriş kuni</span></div> <div style="position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;align-content:center;gap:var(--fx-space-1);min-block-size:14rem;padding:var(--fx-space-6);border:var(--fx-border-width-default) solid var(--fx-border-color-default);border-radius:var(--fx-radius-surface);text-align:center"><div class="fx-bg" data-fx="rays" data-fx-bg aria-hidden="true"></div><strong>Nur</strong><span style="color:var(--fx-text-secondary);font-size:var(--fx-font-size-sm)">FoxUI 1.0 çiqdi</span></div> <div style="position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;align-content:center;gap:var(--fx-space-1);min-block-size:14rem;padding:var(--fx-space-6);border:var(--fx-border-width-default) solid var(--fx-border-color-default);border-radius:var(--fx-radius-surface);text-align:center"><div class="fx-bg" data-fx="flicker" data-interactive data-size="sm" data-fx-bg aria-hidden="true"></div><strong>Miltillovçi tör</strong><span style="color:var(--fx-text-secondary);font-size:var(--fx-font-size-sm)">Kursorni olib keling</span></div> <div style="position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;align-content:center;gap:var(--fx-space-1);min-block-size:14rem;padding:var(--fx-space-6);border:var(--fx-border-width-default) solid var(--fx-border-color-default);border-radius:var(--fx-radius-surface);text-align:center"><div class="fx-bg" data-fx="ripple" data-fade="none" data-fx-bg aria-hidden="true"></div><span class="fx-avatar" data-size="lg" data-color="blue" role="img" aria-label="Telegram bot">TB</span><strong>Halqalar</strong><span style="color:var(--fx-text-secondary);font-size:var(--fx-font-size-sm)">Bot ulandi</span></div> </div>
Tokenlar: --fx-bg-brand-solid --fx-bg-category-blue --fx-bg-category-pink --fx-border-width-default --fx-border-width-focus --fx-duration-pulse --fx-ease-exit --fx-ease-standard --fx-radius-circle --fx-radius-pill --fx-space-1 --fx-space-12 --fx-space-4 --fx-space-6 --fx-text-on-brand --fx-text-primary --fx-viz-accent
Ş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.