Körsatiş · primitive
Matn effektlari
Hero va bölim sarlavhalari uçun törtta matn effekti (data-effect): «type» — yozuv maşinkasi, harfma-harf yoziladi va kursor miltillaydi (data-words bilan bir neçta ibora navbat bilan yoziladi); «rotate» — sarlavhadagi bitta söz navbat bilan almaşadi (pastdan blur bilan çiqadi, eng uzun söz eni saqlanadi — matn sakramaydi); «split» — sözlar (data-by="çar" — harflar) körinişga kirganda poğonali blur-fade bilan çiqadi; «mark» — söz ostiga marker çizilib boradi (data-variant="underline" — pastki çiziq). Ekran öquvçi töliq matnni darhol oladi; JS bölmasa yoki harakat kamaytirilsa — oddiy töliq matn. 5-tölqin: «shine» — matn ustidan nur ötadi (data-tone="brand" — brend rangida); «gradient» — mavzu ranglaridan gradient bilan böyalgan sarlavha (data-flow — sekin oqadi, data-color="warm" — iliq ranglar); «scramble» — harflar tasodifiy belgilardan asl matnga yeçiladi (körinişga kirganda; data-trigger="hover" — kursor yoki fokusda qayta, data-mono — monoşrift); «morph» — bir söz ikkinçisiga blur orqali eriydi (rotate kabi .fx-textfx__word sözlari, siljişsiz). Shine va oqadigan gradient faqat körinişda harakatlanadi.
Saytingiz tezroqçiroyliroqözbekça böladi
Dizayn tizimi — bir marta quriladi, hamma joyda işlaydi
Komponentlar Figma'siz, töğridan-töğri kodda keladi va bitta buyruq bilan yangilanadi.
AI javob tayyorlamoqda — mijozlar bazasi tahlil qilinmoqda…
Özbek tilidagi dizayn tizimi
Biz tezroqaniqroqçiroyliroq quramiz
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-effect | type yozuv maşinkasi (4.44)rotate söz aylanişi (4.45)split sözma-söz paydo böliş (4.46)mark marker (4.48)shine matn ustidan nur (4.47)gradient gradient matn (4.49)scramble aralaş harflar (4.50)morph morf matn (4.51) | type |
data-by | char split — harfma-harf | word |
data-variant | underline mark — pastki çiziq | fill |
data-color | pinkbluegreenwarm gradient — iliq ranglar | accent |
data-tone | inherit rotate — atrof rangi | brand |
data-align | center morph — sözlar markazda (alohida qatorda) | start |
Anatomiya
- root
.fx-textfxşart - word (rotate)
.fx-textfx__wordixtiyoriy - live (type, JS yaratadi)
.fx-textfx__liveixtiyoriy - caret (type, JS yaratadi)
.fx-textfx__caretixtiyoriy - part (split, JS yaratadi)
.fx-textfx__partixtiyoriy - scramble box
.fx-textfx__scrambleixtiyoriy - ghost
.fx-textfx__ghostixtiyoriy
Holatlar
Klaviatura va kiriş
type va rotate: töliq matn (yoki sözlar röyxati) .fx-sr-only içida, harakatlanuvçi qism aria-hidden — ekran öquvçi özgarişlarni har safar öqimaydi. split: sözlar oddiy matn bölib qoladi; data-by="çar"da ildizga aria-label qöyiladi (sarlavha teglarida işlating). mark — <mark> tegi. prefers-reduced-motion va data-fx-motion="none"da effektlar öçadi; ekrandan çiqsa yoki tab yaşirin bölsa aylaniş töxtaydi. scramble: asl matn .fx-sr-only'da, aralaşuvçi qism aria-hidden. morph: rotate kabi — sözlar röyxati ekran öquvçida. gradient: ranglar matn rangiga aralaştirilgan — öqilişi saqlanadi; forced-colors'da oddiy matn.
Kod
AI uçun: qaçon işlatiladi
- Landing hero sarlavhasi: aylanuvçi söz yoki birinçi körinişda sözma-söz çiqiş.
- CLI yoki buyruqni körsatiş (type) — terminal oynasisiz.
- Abzatsdagi bitta asosiy fikrni marker bilan ajratiş.
- Buyruq va natijani ketma-ket körsatiş →
terminal - Oddiy sarlavha →
heading - AI javobi kutilmoqda (shimmer) →
thinking - Bir sahifada bir neçta aylanuvçi effekt qöymang — bitta urğu (hero sarlavhasi).
- Uzun matnni harfma-harf yozdirmang — 3–6 sözli ibora yoki buyruq.
- Muhim ma'lumotni (narx, sana) aylanuvçi sözga qöymang — öquvçi kutib turmaydi.
- Oddiy matnni ajratiş uçun mark'ni har qatorda işlatmang — abzatsda bitta.
- Gradient va shine'ni oddiy matn yoki tugma yozuviga qöymang — sarlavha va holat qatori uçun; bir ekranda bittadan.
npx foxui add textfx
<h2 class="fx-heading" data-size="display">Saytingiz <span class="fx-textfx" data-fx-textfx data-effect="rotate"><span class="fx-textfx__word">tezroq</span><span class="fx-textfx__word">çiroyliroq</span><span class="fx-textfx__word">özbekça</span></span> böladi</h2> <p class="fx-heading" data-size="h3"><span class="fx-textfx" data-fx-textfx data-effect="type" data-words="npx foxui init|npx foxui add pricing|npx foxui update"></span></p> <h2 class="fx-heading" data-size="h1"><span class="fx-textfx" data-fx-textfx data-effect="split">Dizayn tizimi — bir marta quriladi, hamma joyda işlaydi</span></h2> <p style="font-size:var(--fx-font-size-lg);max-inline-size:40rem">Komponentlar Figma'siz, <mark class="fx-textfx" data-fx-textfx data-effect="mark">töğridan-töğri kodda</mark> keladi va <mark class="fx-textfx" data-fx-textfx data-effect="mark" data-variant="underline" data-color="pink">bitta buyruq bilan</mark> yangilanadi.</p> <p style="font-size:var(--fx-font-size-lg)"><span class="fx-textfx" data-fx-textfx data-effect="shine">AI javob tayyorlamoqda — mijozlar bazasi tahlil qilinmoqda…</span></p> <h2 class="fx-heading" data-size="display"><span class="fx-textfx" data-fx-textfx data-effect="gradient" data-flow>Özbek tilidagi dizayn tizimi</span></h2> <p class="fx-heading" data-size="h3"><a class="fx-link" href="#"><span class="fx-textfx" data-fx-textfx data-effect="scramble" data-trigger="hover" data-mono>FOXUI 0.29 ÇIQDI</span></a></p> <h2 class="fx-heading" data-size="h1">Biz <span class="fx-textfx" data-fx-textfx data-effect="morph" data-interval="2600"><span class="fx-textfx__word">tezroq</span><span class="fx-textfx__word">aniqroq</span><span class="fx-textfx__word">çiroyliroq</span></span> quramiz</h2>
Tokenlar: --fx-bg-category-blue --fx-bg-category-coral --fx-bg-category-green --fx-bg-category-pink --fx-bg-category-yellow --fx-bg-surface --fx-border-width-focus --fx-duration-pulse --fx-duration-shimmer --fx-duration-stagger --fx-ease-emphasized --fx-ease-exit --fx-ease-standard --fx-font-adjust-mono --fx-font-family-mono --fx-knob-motion --fx-motion-exit-base --fx-motion-scale-enter --fx-motion-slow --fx-motion-slower --fx-radius-badge --fx-space-1 --fx-space-2 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-viz-accent