Körsatiş · primitive

Effektlar (spotlight, çegara nuri, yaltiraş, yönalişli hover)

Landing va «wow» sahifalar uçun ixtiyoriy effektlar qatlami: istalgan yuzaga (karta, bento katagi, narx kartasi) data-fx atributi bilan qöşiladi. «spotlight» — kursorni kuzatuvçi yumşoq nur: kartaning çegarasi va foni kursor ostida yonadi; data-fx-effects konteyner içida kursor yaqinidagi qöşni kartalar çegarasi ham yonadi (Linear, Magic UI uslubi). «beam» — çegara böylab aylanib yuruvçi nur, «tavsiya» yoki «yangi» urğusi uçun; data-fx-glow bilan taşqi yumşoq nur. Ranglar mavzudan (brend yoki toifa rangi) — HEX yöq. Çeksiz aylaniş faqat ekranda körinib turganda; harakat kamaytirilsa, calm yoki none rejimda — nur statik turadi. «glare» (4.54) — hover yoki klaviatura fokusida karta ustidan bitta diagonal yaltiraş ötadi (::before işlatadi — beam data-fx-glow bilan birga qöyilmaydi). «direction» (4.55) — içidagi qoplama (.fx-effects__overlay) kursor kirgan tomondan sirpanib çiqadi va çiqqan tomonga ketadi; klaviatura fokusida pastdan çiqadi, hover yöq qurilmada qoplama doim pastda körinadi.

beta0.28.0 danyangilandi 0.29.0.fx-effectsCSS + JS

Tokenlar

Rang, oraliq va şrift — bitta manbadan. Mavzu almaşsa, butun sayt bir zumda yangilanadi.

Tavsiya

MCP orqali AI agent

Agent komponentlarni özi topadi, qoidalarni tekşiradi va xatosiz kod yozadi.

npx foxui update

Yangi versiya taklif bölib keladi — özgarişlarni körib, bitta buyruq bilan olasiz.

Variantlar

AtributQiymatlarStandart
data-fxspotlight kursorni kuzatuvçi nur
beam çegara böylab aylanuvçi nur
glare hover/fokusda diagonal yaltiraş
direction qoplama kursor tomonidan çiqadi		none
data-fx-colorblue
purple
pink
green		brand
data-fx-speedslow 6 puls
fast 2 puls		normal

Anatomiya

  1. spotlight (yuza)[data-fx~="spotlight"]ixtiyoriy
  2. beam (çegara nuri)[data-fx~="beam"]ixtiyoriy
  3. glow (taşqi nur)[data-fx-glow]ixtiyoriy
  4. glare (yaltiraş)[data-fx~="glare"]ixtiyoriy
  5. direction (yönalişli yuza)[data-fx~="direction"]ixtiyoriy
  6. overlay (qoplama).fx-effects__overlayixtiyoriy
  7. overlay title.fx-effects__titleixtiyoriy
  8. overlay meta.fx-effects__metaixtiyoriy

Holatlar

litpausedhoverinfrom

Klaviatura va kiriş

Effektlar faqat bezak: matn, tartib va fokus özgarmaydi. Barmoq bilan işlatilganda spotlight öçiq (hover yöq). prefers-reduced-motion, data-fx-motion="calm" va "none"da çegara nuri aylanmaydi; forced-colors'da tizim çegarasi qoladi. glare va direction klaviatura fokusida ham işlaydi (fokus = hover); direction qoplamasidagi matn DOM'da doim bor, hover yöq qurilmada körinib turadi; harakat kamaytirilsa qoplama sirpanmasdan paydo böladi.

Kod

AI uçun: qaçon işlatiladi
Işlating
  • Landing sahifadagi xususiyatlar töri, bento va narx kartalari — «tirik» sezilsin.
  • Bitta urğu: eng ommabop tarif, yangi funksiya kartasi, AI kiriş nuqtasi.
  • Portfolio/loyiha töri: rasm ustida nom va izoh kursor tomonidan çiqadi (direction); tarif kartasiga yaltiraş (glare).
Işlatmang
  • Oddiy ma'lumot kartasi, ilova içidagi panel → card
  • Yangilik yoki holatni bildiriş → badge
  • Effektni ilova (CRM, jadval, forma) içida işlatmang — bu landing va marketing qatlami.
  • Bitta ekranda bir neçta çegara nurini qöymang — urğu bitta bölsin (eng ommabop tarif yoki asosiy CTA).
  • Ma'noni faqat nur bilan bermang — «Tavsiya» belgisi söz bilan ham yozilsin.
  • Yönalişli qoplamaga muhim amalni yaşirmang — karta butuniça havola bölsin, qoplamada faqat nom va izoh.
