FoxUI Pro
212 komponent, 8 mavzu va MCP orqali AI agent — bitta obunada.
BatafsilKörsatiş · primitive
3D egiliş karta
Kursorga qarab karta perspektivada egiladi (Aceternity 3D Card Effect, Comet Card): kursor turgan tomon pastga botadi, içidagi [data-depth] qismlar (1, 2, 3) turli masofaga oldinga çiqadi — qatlamli çuqurlik hissi. data-fx-tilt="glare" — kursor ortidan yumşoq yaltiraş; data-max — eng katta burçak (standart 10°). Çiqişda karta prujina bilan tekislanadi. Faqat siçqonçada işlaydi: barmoq va klaviaturada karta tekis, hamma kontent öz joyida. Harakat kamaytirilsa, calm yoki none rejimda egilmaydi.
Sovğa kartasi
500 000 söm
Boğ kafe · 2026-yil oxirigaça
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-fx-tilt | plain faqat egiliş (atribut qiymatsiz)glare + yaltiraş | plain |
data-depth | 123 | 1 |
Anatomiya
- root
[data-fx-tilt]şart - layer
[data-depth]ixtiyoriy
Holatlar
tilting
Klaviatura va kiriş
Faqat bezak: DOM, fokus tartibi va matn özgarmaydi; karta içidagi havola va tugmalar odatdagidek bosiladi. Barmoq, qalam va klaviaturada egiliş yöq. prefers-reduced-motion, data-fx-motion="calm" va "none"da öçiq; forced-colors'da tekis.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Landing sahifadagi mahsulot yoki tarif kartasi — «qölga olib köriş» hissi.
- Sovğa kartasi, sertifikat, çipta körinişi.
npx foxui add tilt
<div style="display:flex;flex-wrap:wrap;gap:var(--fx-space-6);padding:var(--fx-space-6)">
<article class="fx-card" data-fx-tilt style="inline-size:18rem">
<span class="fx-badge" data-tone="brand" data-depth style="justify-self:start">Yangi</span>
<h3 class="fx-card__title" data-depth="2">FoxUI Pro</h3>
<p class="fx-card__text" data-depth>212 komponent, 8 mavzu va MCP orqali AI agent — bitta obunada.</p>
<div data-depth="3" style="block-size:8rem;border-radius:var(--fx-radius-control);background:linear-gradient(135deg, var(--fx-bg-category-blue), var(--fx-bg-category-purple))"></div>
<a class="fx-btn" data-variant="primary" href="#" data-depth="2" style="justify-self:start">Batafsil</a>
</article>
<article class="fx-card" data-fx-tilt="glare" data-max="14" style="inline-size:18rem;background:linear-gradient(160deg, var(--fx-bg-category-coral), var(--fx-bg-category-pink));color:var(--fx-text-on-category)">
<p class="fx-card__text" data-depth style="color:inherit">Sovğa kartasi</p>
<h3 class="fx-card__title" data-depth="3" style="font-size:var(--fx-font-size-display-sm);color:inherit">500 000 söm</h3>
<p class="fx-card__text" data-depth="2" style="color:inherit">Boğ kafe · 2026-yil oxirigaça</p>
</article>
</div>Tokenlar: --fx-bg-static-light --fx-ease-spring --fx-ease-standard --fx-motion-base --fx-motion-fast --fx-motion-slow --fx-motion-slower --fx-shadow-lg --fx-space-12 --fx-space-4 --fx-space-8 --fx-tilt-gx --fx-tilt-gy --fx-tilt-x --fx-tilt-y
Ş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.