npx foxui add effects
<div data-fx-effects style="display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--fx-space-4)">
  <article class="fx-card" data-fx="spotlight">
    <h3 class="fx-card__title">Tokenlar</h3>
    <p class="fx-card__text">Rang, oraliq va şrift — bitta manbadan. Mavzu almaşsa, butun sayt bir zumda yangilanadi.</p>
  </article>
  <article class="fx-card" data-fx="spotlight beam" data-fx-glow>
    <span class="fx-badge" data-tone="brand" style="justify-self:start">Tavsiya</span>
    <h3 class="fx-card__title">MCP orqali AI agent</h3>
    <p class="fx-card__text">Agent komponentlarni özi topadi, qoidalarni tekşiradi va xatosiz kod yozadi.</p>
  </article>
  <article class="fx-card" data-fx="spotlight" data-fx-color="blue">
    <h3 class="fx-card__title">npx foxui update</h3>
    <p class="fx-card__text">Yangi versiya taklif bölib keladi — özgarişlarni körib, bitta buyruq bilan olasiz.</p>
  </article>
</div>
<div data-fx-effects style="display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--fx-space-4);margin-block-start:var(--fx-space-6)">
  <a class="fx-card" href="#" data-fx="direction" style="padding:0;aspect-ratio:4/3;background:linear-gradient(150deg, var(--fx-bg-category-blue), var(--fx-bg-category-purple))"><span class="fx-effects__overlay"><span class="fx-effects__title">Samarqand Grand</span><span class="fx-effects__meta">Mehmonxona sayti · bron qiliş</span></span></a>
  <a class="fx-card" href="#" data-fx="direction" style="padding:0;aspect-ratio:4/3;background:linear-gradient(150deg, var(--fx-bg-category-green), var(--fx-bg-category-blue))"><span class="fx-effects__overlay"><span class="fx-effects__title">Tong maktabi</span><span class="fx-effects__meta">LMS · 1 200 öquvçi</span></span></a>
  <a class="fx-card" href="#" data-fx="direction" style="padding:0;aspect-ratio:4/3;background:linear-gradient(150deg, var(--fx-bg-category-coral), var(--fx-bg-category-yellow))"><span class="fx-effects__overlay"><span class="fx-effects__title">Zarafşon Tekstil</span><span class="fx-effects__meta">ERP · ombor va savdo</span></span></a>
</div>
<div data-fx-effects style="display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--fx-space-4);margin-block-start:var(--fx-space-6)">
  <a class="fx-card" href="#" data-fx="glare" style="text-decoration:none;color:inherit"><span class="fx-badge" data-tone="brand" style="justify-self:start">Pro</span><h3 class="fx-card__title">Yillik obuna</h3><p class="fx-card__text">2 oy bepul · barça yangilanişlar va MCP</p></a>
  <a class="fx-card" href="#" data-fx="glare spotlight" style="text-decoration:none;color:inherit"><h3 class="fx-card__title">Jamoa</h3><p class="fx-card__text">5 kişigaça · umumiy mavzu va tokenlar</p></a>
</div>

Tokenlar: --fx-beam-angle --fx-bg-brand-solid --fx-bg-category-blue --fx-bg-category-green --fx-bg-category-pink --fx-bg-category-purple --fx-bg-muted --fx-bg-overlay --fx-bg-static-light --fx-bg-surface --fx-border-color-surface --fx-border-width-default --fx-duration-pulse --fx-ease-emphasized --fx-ease-enter --fx-ease-standard --fx-font-size-lg --fx-font-size-sm --fx-font-weight-semibold --fx-motion-base --fx-motion-instant --fx-motion-slow --fx-motion-slower --fx-mx --fx-my --fx-space-1 --fx-space-10 --fx-space-12 --fx-space-4 --fx-space-5 --fx-spot --fx-spot-fill --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.
Libosni sozlangButun sayt şu zahoti kiyinadi

Libos

Premium liboslar — obunada: bepul 3 ta ustiga yana 13 ta. Bu yerda hammasini sinab körasiz. Narxlar

Brendlar ilhomida · 11

Faqat uslub ilhomi; belgilar — Simple Icons (CC0) va logobank.uz (Uzum), savdo belgilari egalariga tegişli.

Rejim
Qölda sozlaş — dasturçilar uçun

Rang

Şakl va çegara

Şrift juftligi

Qölda tanlaş

Qulaylik

Harakat
Ziçlik
Material (tajriba)