Harakat Katalogi
118 KOMPONENT

Veb harakat kutubxonasi · 118 ta jonli demo · 20 bo‘lim

Har bir effektning o'z nomi bor

"Scroll qilganda qimirlaydigan sayt" — bu o'nlab alohida texnikaning aralashmasi. Har birining aniq nomi, aniq mexanikasi va aniq kutubxonasi bor. Nomini bilsang — qidiruvga ham, AI ga ham to'g'ri so'z bilan aytasan. Bu yerda hammasi ishlab turadi: o'qib emas, o'ynab tushunasan.

Sahifa scroll: 0.000 Tashqi kutubxona: 0 Ustiga bosib, ichida scroll qilib, kursor yurgizib ko'r

Scroll bilan boshqariladigan

Hammasi bitta raqamdan boshlanadi: progress = scrollY / (scrollHeight − innerHeight). Qolgani shu 0→1 ni nimagadir ulash.

scroll progressPoydevor

Bu quti ichida scroll qil. O'ngdagi raqam — scroll holating, 0 dan 1 gacha.

Boshqa hamma texnika shu raqamning ustiga quriladi: uni video vaqtiga, burchakka, rangga yoki pozitsiyaga ulaysan.

Sahifaning eng tepasidagi ingichka chiziq ham aynan shu — lekin butun sahifa uchun.

0.000
↓ ichida scroll qil

Scroll holatini 0–1 oralig'idagi bitta songa aylantirish. Boshqa barcha scroll effekti shu sonning hosilasi.

QayerdaHar qanday scroll animatsiyaning birinchi qatori.

scrubGSAP ScrollTrigger
0.00
↓ oldinga va orqaga scroll qil

Animatsiya o'zi ijro etilmaydi — uning boshlang'ich kadri scroll'ga bog'lanadi. Orqaga scroll qilsang, animatsiya ham orqaga qaytadi.

QayerdaBiz qurgan NovaAI hero'sida video timeline'i aynan shunday "scrub" qilinadi.

pin / sticky sectionGSAP · CSS sticky
Yopishgan panel
Men joyimda qolaman. Matn mening ostimdan o'tib ketadi.

Bu matn o'tib ketmoqda…

…panel esa qimirlamayapti…

…mana shu pin deyiladi.

Pinlangan vaqt davomida ichkarida boshqa animatsiya ijro etiladi.

↓ ichida scroll qil

Element ekranda "yopishib" qoladi, sahifa esa scroll bo'lishda davom etadi. Shu to'xtab turgan vaqt — animatsiya uchun sahna.

QayerdaApple mahsulot sahifalari, deyarli har bir Awwwards sayti.

parallaxGSAP · CSS
3 qatlam · 0.25× / 0.55× / 1×

Qatlamlar bir xil scroll'ga turli tezlik bilan javob beradi. Orqadagi sekin, oldindagi tez — miya buni chuqurlik deb qabul qiladi.

QayerdaHero fonlari, rasm galereyalari. Eng eski va eng arzon "chuqurlik" hiylasi.

horizontal scrollGSAP ScrollTrigger
01
02
03
04
05
↓ vertikal scroll → → gorizontal harakat

Odatdagi vertikal scroll gorizontal siljishga aylantiriladi. Ichida pin + scrub ishlaydi — mustaqil texnika emas, ikkisining kombinatsiyasi.

QayerdaPortfolio galereyalari, "bizning ishlarimiz" bo'limlari.

sticky stacking cardsCSS sticky
CARD 01
CARD 02
CARD 03
↓ kartochkalar ustma-ust yig'iladi

Har bir kartochka position:sticky va har birida top biroz kattaroq — natijada ular kolodadek yig'iladi. Deyarli faqat CSS.

QayerdaNarx rejalari, xizmatlar ro'yxati, "bosqichlar" bo'limi.

reveal on enterIntersectionObserver
↓ pastga scroll qil

Scroll pozitsiyasiga emas, "element ekranga kirdimi?" degan savolga bog'langan. Bir marta ishlaydi, keyin o'chadi. Kutubxona kerak emas.

QayerdaSaytlardagi matn bloklarining 90 %i. Biz qurgan NovaAI'dagi barcha matnlar shu.

image sequence scrubbingCanvas
00 / 47
↓ scroll = kadr raqami

Video'ni currentTime bilan seek qilish sekin. Shuning uchun kadrlar oldindan rasm sifatida xotiraga olinadi va canvas'ga chiziladi — natija bir zumda.

QayerdaApple AirPods sahifasi shu bilan mashhur bo'lgan. Bizning NovaAI hero'si ham 90 kadrni shunday keshlaydi.

scroll velocity skewGSAP · Lenis
v 0
↓ TEZ scroll qil

Scroll pozitsiyasi emas — uning tezligi o'lchanadi va elementlarga siqilish/egilish beriladi. Tezlik pasaysa, o'zi joyiga qaytadi.

Qayerda"Suyuq", inertsiyali his beruvchi saytlar. Ozgina ishlatilsa zo'r, ko'p ishlatilsa boshni og'ritadi.

smooth scroll (Lenis)Eng ko'p ishlatiladigan
NATIVE — DARHOL
LENIS — LERP 0.09
0 → 0
quti ustida g'ildirakni aylantir — ikkalasi bir vaqtda

Lenis brauzerning haqiqiy scroll'ini o'chirmaydi — u ko'rsatilayotgan pozitsiyani lerp bilan orqada ushlab turadi. Chapda native (darhol), o'ngda aynan shu g'ildirak hodisasi silliqlangan holda. Butun kutubxonaning yadrosi — shu bitta formula.

QayerdaDeyarli har bir Awwwards sayti. npm i lenis → 3 qator. Muhim ogohlantirish: position:sticky va brauzer qidiruvi bilan ziddiyatga kirishi mumkin, shuning uchun har doim kerak emas.

direction-aware headerVanilla JS

Pastga scroll qil — sarlavha yashirinadi.

Yuqoriga qayt — darhol qaytadi.

Chunki foydalanuvchi yuqoriga scroll qilsa, demak u navigatsiyani qidiryapti.

HEADER
↓ pastga yashirinadi, ↑ yuqoriga qaytadi

Scroll yo'nalishi o'lchanadi, pozitsiyasi emas. Pastga — yashir, yuqoriga — ko'rsat. Ekran joyini bo'shatadi, lekin navigatsiya bir harakat narida qoladi.

QayerdaMobil saytlar, uzun maqolalar, hujjatlar.

scroll spyIntersectionObserver
↓ scroll qil

Navigatsiya hozir ekranda qaysi bo'lim turganini o'zi biladi. Har bo'limga observer qo'yiladi; ko'ringani "faol" bo'ladi. Scroll pozitsiyasini qo'lda hisoblashdan ancha ishonchli.

QayerdaHujjatlar, uzun landing sahifalar, mundarija.

scroll color transitionVanilla JS
—
↓ butun sahna rangi o'zgaradi

Bo'limlar orasida fon rangi sakramaydi, balki oraliq qiymatlar orqali oqib o'tadi. Ranglar RGB bo'yicha aralashtiriladi va scroll progressiga bog'lanadi.

QayerdaBir sahifali landinglar, mahsulot hikoyalari, portfoliolar.

Kursor va hover

Bular scroll'ga umuman bog'liq emas — pointermove hodisasiga bog'langan. Sayt "tirik" his qilishining yarmi shu yerdan.

custom cursorVanilla JS
kursorni quti ichiga olib kir

Haqiqiy kursor yashiriladi, o'rniga o'z elementing lerp bilan ergashadi. Hover'da o'lchamini o'zgartirish — "interaktiv" ekanini bildiruvchi signal.

QayerdaStudiya va portfolio saytlari. Mobil qurilmada o'chirib qo'yish shart.

magnetic elementVanilla · GSAP
kursorni tugma yoniga olib bor

Tugma ma'lum radius ichida kursorga qarab siljiydi. Kursor uzoqlashsa — joyiga qaytadi. Odatda translate + lerp.

QayerdaCTA tugmalari, navigatsiya linklari, logotiplar.

spotlight / mask revealCSS mask
Yashirin qatlam ostida
TOPDING
kursorni yurgiz

Ikki qatlam ustma-ust turadi, tepadagisi mask-image: radial-gradient() bilan faqat kursor atrofida ko'rinadi. JS faqat koordinata beradi.

Qayerda"Before / after" bloklari, yashirin xabarlar, interaktiv hero'lar.

3D tiltCSS perspective
TILT
kursorni kartochka ustida yurgiz

Kursor pozitsiyasi rotateX / rotateY ga aylantiriladi, ota-elementda perspective bo'ladi. Ozgina — 8–12 gradus yetadi.

QayerdaMahsulot kartochkalari, narx bloklari, SaaS saytlar.

blend-mode cursormix-blend-mode
INVERT
kursorni matn ustidan o'tkaz

Kursor doirasiga mix-blend-mode: difference beriladi — u ostidagi hamma narsani teskari rangga aylantiradi. Bitta xususiyat, hech qanday JS hisoblash yo'q, natija esa esda qoladi.

QayerdaStudiya saytlari, portfoliolar. Faqat qattiq ranglar ustida ishonchli — rasm ustida g'alati chiqishi mumkin.

spotlight cardCSS gradient
KURSORGA QARA
kursorni kartochka ustida yurgiz

Kartochka ostida radial gradient turadi, uning markazi kursorga bog'langan. Ustidagi qatlam 1px ichkarida — shuning uchun gradient faqat chekka bo'ylab ko'rinadi va yorug' ramka effekti chiqadi.

QayerdaSaaS narx jadvallari, xususiyat kartochkalari, dashboard panellari.

text roll on hoverCSS only
kursorni olib bor

Bir xil matnning ikki nusxasi overflow:hidden ichida ustma-ust turadi. Hover'da ikkalasi ham bir vaqtda yuqoriga suriladi — biri chiqib ketadi, ikkinchisi o'rniga keladi.

QayerdaNavigatsiya, tugmalar, portfolio ro'yxatlari. Nol JS.

Matn animatsiyasi

Matn — saytdagi eng ko'p uchraydigan element, shuning uchun uni animatsiya qilish eng katta ta'sir beradi.

split text + staggerGSAP SplitText

Matn harflarga (yoki so'z / qatorlarga) bo'linadi, har biriga ketma-ket kechikish beriladi. Bu kechikish stagger deyiladi.

QayerdaHero sarlavhalari. GSAP'ning SplitText plagini endi bepul.

masked line revealCSS overflow

Har bir qator overflow:hidden ichiga olinadi va pastdan suzib chiqadi. Shunchaki fade'dan ancha qimmatroq ko'rinadi.

QayerdaSarlavhalar, iqtiboslar, bo'lim ochilishlari.

text scrambleVanilla JS

Harflar avval tasodifiy belgilarga aylanadi, keyin chapdan o'ngga "hal bo'ladi". Texnologik, terminalga o'xshash his beradi.

QayerdaAI / kripto / kiberxavfsizlik saytlari, yuklanish holatlari.

variable font animationFaqat CSS/JS
HARAKAT
wdth 100 · wght 400
shrift o'qlari animatsiya qilinmoqda

Variable shriftlarning kenglik (wdth) va qalinlik (wght) o'qlari uzluksiz o'zgartiriladi. Rasm ham, SVG ham kerak emas — bu haqiqiy matn.

QayerdaTipografiyaga urg'u bergan saytlar. Bu sahifaning sarlavhalari ham shu shriftda (Archivo).

typewriterVanilla JS
yozadi, o'chiradi, keyingisiga o'tadi

Belgilar birma-bir qo'shiladi va o'chiriladi. Sir tezlikda: yozish sekin (~55 ms), o'chirish tez (~28 ms), gap oxirida uzoq pauza. Bir xil tezlik bo'lsa — robot kabi chiqadi.

QayerdaHero sarlavhalari, "biz nima qilamiz" ro'yxatlari, terminal estetikasi.

text along pathSVG textPath
HARAKAT · KATALOGI · 2026 ·
matn aylana bo'ylab oqadi

SVG <textPath> matnni istalgan chiziq bo'ylab joylaydi. Butun guruh aylantirilsa — aylanuvchi nishon chiqadi. Bu haqiqiy matn: tanlash ham, qidirish ham mumkin.

QayerdaStudiya nishonlari, "scroll qiling" indikatorlari, muhr va yorliqlar.

shine sweepbackground-clip
PREMIUM
gradient matn ichidan o'tadi

Matnga keng gradient fon beriladi, background-clip: text uni harflar shakliga kesadi, so'ng background-position animatsiya qilinadi. Matn qimirlamaydi — yorug'lik qimirlaydi.

QayerdaNarx urg'ulari, "yangi" belgilari, premium tugmalar. Ozgina ishlatilsin.

Layout va o'tishlar

Element paydo bo'lishi emas — joyini o'zgartirishi animatsiya qilinadi. Eng ko'p e'tibordan chetda qoladigan kategoriya.

FLIPWeb Animations API

First → Last → Invert → Play. Eski va yangi pozitsiya o'lchanadi, element transform bilan eskisiga "qaytariladi", so'ng qo'yib yuboriladi. Layout sakrashini silliq harakatga aylantiradi.

QayerdaFiltrlanadigan galereyalar, saralanadigan ro'yxatlar, savatcha.

clip-path wipeCSS clip-path
ostidagi
USTIDAGI

Element o'chmaydi — clip-path bilan "supurib" ochiladi yoki yopiladi. Opacity'dan ko'ra qat'iyroq va qimmatroq ko'rinadi.

QayerdaSahifalararo o'tishlar, rasm ochilishi, bo'lim almashinuvi.

infinite marqueeCSS · GSAP
ustiga kursor kelsa — sekinlashadi

Kontent ikki marta nusxalanadi va uzluksiz suriladi; birinchi nusxa tugaganda pozitsiya nolga qaytariladi — ko'z buni sezmaydi.

QayerdaLogotip lentalari, "biz bilan ishlaganlar", e'lon satrlari.

preloader sequenceXoreografiya
Salom.
SAHIFA TAYYOR
0

Sahifa kirishi bitta animatsiya emas — ketma-ketlik: hisoblagich 100 ga yetadi, panellar stagger bilan ko'tariladi, keyin kontent chiqadi. Har bosqich oldingisining tugashini kutadi.

QayerdaStudiya saytlari, portfoliolar. Ogohlantirish: haqiqiy yuklanishga bog'lansin, sun'iy kutishga emas — aks holda bu shunchaki foydalanuvchi vaqtini o'g'irlash.

expanding panelsCSS flex
ATLAS
NOVA
MERIDIAN
HALCYON
panellar ustiga kursor olib bor

flex qiymati animatsiya qilinadi: hover qilingani 3.2 ga o'sadi, qolganlari 0.7 ga tushadi. Kenglik piksel emas, nisbat bilan taqsimlanadi — shuning uchun har qanday konteynerda ishlaydi. Nol JS.

QayerdaGalereyalar, xizmat ro'yxatlari, "bo'limlarni tanlang" bloklari.

sliding nav indicatorVanilla JS
tugmalarni bosib ko'r

Har tugmaga alohida fon berish o'rniga, bitta pill elementi o'lchanadi va tanlangan tugma ustiga suriladi. Shu bitta qaror butun navigatsiyani bir butun his qildiradi.

QayerdaTab'lar, filtrlar, segment kontrollari, til almashtirgich.

drag carouselPointer + inertia
sudrab qo'yib yubor

Scroll konteyner emas — transform bilan suriladigan trek. Sudralganda pozitsiya, qo'yib yuborilganda tezlik + ishqalanish. Chegaraga yetsa rezina qarshiligi.

QayerdaPortfolio karusellari, mahsulot lentalari. Oddiy holatlarda scroll-snap yetarli — buni faqat to'liq nazorat kerak bo'lganda ol.

3D va WebGL

Ikki daraja bor: CSS 3D (yassi qatlamlarni fazoda joylash — arzon, tez) va WebGL (haqiqiy geometriya va shader — kuchli, og'ir). Ko'p holatda birinchisi yetadi.

exploded viewCSS 3D
0 px
↓ scroll = portlash masofasi

Qatlamlar translateZ bo'yicha bir-biridan uzoqlashadi, ota-element transform-style: preserve-3d bilan haqiqiy fazoni ushlab turadi. Scroll masofani boshqaradi.

QayerdaMahsulot "ichini ko'rsatish": telefon qatlamlari, texnologiya steki, arxitektura qavatlari. Haqiqiy 3D model kerak bo'lsa — Three.js + GLTF.

3D flip cardCSS 3D
OLD TOMON
ORQA TOMON
kursorni kartochka ustiga olib bor

Ikki yuz ustma-ust turadi, orqadagisi rotateY(180deg) bilan teskari. backface-visibility:hidden bo'lmasa ikkalasi ham ko'rinib qoladi — eng ko'p uchraydigan xato.

QayerdaJamoa kartochkalari, narx varaqlari, "batafsil" ochilishi.

depth parallax (2.5D)Vanilla JS
kursorni yurgiz — qatlamlar turlicha siljiydi

Parallax bilan bir xil g'oya, lekin trigger scroll emas — pointer. Kursor markazdan qancha uzoq bo'lsa, qatlamlar shuncha siljiydi, har biri o'z koeffitsiyenti bilan.

QayerdaHero illyustratsiyalari, 404 sahifalari, "tirik" fonlar.

turntable / orbitCanvas · Three.js
0°
↓ scroll = aylanish burchagi

Ob'yekt scroll bilan o'z o'qi atrofida aylanadi. Bu demo — qo'lda yozilgan karkas (nuqtalarni aylantirib, ekranga proyeksiya qilish), kutubxonasiz. Haqiqiy modellar uchun Three.js.

QayerdaMahsulot ko'rgazmasi, 360° ko'rinish, konfigurator.

shader backgroundXom WebGL
WebGL mavjud emas
fragment shader — har piksel GPU'da hisoblanadi

Rasm ham, DOM element ham yo'q — GPU har piksel rangini formula bilan hisoblaydi. Shuning uchun cheksiz silliq va nol fayl og'irligi. Bu demoda ~15 qator GLSL.

QayerdaJonli gradient fonlar, "suyuq" hero'lar. Odatda Three.js yoki OGL orqali yoziladi.

particle fieldCanvas 2D
kursorni olib bor — zarrachalar qochadi

Har zarracha o'z pozitsiyasi va tezligiga ega; kursor ularga kuch beradi, keyin ular asl joyiga tortiladi. Bu — kuch maydoni (force field) g'oyasi.

QayerdaHero fonlari, interaktiv logotiplar, matn morfingi.

Rasm va media

Rasm — sahifadagi eng og'ir element. Uni qanday ko'rsatish tezlik hissiga animatsiyadan ham ko'proq ta'sir qiladi.

comparison sliderVanilla JS
OLDIN
KEYIN
chapga-o'ngga sudra

Ikki rasm ustma-ust; tepadagisi clip-path: inset() bilan kesiladi. Kursor yoki barmoq kesish nuqtasini boshqaradi — hech narsa qayta chizilmaydi.

Qayerda"Oldin / keyin", retush, tahrir, restavratsiya keyslari.

ken burnsCSS
sekin masshtab + siljish — hech qachon to'xtamaydi

Statik rasm juda sekin kattalashadi va siljiydi (10–20 s). Ko'z buni harakat deb sezmaydi, lekin kadr "tirik" bo'lib qoladi. Chetlari kesilmasligi uchun element atayin kattaroq qilinadi.

QayerdaHero fonlari, slayd-shou, hujjatli film uslubidagi bloklar.

blur-up (LQIP)Yuklash strategiyasi
—

Avval bir necha kilobaytlik xira nusxa ko'rsatiladi, asl rasm yuklanib bo'lgach xiralik nolga o'tadi. Sahifa bo'sh emas, tayyorlanayotgan bo'lib ko'rinadi — idrok etilgan tezlik ortadi.

QayerdaHar qanday og'ir rasm. Next.js placeholder="blur" aynan shu.

hover reveal listVanilla · GSAP
nom ustiga kursor olib bor

Ro'yxatda faqat matn turadi; hover'da rasm kursor yonida paydo bo'lib, uni lerp bilan kuzatib boradi. Sahifa yengil qoladi, lekin galereya hissi bor.

QayerdaStudiya portfoliolari, keys ro'yxatlari, blog indekslari.

RGB splitCSS blend
GLITCH GLITCH GLITCH
kursorni yurgiz — kanallar ajraladi

Bir xil matn/rasmning uch nusxasi qizil, ko'k va oq rangda ustma-ust turadi. mix-blend-mode: screen ularni birlashtiradi; siljitilsa — xromatik aberratsiya.

QayerdaGlitch estetikasi, musiqa va o'yin saytlari, yuklanish holatlari.

image reveal (clip + scale)Redaktsion klassika
0 %
↓ ramka ochiladi, rasm ichida kichrayadi

Ikki qarama-qarshi harakat bir vaqtda: ramka ochiladi (0 → to'liq balandlik), rasm esa ichida 1.35 dan 1 ga kichrayadi. Bitta harakatdan ko'ra ancha kinematik.

QayerdaRedaktsion sahifalar, keys ochilishlari, hero rasmlar. Eng ko'p qaytariladigan "qimmat" priyom.

swipe deckPointer + spring
yuqoridagi kartani yon tomonga uloqtir

Faqat yuqoridagi karta hodisalarni ushlaydi; siljish masofasi burilish burchagiga aylantiriladi. Chegaradan oshsa — uchib ketadi, aks holda spring bilan joyiga qaytadi.

QayerdaOnboarding, tanlov interfeyslari, mobil galereyalar.

Materiallar — "-morphism" oilasi

Bular harakat emas, sirt. Element qanday qimirlashi emas — nimadan yasalgani: shishami, yumshoq plastikmi, qattiq qog'ozmi. Ikkalasi mustaqil o'q: istalgan materialga istalgan harakatni berish mumkin.

glassmorphismbackdrop-filter
Shisha qatlam Orqadagi rang harakatlanadi — shisha uni real vaqtda xiralashtiradi.
fon qimirlaydi, shisha uni bulg'aydi

Uch narsa birga kerak: backdrop-filter: blur(), yarim shaffof oq fon va yorug' chekka (inset 0 1px 0). Chekkasiz shisha shunchaki xira quti bo'lib qoladi.

QayerdaBiz qurgan NovaAI'ning barcha panellari shu. Shart: orqada rangli yoki harakatdagi narsa bo'lsin — oq fon ustida shishaning ma'nosi yo'q.

neumorphism (soft UI)Ikki soya
bos — ichkariga botadi

Element foni bilan bir xil rangda bo'ladi; shakl faqat ikkita soyadan chiqadi — pastdan qorong'i, tepadan oq. Bosilganda ikkalasi inset ga aylanadi.

QayerdaOgohlantirish: kontrast juda past, shuning uchun matn va muhim tugmalar uchun yaramaydi — qulflangan holatda foydalanuvchi tugmani ko'rmaydi. Faqat dekorativ panellar uchun.

claymorphismIkki inset soya
LOYSIMON
katta radius + ichki yorug'lik

Uch soya bir vaqtda: pastda katta tashqi soya (havoda turibdi), ichkarida pastdan qorong'i, ichkarida tepadan oq. Radius juda katta (30px+) — shundan "puflangan" plastik hissi chiqadi.

QayerdaBolalar va o'yin ilovalari, do'stona onboarding, illyustratsiyali landinglar.

skeuomorphismiOS 6 klassikasi
bos

Haqiqiy buyumga taqlid: gradient (yuqoridan yorug'lik), inset soya (chuqurlik), pastda oq chiziq (qirra). Flat dizayn buni o'ldirgan edi — endi u nostalgiya sifatida qaytmoqda.

QayerdaAudio va musiqa interfeyslari, retro mahsulotlar, o'yinlar. Fizik boshqaruvga taqlid qiluvchi hamma narsa.

neubrutalismQattiq soya
kursorni olib bor va bos

Glassmorphism'ning to'liq teskarisi: hech qanday blur yo'q. Qalin qora ramka, siljigan qattiq soya (7px 7px 0, blur = 0), to'yingan ranglar. Hover'da element soyasi tomon siljiydi — go'yo bosilgandek.

QayerdaStartap landinglari, dizayn portfoliolari, "biz boshqachamiz" deydigan brendlar.

aurora / mesh gradientblur + radial
AURORA
3 ta dog' · blur(34px)

Uchta katta rangli doira kuchli blur ostida sekin suzadi. Bir-biriga qo'shilganda "mesh gradient" hosil bo'ladi — bu rasm emas, shuning uchun cheksiz o'lchamda aniq va nol kilobayt.

QayerdaHero fonlari, AI va SaaS saytlari. Shisha panellar bilan juftlashadi — shisha uchun kerakli "rangli orqa fon" aynan shu.

grain / noise overlayEng arzon "qimmat"
O'CHIRIB-YOQIB KO'R

Ustiga juda mayda tasodifiy shovqin qo'yiladi (mix-blend-mode: overlay). Gradientdagi "bandlashish" (chiziqlar) yo'qoladi va raqamli sirt analog his qiladi. Farq zo'rg'a sezilarli — lekin o'chirsang darhol bilinadi.

QayerdaDeyarli har bir Awwwards sayti. Bitta canvas'da yasalgan tekstura — tashqi rasm kerak emas.

neon glowtext-shadow
NEON
4 qavat text-shadow

Sir — bir nechta soya qavati: ichkarisi oq va tor, tashqarisi rangli va keng. Bitta katta soya bilan qilinsa, u shunchaki xira dog' bo'lib chiqadi. Yorqinlik puls bilan biroz o'zgaradi.

QayerdaO'yin va kripto saytlari, tungi mavzular, musiqa. Faqat qorong'i fon ustida ishlaydi.

metallic / chromebackground-clip
CHROME
gradient = aks etgan gorizont

Metall — bu aks etish. Ko'p bosqichli gradient (yorug'–qorong'i–yorug'–qorong'i) osmon va yerning metallda aks etishiga taqlid qiladi. Gradient pozitsiyasi surilsa — sirt burilayotgandek ko'rinadi.

QayerdaY2K va retro-futuristik dizayn, musiqa albomlari, mukofot belgilari.

bento gridLayout trendi
ASOSIY
01
02
KENG
03
kataklar ustiga kursor olib bor

Yaponcha bento qutisidan olingan: turli o'lchamdagi kataklar bitta qat'iy panjarada. grid-column: span 2 — ierarxiya shundan chiqadi, katta katak = muhim narsa. Material emas, lekin shu to'lqinning bir qismi.

QayerdaApple mahsulot sahifalari, SaaS "xususiyatlar" bo'limlari, dashboardlar.

Kartochkalar

Kartochka — chegarasi bor konteyner. Uning butun ishi bitta savolga javob berish: ichkarida nima bor va u bilan nima qilish mumkin. SECTION rejimidagi bloklar butun bir ekranni egallaydi; bu yerda esa gridda o'nlab marta takrorlanadigan bitta birlik turibdi — shuning uchun har bir piksel hisobda.

price cardSegment toggle
OMMABOP
Pro
240 000 so'm / oy
  • Cheksiz loyiha
  • 5 ta jamoa a'zosi
  • Ustuvor qo'llab-quvvatlash
OYLIK / YILLIK ni almashtir

Uch tarif yonma-yon turganda odam o'rtadagini tanlaydi — shuning uchun "ommabop" kartochka uchta farq oladi: aksent ramka, lenta va yagona to'ldirilgan tugma. Qolganlari kontur tugma bo'lib qoladi. Davr almashganda narx o'z o'rnida yangilanadi: eski raqam yuqoriga chiqadi, yangisi pastdan keladi — bu foydalanuvchiga aynan nima o'zgarganini ko'rsatadi.

QayerdaSaaS tarif sahifasi, obuna oynasi, xizmat paketlari. Ogohlantirish: "yillik" ni sukut bo'yicha yoqib qo'yish — qorong'i naqsh; foydalanuvchi o'zi tanlasin.

product cardHover → savat
−20%
Oyoq kiyim
Nova Runner 02
712 000 890 000
kursorni olib bor · rang tanla

Rasm har doim bir xil nisbatda bo'lishi shart — aks holda grid tishlab qoladi. "Savatga" tugmasi kartochka ichida yashiringan va faqat hover'da chiqadi: ro'yxatda 40 ta ko'k tugma ko'rinib tursa, hech biri ko'rinmaydi. Eski narx chizilgan va kichikroq; agar u yangisi bilan bir xil o'lchamda bo'lsa, ko'z qaysi biri haqiqiy ekanini ajrata olmaydi.

QayerdaE-commerce katalogi, qidiruv natijalari, "o'xshash mahsulotlar" karuseli. Mobil uchun: hover yo'q — "savatga" doimiy ko'rinishi kerak.

member cardGrayscale → rang
in tg @
Dilnoza Rahimova
Bosh dizayner
kursorni portret ustiga olib bor

Portret kartochkaning yarmidan ko'pini egallaydi. Rasm tinch holatda oq-qora (filter: saturate(.12)) — shunda jamoa sahifasi yigirmata har xil rangdagi fotodan iborat rangli chalkashlikka aylanmaydi; faqat qaralayotgan a'zo rangga kiradi. Havolalar pastdan suriladi, chunki tinch holatda ular hech qanday ma'lumot bermaydi.

Qayerda"Biz haqimizda" sahifasi, agentlik jamoasi, klinika shifokorlari, o'qituvchilar ro'yxati.

info cardPoydevor

Bir soniyada yuklanadi

Tashqi kutubxona yo'q, rasm lazy, shrift oldindan yuklangan. Sahifa 3G da ham darhol o'qiladi.

Batafsil →
kursorni olib bor

Eng ko'p ishlatiladigan va eng ko'p buziladigan kartochka. Qoida qattiq: bitta ikonka, bitta sarlavha, ikki qatordan oshmaydigan matn. Hover'da chap chekkadagi aksent chizig'i yuqoridan pastga o'sadi va o'q siljiydi — bu ikkisi birgalikda "bu bosiladi" deydi. Butun kartochkani rangga bo'yash shart emas.

QayerdaXususiyatlar bo'limi, xizmatlar gridi, "nima uchun biz" ro'yxati. Uchtadan yoki to'rttadan qatorda — beshta bo'lsa hech kim oxirigacha o'qimaydi.

branch cardJonli soat
Chilonzor filiali —
Bunyodkor ko'chasi 12, Toshkent
Har kuni 09:00 – 21:00
+998 71 200 12 12
— Yo'nalish →
holat brauzer soatidan hisoblanadi

Manzil kartochkasining qiymati matnda emas, holatda. "Ochiq / Yopiq" brauzer soatidan hisoblanadi va yopilishga qolgan vaqt har soniyada yangilanadi — shuning uchun bu kartochka hech qachon yolg'on gapirmaydi. Xarita bo'lagi ataylab kichik: uning vazifasi yo'l ko'rsatish emas, "bu joy haqiqatan bor" deyish.

QayerdaKontaktlar sahifasi, filiallar ro'yxati, restoran va klinika saytlari. Bir nechta filial bo'lsa — bir xil kartochka, faqat ma'lumot boshqa.

statistics cardCountup + sparkline
Oylik daromad ↑ 12,4%
0so'm

O'tgan oyga nisbatan · 30 kun

kartochkani bos — qayta o'ynaydi

Yolg'iz raqam ma'no bermaydi — unga yo'nalish kerak. Shuning uchun uchtasi doim birga yuradi: katta son, o'zgarish foizi va sparkline. Son noldan sanaladi, chiziq esa chapdan o'ngga chiziladi (stroke-dashoffset) va ikkalasi bir vaqtda tugaydi — aks holda ko'z ikki alohida animatsiyani ko'radi.

QayerdaAdmin panel, analitika dashboard, landing'dagi "raqamlarda biz" bo'limi. Raqamni tabular-nums bilan yozing, aks holda sanash paytida kenglik sakraydi.

review cardYulduz stagger

Saytni qayta qurishga uch hafta ketdi. Birinchi oyda so'rovlar soni ikki barobar oshdi — va biz reklamaga bir so'm ham qo'shmadik.

SK
Sardor Karimov
Asoschi · Endomed
kartochkani bos

Sharhda ishonchni matn emas, imzo yaratadi: ism, lavozim va kompaniya. Uchtasidan biri yo'q bo'lsa, sharh o'ylab topilganday o'qiladi. Yulduzlar 70 ms oralab ketma-ket chiqadi — beshtasi bir vaqtda paydo bo'lsa ular bezakka aylanadi, ketma-ket chiqsa "baholandi" degan harakatga.

QayerdaMijozlar bo'limi, keys sahifasi, checkout yonidagi ishonch bloki. Yaxshi sharh aniq raqam aytadi — "juda yaxshi xizmat" hech narsa demaydi.

post / blog cardline-clamp: 2
Dizayn

Scroll animatsiyasi qachon foydali, qachon ortiqcha

NK 12 IYUL · 6 DAQIQA →
kursorni olib bor

Sarlavha ikki qatorga qirqiladi (-webkit-line-clamp: 2) — aks holda bitta uzun sarlavha butun qatordagi kartochkalarni cho'zib yuboradi. Hover'da muqova ichkarida kattalashadi, kartochkaning o'zi emas: o'lchami o'zgargan kartochka qo'shnilarini surib, gridni sakratadi.

QayerdaBlog ro'yxati, yangiliklar, keys studiyalar. Sana va o'qish vaqti — ikkalasi ham foydali: biri yangiligini, ikkinchisi qancha vaqt ketishini aytadi.

Mikro-interaksiya

Kichik, deyarli sezilmaydigan javoblar. Ular yo'q bo'lsa sayt "o'lik" his qiladi — lekin hech kim ularni ta'riflab bera olmaydi.

count-up / odometerVanilla JS
raqamlar aylanib joyiga tushadi

Har raqam alohida ustun; 0–9 yozilgan tasma translateY bilan kerakli raqamgacha suriladi. Oddiy textContent almashtirishdan ko'ra ancha qimmat ko'rinadi.

QayerdaStatistika bloklari, narx, hisoblagichlar, dashboard KPI.

rippleMaterial
tugmani bos

To'lqin markazi — aynan bosilgan nuqta, tugma markazi emas. Shu detal bosishni "fizik" qiladi. Element bosilgandan keyin o'chiriladi.

QayerdaTugmalar, ro'yxat elementlari, sensorli interfeyslar.

icon morphCSS
bos — menyu belgisi X ga aylanadi

Uchta chiziq: yuqorigisi pastga tushib 45° buriladi, o'rtadagisi yo'qoladi, pastdagisi tepaga chiqib −45°. Ikkita ikonka emas — bitta element o'zgaradi.

QayerdaMobil menyu, play/pause, plus/minus, qidiruv/yopish.

underline drawCSS only
kursorni olib bor va olib ket

Butun sir transform-origin da: kirishda 0 50%, chiqishda 100% 50%. Shuning uchun chiziq kirganda chapdan chiziladi, chiqqanda o'ngga yig'iladi — orqaga qaytmaydi.

QayerdaBarcha matnli linklar. Nol JS, nol og'irlik.

skeleton shimmerCSS

Spinner "kutyapsan" deydi; skeleton "mana shu yerda matn bo'ladi" deydi. Kutish vaqti bir xil, lekin idrok etilgan tezlik farq qiladi — chunki layout oldindan ko'rinadi.

QayerdaMa'lumot yuklanadigan har qanday joy: feed, jadval, profil.

toast stackChoreography
bir necha marta bos

Bitta element emas, xoreografiya: yangisi pastdan chiqadi, eskilari yuqoriga suriladi va kichrayadi, vaqti tugagani o'chadi. Har uch harakat bir vaqtda.

QayerdaBildirishnomalar, "saqlandi" xabarlari, xatolar.

split-flap boardVanilla JS
aeroport tablosi kabi

Har belgi to'g'ri harfga yetguncha alifbo bo'ylab varaqlanadi, har ustun turli vaqtda to'xtaydi. text scramble ga o'xshaydi, lekin mexanik va bosqichli — raqamli emas, analog his.

QayerdaSarlavhalar, statistika, retro va sayohat mavzusidagi saytlar.

confetti burstCanvas 2D
bos

Zarrachalar tasodifiy tezlik bilan otiladi, gravitatsiya ularni pastga tortadi, aylanish va shaffoflik so'nadi. Muvaffaqiyatni nishonlash — foydalanuvchi to'g'ri ish qilganini tasdiqlaydi.

QayerdaTo'lov tugagach, ro'yxatdan o'tish, bosqich yakuni. Kamdan-kam — har bosishda emas.

Forma va input

Formada animatsiya bezak emas — u javob. Foydalanuvchi yozdi, tizim nima deyapti? Bu yerdagi har harakat bitta savolga javob beradi.

floating labelCSS only
maydonga bos va yoz

Placeholder o'rniga yorliq ishlatiladi: bo'sh bo'lsa ichkarida, yozilsa tepaga ko'tariladi. Shu bilan maydon nima uchun ekani to'ldirilgandan keyin ham ko'rinib turadi — oddiy placeholder'ning asosiy muammosi shu.

QayerdaBarcha formalar. Hiyla: placeholder=" " (bo'sh joy) + :not(:placeholder-shown) — JS kerak emas.

inline validationShake + SVG
parol••••
ikki tugmani sinab ko'r

Xato — gorizontal silkinish (bosh chayqash refleksi). To'g'ri — belgi chiziladi, shunchaki paydo bo'lmaydi. Ikki holat ikki xil harakat tili bilan gapiradi.

QayerdaParol, email, karta raqami. Muhim: rang bilan birga belgi ham bo'lsin — daltonik foydalanuvchi uchun yashil-qizil yetarli emas.

password strengthVanilla JS
YOZING

Segmentlar birin-ketin to'ladi — uzluksiz chiziqdan ko'ra aniqroq, chunki foydalanuvchi necha bosqich qolganini ko'radi. Har segment o'z rangiga o'tadi.

QayerdaRo'yxatdan o'tish. Faqat rangga tayanma — matnli yorliq ham bo'lsin.

OTP auto-advanceUX detali
bir nechta raqam yoz · Backspace ham ishlaydi

Har raqamdan keyin fokus o'zi keyingi katakka o'tadi, Backspace bosilsa orqaga qaytadi. Kichik narsa, lekin busiz kod kiritish azobga aylanadi.

QayerdaSMS tasdiqlash, 2FA, PIN. Unutma: inputmode="numeric" va autocomplete="one-time-code".

range value bubbleVanilla JS
50
slayderni sudra

Qiymat slayder yonida emas, ushlagichning ustida turadi — ko'z qiymatni qidirmaydi. Pozitsiya foizga aylantiriladi, ushbagich kengligi hisobga olinadi.

QayerdaNarx filtrlari, sozlamalar, tahrirlash asboblari.

drop zone statesDrag events
FAYLNI SHU YERGA TASHLA

Uch holat aniq ajratilishi kerak: kutish, ustida (fayl qabul qilinadi), yuklanmoqda. Ikkinchisi bo'lmasa foydalanuvchi qayerga qo'yishni bilmaydi.

QayerdaFayl yuklash, rasm almashtirish, import. dragover da preventDefault() shart — aks holda brauzer faylni ochib yuboradi.

Ma'lumot vizualizatsiyasi

Grafikda animatsiya bitta vazifani bajaradi: ko'zni qiymatga olib borish. Bezak uchun qilingan harakat ma'lumotni yashiradi. Ranglar tekshirilgan palitradan — daltonizm uchun sinovdan o'tgan.

bar grow + staggerBitta seriya

Ustunlar asosdan o'sadi (transform-origin: 50% 100%), yuqoridan tushmaydi — chunki nol chizig'i ma'no tashiydi. Stagger chapdan o'ngga, o'qish yo'nalishi bo'ylab.

QayerdaBitta seriya bo'lsa legenda kerak emas — sarlavha uni nomlaydi. Uchlari 4px yumaloq, asosi tekis.

line draw + crosshairHover qatlami
chiziq ustida kursorni yurgiz

Chiziq stroke-dashoffset bilan chiziladi, ostidagi maydon esa xiraroq. Hover'da vertikal crosshair + nuqta + qiymat: HTML grafik interaktiv bo'lishi kerak, rasm emas.

QayerdaVaqt qatorlari. Har nuqtaga raqam yozma — faqat hover'dagisini ko'rsat.

donut segments4 kategoriya

Har segment o'z burchagigacha stroke-dashoffset bilan chiziladi, orasida 2px bo'shliq. Ranglar — tasdiqlangan kategorik palitra; har segment to'g'ridan-to'g'ri belgilangan, ya'ni faqat rangga tayanmaydi.

QayerdaUlush taqsimoti, 5 tadan kam kategoriya. Ko'proq bo'lsa — gorizontal ustun grafigi ishlatilsin.

sparklineStat plitkasi
HAFTALIK TRAFIK
0 ▲ 12.4%
raqam + mikro-grafik

O'q ham, panjara ham, yorliq ham yo'q — faqat shakl. Sparkline aniq qiymat bermaydi, u yo'nalish beradi. Oxirgi nuqta ta'kidlanadi, chunki "hozir" eng muhim.

QayerdaDashboard KPI plitkalari, jadval ustunlari, hisobot sarlavhalari.

gauge arcBitta qiymat
0

Yarim aylana — bitta sonning diapazondagi o'rni. Yoy uzunligi getTotalLength() bilan o'lchanadi, keyin progress ring bilan aynan bir xil mexanika.

QayerdaBall, sig'im, tezlik. Ogohlantirish: gauge ko'p joy egallab, bitta raqam beradi — ko'pincha oddiy stat plitka yaxshiroq.

Yuklanish va holatlar

Kutish vaqtini qisqartira olmaysan — lekin uni qanday his qilinishini o'zgartira olasan. Bu bo'lim tezlik haqida emas, sabr haqida.

spinner variantsCSS only
BORDER
NUQTA
CONIC
uchtasi ham nol JS

Uch usul: bitta chekkasi rangli ramka, kechiktirilgan sakrovchi nuqtalar, va conic-gradient + mask. Oxirgisi eng silliq, chunki u haqiqiy gradientli yoy.

QayerdaFaqat qisqa va noma'lum davomiylikdagi kutish uchun. 1 soniyadan uzoq bo'lsa — skeleton yaxshiroq.

determinate vs indeterminateIkki holat
ANIQ — 0%
NOANIQ — QANCHA QOLGANI NOMA'LUM

Agar progressni bilsang — ko'rsat (aniq). Bilmasang — yolg'on foiz chiqarma, harakatlanuvchi chiziq ishlat (noaniq). Soxta progress bar ishonchni yo'qotadi.

QayerdaFayl yuklash (aniq), server so'rovi (noaniq).

optimistic UIIdrok etilgan tezlik

Interfeys javobni kutmaydi — darhol o'zgaradi, so'rov esa fonda ketadi. Server rad etsa, o'zgarish orqaga qaytariladi va sabab aytiladi. Foydalanuvchi uchun ilova bir zumda ishlagandek.

QayerdaLike, saqlash, belgilash — teskari qaytarish oson bo'lgan amallar. To'lov va o'chirishda ishlatilmaydi.

empty stateHolat dizayni

Bo'sh ro'yxat — xato emas, boshlanish nuqtasi. "Hech narsa topilmadi" deb qo'yish o'rniga: nima uchun bo'sh, va keyingi qadam nima. Kirish animatsiyasi yumshoq bo'lsin, xato kabi ko'rinmasin.

QayerdaBirinchi ishga tushirish, qidiruv natijasi yo'q, filtr hech narsa qoldirmadi, savat bo'sh.

SVG

SVG — animatsiya qilinadigan yagona vektor format. Har qanday o'lchamda aniq, va uning ichidagi har chiziqni alohida boshqarish mumkin.

path drawingstroke-dashoffset
0 %
↓ scroll = chiziq uzunligi

Chiziq to'liq chizilgan, lekin stroke-dasharray uni o'z uzunligiga teng punktirga aylantiradi va stroke-dashoffset uni yashiradi. Offset kamaysa — chiziq "chiziladi".

QayerdaLogotip animatsiyasi, marshrut/xarita, grafik chiziqlari, imzo.

path morphGSAP MorphSVG
bitta shakl ikkinchisiga oqib o'tadi

Ikki shakl bir xil nuqtalar soniga ega bo'lsa, ularning koordinatalarini oraliq qiymatlarga aylantirib shakl "oqizib" o'tkaziladi. Nuqtalar soni har xil bo'lsa — GSAP MorphSVG kerak.

QayerdaIkonka o'tishlari, logotip transformatsiyasi, holat indikatorlari.

gooey filterSVG filter
kursorni yurgiz — tomchilar qo'shilib-ajraladi

Blur qilinadi, so'ng feColorMatrix alfa kanalining kontrastini keskin oshiradi. Natijada yaqin shakllar bitta "suyuqlik"ka qo'shilib ketadi. Sof SVG filtri — JS faqat pozitsiya beradi.

QayerdaSuzuvchi harakat tugmalari (FAB), yuklanish indikatorlari, organik fonlar.

progress ringstroke-dashoffset
0%
↓ scroll qil

Aynan path drawing bilan bir xil mexanika, lekin aylana ustida: 2πr uzunlik hisoblanadi va stroke-dashoffset shu qiymatdan nolgacha kamayadi. rotate(-90deg) boshlanishni tepaga ko'chiradi.

QayerdaYuklash indikatorlari, o'qish progressi, statistika, taymerlar.

morphing blobborder-radius
SVG ham, JS ham yo'q — faqat border-radius

border-radius sakkizta qiymat qabul qiladi (har burchak uchun gorizontal va vertikal radius alohida). Ularni animatsiya qilsang — organik, "suyuq" shakl chiqadi. Eng arzon organik effekt.

QayerdaFon dekoratsiyasi, avatar ramkalari, dekorativ dog'lar.

Zamonaviy CSS — JS'siz

Ilgari kutubxona talab qilgan narsalarning bir qismi endi brauzerda tayyor. Bular eng kam o'rganilgan va eng ko'p foyda beradigan qism.

animation-timeline: view()Nol JS
Brauzering hali qo'llab-quvvatlamaydi — Chrome/Edge 115+ da ishlaydi
↓ scroll — bu yerda JS umuman yo'q

Native scroll-driven animatsiya. IntersectionObserver ham, rAF ham kerak emas — brauzer animatsiyani to'g'ridan-to'g'ri scroll'ga bog'laydi va uni kompozitor oqimida ijro etadi (ya'ni tez).

QayerdaReveal va progress uchun. Chrome/Edge 115+, Safari yangi versiyalari. Qo'llab-quvvatlamasa — hech narsa buzilmaydi, animatsiya bo'lmaydi xolos.

scroll-snapCSS only
01
02
03
04
05
→ yon tomonga sudra, o'zi markazga tortiladi

Konteynerga scroll-snap-type, bolalarga scroll-snap-align — tamom. Karusel uchun JS kutubxona olishdan oldin har doim shuni sinab ko'r.

QayerdaKarusellar, galereyalar, mobil "story" ko'rinishi, to'liq ekranli bo'limlar.

View Transitions APINative
HOLAT A
—

DOM'ni o'zgartirasan, brauzer esa eski va yangi holat o'rtasida o'zi o'tish yasaydi — snapshot olib, cross-fade qilib. view-transition-name bersang, element sahifalar orasida "uchib" o'tadi.

QayerdaSPA marshrut o'tishlari, ro'yxat → tafsilot, filtr almashinuvi.

grid 0fr → 1frCSS only
bos — balandlik silliq ochiladi

height: auto ni animatsiya qilib bo'lmaydi — bu yillar davomida JS bilan balandlik o'lchashga majbur qilgan. Grid qatorini 0fr dan 1fr ga o'tkazish esa animatsiya qilinadi.

QayerdaFAQ, akkordeon, "batafsil" bloklari, ochiluvchi filtrlar.

:has() — ota selektorCSS only
01
02
03
04
bittasiga kursor olib bor — qolganlari so'nadi

CSS tarixidagi eng katta yangilik: ota element bolasining holatiga qarab o'zgara oladi. .group:has(.item:hover) .item:not(:hover) — bir qator, JS yo'q.

QayerdaAka-uka elementlarni so'ndirish, forma validatsiyasi, holatga bog'liq layout.

Fizika va sudrash

Barmoq ekrandan uzilganda harakat to'xtamasligi kerak. Inersiya bo'lmasa interfeys "plastik" his qiladi.

inertia / momentumVanilla JS
v 0.0
sudrab qo'yib yubor

Sudrash paytida tezlik o'lchanadi; qo'yib yuborilganda element shu tezlik bilan uchishda davom etadi va ishqalanish (v *= 0.94) uni sekin to'xtatadi. Devorlarga urilsa — qaytadi.

QayerdaKarusel, xarita, kanvas muharrirlar, mobil ro'yxatlar.

rubber bandiOS pattern
chegaradan tashqariga sudrab ko'r

Chegaradan tashqarida harakat qarshilikka uchraydi: ortiqcha masofa 0.3 ga ko'paytiriladi, shuning uchun qanchalik tortsang ham uzoqlashish qiyinlashadi. Qo'yib yuborsang — spring bilan qaytadi.

QayerdaOverscroll, sahifa oxiri, slayder chegaralari. Butun iOS shu his ustiga qurilgan.

Ishlash tezligi

Bu bo'limdagi raqamlar sening brauzeringda, hozir o'lchanadi — oldindan yozib qo'yilgan emas. Tugmani bosib o'zing ko'r. Chiroyli animatsiya sekin bo'lsa, u chiroyli emas.

layout thrashingHaqiqiy o'lchov
ARALASH: o'qish → yozish → o'qish → yozish—
GURUHLANGAN: avval hamma o'qish, keyin hamma yozish—
400 ta element · natija tugmadan keyin

Elementning o'lchamini o'qish brauzerni layout'ni hoziroq hisoblashga majbur qiladi. Agar o'qish va yozish navbatma-navbat kelsa, layout har safar qaytadan hisoblanadi — buni layout thrashing deyishadi. Yechim: avval hamma o'lchovni yig', keyin hammasini yoz.

QayerdaFLIP, masonry, har qanday getBoundingClientRect() sikli. Bu — DOM animatsiyasidagi eng ko'p uchraydigan sekinlik sababi.

transform vs leftFPS o'lchovi
left / top—
transform—

left o'zgarsa brauzer layout → paint → compose bosqichlarini qaytadan bajaradi. transform esa faqat oxirgisini — u GPU'ga topshiriladi. Ikkalasini ishga tushir va o'z mashinangdagi farqni ko'r.

QayerdaQoida oddiy: faqat transform va opacity. Zamonaviy mashinada farq kichik chiqishi mumkin — sekin telefonda esa aynan shu narsa animatsiyani buzadi.

content-visibilityHaqiqiy o'lchov
Oddiy · 600 kartochka—
content-visibility: auto—

Bitta CSS qatori brauzerga "ekrandan tashqaridagini render qilma" deydi. Uzun ro'yxatlarda birinchi render vaqti sezilarli qisqaradi. contain-intrinsic-size ham berilsin — aks holda scroll paneli sakraydi.

QayerdaUzun feedlar, jadvallar, kommentariyalar. Virtualizatsiya kutubxonasini olishdan oldin shuni sinab ko'r.

IntersectionObserver vs scrollChaqiruvlar soni

Bu qutida scroll qil.

O'ngdagi ikki hisoblagichni kuzat.

Ikkalasi ham bitta savolga javob beradi: element ko'rindimi?

scroll: 0
observer: 0
↓ scroll qil

Ikkalasi bir xil natija beradi, lekin scroll ishlovchisi har piksel uchun chaqiriladi va asosiy oqimni band qiladi; observer esa faqat chegara kesib o'tilganda ishlaydi va brauzer ichida optimallashtirilgan.

QayerdaReveal, lazy-load, scroll spy, cheksiz ro'yxat. Scroll handler kerak bo'lsa — {passive:true} qo'sh.

will-change intizomiQoida
Animatsiyadan oldin qo'sh✓
Tugagach olib tashla✓
Hamma narsaga doimiy qo'yish✕
bu — qoida, demo emas

will-change brauzerga elementni alohida GPU qatlamiga chiqarishni aytadi. Har qatlam xotira yeydi — hamma narsaga qo'yilsa, tezlashtirish o'rniga sekinlashtiradi. Uni vaqtincha qo'y: hover yoki animatsiya boshlanishida qo'sh, tugagach o'chir.

QayerdaUzoq davom etuvchi transform/opacity animatsiyalari. Qisqa o'tishlarga umuman kerak emas.

Foydalanuvchanlik

Harakat hammaga bir xil ta'sir qilmaydi. Ba'zi odamlarda parallax bosh aylanishi va ko'ngil aynishiga sabab bo'ladi — bu did masalasi emas, vestibulyar buzilish.

prefers-reduced-motionMajburiy
SALOM
—

To'g'ri javob animatsiyani o'chirish emas — uni almashtirish. Katta siljish va masshtab o'rniga oddiy fade qoladi: holat o'zgargani baribir ko'rinadi, lekin harakat vestibulyar tizimga tegmaydi.

QayerdaHar bir animatsiyada. Bu sahifadagi barcha 110 ta demo @media (prefers-reduced-motion: reduce) ni hurmat qiladi.

:focus-visibleCSS only
Sichqoncha bilan bosilsa — halqa yo'q.
Tab bilan kelinsa — halqa bor.
Tab tugmasi bilan ham sinab ko'r

:focus halqani har doim ko'rsatadi va shuning uchun dizaynerlar uni outline:none bilan o'chirib tashlashgan — klaviatura foydalanuvchilarini ko'r qilib. :focus-visible halqani faqat kerak bo'lganda ko'rsatadi. Hech qachon fokus indikatorini sababsiz o'chirma.

QayerdaHar bir interaktiv element. Bu sahifadagi hamma tugma shundan foydalanadi.

ARIA live regionEkran o'quvchi
Ko'rinadigan matn — ko'zlar uchun.
aria-live — quloqlar uchun. Ikkalasi bir vaqtda.

Animatsiya bilan paydo bo'lgan toast ekran o'quvchi uchun mavjud emas — u DOM o'zgarishini o'zi aytmaydi. aria-live="polite" mintaqasiga matn qo'yilsa, o'quvchi uni ovoz chiqarib o'qiydi.

QayerdaToast, validatsiya xabarlari, "saqlandi", qidiruv natijalari soni, savat hisoblagichi.

focus trapModal qoidasi
MODAL — TAB BOSIB KO'R
ochib, Tab bilan aylanib ko'r

Modal ochiq bo'lganda Tab undan chiqib ketmasligi kerak — oxirgi elementdan keyin birinchisiga qaytadi. Esc yopadi, va fokus modalni ochgan tugmaga qaytariladi. Busiz klaviatura foydalanuvchisi ko'rinmas sahifada adashib qoladi.

QayerdaHar bir modal, drawer, to'liq ekranli menyu. Native <dialog> elementi buni o'zi bajaradi.

His — arzon va qimmat o'rtasidagi farq

Bular alohida effekt emas. Bular yuqoridagi hamma effektning sifatini belgilaydigan sozlamalar. Ko'pchilik shu yerda yiqiladi.

lerp / dampingEng muhimi
XOM — KURSOR AYNAN SHU YERDA LERP 0.08 — YETIB OLADI
kursorni tez yurgiz — farqni ko'rasan

Bitta qator: joriy += (nishon − joriy) × 0.08. Har kadrda nishonga 8 % yaqinlashadi. Chapdagi to'p aniq kursorda, o'ngdagi esa unga yetib olishga harakat qiladi — va aynan shu narsa saytga "og'irlik" va qimmat his beradi.

QayerdaCustom cursor, smooth scroll, magnetic tugma, scroll scrub — hammasida. Lenis kutubxonasi asosan shu bitta formuladan iborat.

spring physicsFramer Motion
EASE — TO'XTAYDI
SPRING — TEBRANADI

Ease'da davomiylik oldindan belgilangan. Spring'da esa davomiylik yo'q — faqat stiffness va damping; harakat fizika qonuni bilan o'zi tugaydi va biroz oshib ketadi.

QayerdaInterfeys elementlari: modal, drag-drop, toggle. Fizik his beradi.

easing curvesPoydevor
—

Harakat qanday tezlashib-sekinlashishi. linear mexanik, ease-out tabiiy, back esa ozgina oshib ketadi. Bitta noto'g'ri egri chiziq butun saytni arzon qiladi.

QayerdaHamma joyda. Shubhalansang — cubic-bezier(.2,.8,.2,1) deyarli har doim to'g'ri.

staggerGSAP · Framer

Elementlar birgalikda emas, 40–90 ms oralatib chiqadi. Bir xil animatsiya, bitta parametr farq — lekin his butunlay boshqacha.

QayerdaRo'yxatlar, menyular, kartochka to'plamlari, harflar.

Qaysi birini tanlash

Kutubxonani effektga qarab emas, ehtiyojga qarab tanla.

Kutubxonasiz

Reveal, stagger, tilt, magnetic, marquee, clip-path, FLIP. IntersectionObserver + CSS transition yetadi. Yangi loyihaning 70 %i shu bilan qoplanadi.

Lenis

Faqat smooth scroll uchun. ~3 qator kod, natija juda katta. Boshqa hamma narsa bilan yaxshi ishlaydi.

GSAP + ScrollTrigger

Pin, scrub, horizontal scroll, murakkab timeline. Sanoat standarti. Webflow sotib olgandan keyin barcha plaginlari bepul.

Framer Motion

React ichida spring, layout animatsiya, gesture. GSAP bilan raqobat emas — boshqa vazifa uchun.

Three.js / R3F

Haqiqiy 3D, shader, distortion, zarrachalar. Og'ir — faqat markaziy g'oya bo'lsa ol.

Canvas + kadr keshi

Hero'da video scrub. Kutubxona yo'q — biz NovaAI'da aynan shuni qo'lda yozdik.

Brauzerning o'zi

animation-timeline, scroll-snap, :has(), View Transitions, 0fr→1fr. Ilgari kutubxona kerak bo'lgan narsalar — endi tekin. Har doim shu yerdan boshla.

Hero bloklari

Bir xil vazifa, to‘rt xil badiiy yo‘nalish. Hero — sahifaning birinchi jumlasi: u nima taklif qilinayotganini va kim taklif qilayotganini bir vaqtda aytishi kerak. Har blokda MOBIL tugmasini bosib ko‘ring.

Hero — kinematikDark cinematic
container query — ramkaga moslashadi
NOVAIshlarStudiyaJurnal
AI avtomatlashtirish

Aniq. Tiniq.
Avtomatik.

Jarayonlaringizni tushunadigan va ularni o‘zi olib boradigan tizim quramiz.

↓ Pastga suring4 daqiqalik demo

Qorong‘i fon kontentni yoritilgan sahnaga aylantiradi. Sarlavha ekranning yarmini egallaydi, matn qisqa, harakat sekin. Fon uchun video yoki scroll-scrub ishlatilsa — biz qurgan NovaAI hero‘si aynan shu.

TuzilishiNav (glass tugma bilan) → markazda eyebrow + katta sarlavha + bitta abzats + ikki CTA → pastda scroll ishorasi. Sarlavha clamp(30px, 7cqi, 58px) — ramka kengligiga bog‘langan.

Hero — redaktsion splitRedaktsion / jurnal
container query — ramkaga moslashadi
Tadqiqot · 2026

Sekinlik — yangi tezlik.

O‘n ikki oy davomida qirq jamoani kuzatdik. Eng tez yetkazganlar eng ko‘p ishlaganlar emas edi — ular eng kam narsani qayta qilganlar edi.

18 daqiqa o‘qishMitha K.
NOVA · DALA YOZUVLARI

Bosma jurnal maketi: chapda serif sarlavha va matn, o‘ngda rasm. Ikki ustun nisbati 1.15 : 0.85 — teng emas, shuning uchun kompozitsiya jonli. Tor ramkada ustunlar ustma-ust tushadi.

TuzilishiGrid 2 ustun → @container (max-width:620px) da 1 ustunga o‘tadi. Matn 44 belgidan oshmaydi, line-height 1.75.

Hero — brutalistNeubrutalism
container query — ramkaga moslashadi
YANGI
NOVA*ISHLARNARX

Biz agentlik emasmiz

Prezentatsiya yo‘q. Hisob-kitob yo‘q. Ikki hafta — ishlaydigan mahsulot.

Qalin ramka, siljigan qattiq soya, burchakda burilgan stiker. Hover‘da tugma soyasi tomon siljiydi — go‘yo bosildi. Blur, gradient va radius umuman yo‘q.

TuzilishiAbsolute joylashgan burchak stikeri (rotate(28deg)) → nav → katta harfli sarlavha → ikki tugma. Soya 6px 6px 0, blur nol.

Hero — minimal markazSwiss minimal
container query — ramkaga moslashadi
NOVAINDEKSAXBOROTALOQA

Kamroq narsa, yaxshiroq qilingan.

Studiya. Interfeys, identifikatsiya va harakat. Toshkent va masofadan.

© 2026TOSHKENT 41°N

Deyarli hech narsa yo‘q: yupqa chiziq, markazlashgan sarlavha, bitta havola. Butun kuch tipografikada — wdth 90 tor grotesk va -.04em tracking.

TuzilishiYuqorida chiziq ostidagi nav → markazda vertikal markazlashgan blok → pastda kichik meta. Bitta urg‘u rangi faqat pastki chiziqda.

Sahifa bloklari

Hero‘dan keyin keladigan qism: navigatsiya, imkoniyatlar, narx, dalil. Bular ishontirish ketma-ketligi — har blok bitta e‘tirozga javob beradi.

Navbar — glassGlass SaaS
container query — ramkaga moslashadi
nova
MahsulotYechimlarNarxlarHujjatlar
Kirish

Shisha panel aurora fon ustida suzadi. MOBIL tugmasini bos — linklar yo‘qoladi, burger paydo bo‘ladi. Bu media query emas, @container: panel o‘z ramkasiga qarab qaror qiladi.

TuzilishiGlass bar (blur + yorug‘ chekka) → container query 620px da linklarni yashiradi → burger X ga aylanadi → menyu 0fr→1fr bilan ochiladi.

Xususiyatlar — bentoBento grid
container query — ramkaga moslashadi
Imkoniyatlar

Bitta tizim, hamma joyda ishlaydi

Real vaqt tahliliKontekstni sodir bo‘layotgan payt o‘qiydi va muhimini oldinga chiqaradi.
AgentlarMustaqil ishlaydi
Integratsiya40+ manba
XavfsizlikSOC 2, ma‘lumot sizning serveringizda qoladi.

Turli o‘lchamdagi kataklar bitta qat‘iy panjarada. Katta katak = muhim xususiyat — ierarxiya o‘lcham orqali beriladi, matn kattaligi orqali emas.

Tuzilishigrid-template-columns: repeat(4,1fr), birinchi katak span 2 ikki o‘lchamda ham. Tor ramkada 2 ustunga tushadi. Hover‘da 4px ko‘tarilish.

Narxlar — 3 darajaKorporativ ishonch
container query — ramkaga moslashadi

Jamoangizga mos rejani tanlang

Boshlang‘ich
Bepul
  • 3 ta loyiha
  • Asosiy tahlil
  • Jamoa: 2 kishi
Jamoa
$49/oy
  • Cheksiz loyiha
  • Agentlar
  • Jamoa: 20 kishi
  • Ustuvor yordam
Korxona
Kelishuv
  • O‘z serveringizda
  • SSO va audit
  • Shaxsiy menejer

O‘rtadagi reja ataylab ta‘kidlangan — odam uchtadan birini tanlaganda deyarli har doim o‘rtadagisini oladi. Oylik/yillik almashtirgichda narx sanab o‘zgaradi, sakramaydi.

Tuzilishi3 ustun, o‘rtadagisida urg‘u ramkasi + “ommabop” yorlig‘i. Almashtirgich pill, faol holat urg‘u rangida. Tor ramkada ustma-ust.

Statistika lentasiCount-up
container query — ramkaga moslashadi
0Avtomatlashtirilgan jarayon
0Aniqlik darajasi
0Tezlashuv
0Integratsiya

Raqamlar ekranga kirganda sanaydi — ko‘z avval harakatni, keyin qiymatni ko‘radi. Yorliqlar mono va kichik, chunki bu yerda raqam gapiradi.

Tuzilishi4 ustun, tor ramkada 2 ga tushadi. Sanash IntersectionObserver bilan bir marta ishga tushadi, ease-out-cubic bilan sekinlashadi.

Logo lentasiInfinite marquee
container query — ramkaga moslashadi
Bizga ishonganlar

Uzluksiz suriladigan lenta. Ikki chetdagi gradient niqob lentaning “kesilgan” joyini yashiradi — busiz logolar chetda keskin yo‘qoladi va arzon ko‘rinadi.

TuzilishiKontent ikki marta nusxalanadi; birinchi nusxa tugaganda pozitsiya nolga qaytariladi. Kursor kelganda sekinlashadi. Chetlarda ::before/::after gradient niqob.

Jarayon — 4 bosqichTimeline
container query — ramkaga moslashadi

Qanday ishlaymiz

01
Suhbat

30 daqiqa. Muammoni tushunamiz, va‘da bermaymiz.

02
Prototip

Bir hafta ichida ishlaydigan namuna.

03
Qurish

Ikki haftalik siklda yetkazamiz.

04
Topshirish

Kod va hujjatlar sizniki. Qulf yo‘q.

Gorizontal chiziq bosqichlarni bog‘laydi va yo‘nalish beradi. Raqamlar mono va urg‘u rangida — ular ketma-ketlikni bildiradi, shuning uchun bu yerda raqamlash haqli.

Tuzilishi4 ustunli grid, har ustunda chiziq segmenti + nuqta + raqam + sarlavha + matn. Tor ramkada vertikal ro‘yxatga aylanadi.

FAQ — akkordeongrid 0fr → 1fr
container query — ramkaga moslashadi

Ko‘p beriladigan savollar

Prototip — bir hafta. To‘liq yetkazish odatda 4–8 hafta, hajmiga qarab. Aniq muddatni birinchi suhbatdan keyin aytamiz.

Sizga. Repozitoriy, hujjatlar va infratuzilma to‘lov tugagach to‘liq topshiriladi. Hech qanday litsenziya qulfi yo‘q.

Ha. Odatda REST yoki webhook orqali. Agar API bo‘lmasa, ma‘lumot bazasi darajasida ham ishlay olamiz.

Balandlik height: auto emas, grid-template-rows: 0fr → 1fr bilan animatsiya qilinadi — JS bilan balandlik o‘lchash kerak emas. Plus belgisi 45° burilib X ga aylanadi.

TuzilishiHar savol: tugma sarlavha + grid konteyner. Bir vaqtda bir nechtasi ochiq bo‘lishi mumkin; agar bittasi ochiq turishi kerak bo‘lsa, boshqasini yopish qo‘shiladi.

TavsiyalarIjtimoiy dalil
container query — ramkaga moslashadi
Mijozlar

“Uch oy ichida qo‘lda qilinadigan ishning 70 foizini yo‘qotdik. Jamoa nihoyat mahsulot ustida ishlayapti.”

Dilshod A.CTO · Orbita

“Boshqa jamoalar prezentatsiya ko‘rsatgan paytda bular ishlaydigan prototip olib kelishdi.”

Nilufar R.Mahsulot rahbari · Meridian

“Hujjatlar shu qadar toza ediki, ularsiz ham davom eta oldik. Aynan shu — yaxshi topshirish.”

Sardor M.Asoschi · Halcyon

Uch kartochka, har birida iqtibos + muallif. Ism va lavozim aniq — “bir mijoz” degan noaniq tavsiya ishonch bermaydi, aksincha shubha uyg‘otadi.

TuzilishiGrid 3 ustun → tor ramkada 1 ustun. Muallif bloki margin-top:auto bilan pastga qadaladi, shuning uchun turli uzunlikdagi iqtiboslarda ham bir tekisda turadi.

Yakuniy bloklar

Sahifaning oxiri va chekka holatlar. Ko‘pincha e‘tibordan qoladi — lekin footer eng ko‘p bosiladigan navigatsiya, 404 esa foydalanuvchi bilan oxirgi muloqot.

CTA — auroraYakuniy chaqiruv
container query — ramkaga moslashadi

Bir soatda boshlaymiz

Birinchi suhbat bepul va sotuvsiz. Muammoingizni aytasiz — biz uni hal qilsa bo‘ladimi, yo‘qmi, rostini aytamiz.

Sahifaning oxirgi bloki: bitta xabar, bitta asosiy harakat. Aurora fon diqqatni markazga tortadi. Ikkinchi tugma — hali tayyor bo‘lmaganlar uchun chiqish yo‘li.

TuzilishiIkki blur dog‘i ::before/::after orqali, kontent z-index:2 da. Sarlavha 18 belgidan oshmaydi, matn markazda.

Footer — ko‘p ustunliNavigatsiya
container query — ramkaga moslashadi
NOVA

Jarayonlarni tushunadigan va ularni o‘zi olib boradigan tizimlar quramiz.

Mahsulot
ImkoniyatlarNarxlarXavfsizlik
Kompaniya
Biz haqimizdaJurnalVakansiyalar
Resurslar
HujjatlarAPIHolat
© 2026 NOVAMAXFIYLIK · SHARTLAR · COOKIE

Footer — saytning eng ko‘p bosiladigan navigatsiyasi. Birinchi ustun kengroq: brend va bir jumlalik tavsif. Qolganlari teng, mavzu bo‘yicha guruhlangan.

Tuzilishigrid-template-columns: 1.5fr 1fr 1fr 1fr → tor ramkada 2 ustun. Pastda ajratuvchi chiziq va huquqiy qator.

Aloqa formasiFloating label
container query — ramkaga moslashadi

Loyihangiz haqida gaplashaylik

Odatda bir ish kuni ichida javob beramiz. Shoshilinch bo‘lsa — to‘g‘ridan-to‘g‘ri yozing.

salom@nova.uz

Yorliqlar maydon ichida turadi va yozilganda tepaga ko‘tariladi — shuning uchun to‘ldirilgandan keyin ham maydon nima uchun ekani ko‘rinib turadi. Placeholder‘ning asosiy muammosi shu edi.

TuzilishiChapda kontekst, o‘ngda forma. Ism va email bitta qatorda → tor ramkada ustma-ust. placeholder=" " + :not(:placeholder-shown) — JS yo‘q.

404 — sahifa topilmadiClay / o‘ynoqi
container query — ramkaga moslashadi
404

Bu yerda hech narsa yo‘q

Havola eskirgan yoki sahifa ko‘chirilgan bo‘lishi mumkin. Bosh sahifadan davom eting.

Xato sahifasi — kechirim so‘rash joyi emas, chiqish yo‘li. Yumshoq shakl va rang vaziyatni dramatiklashtirmaydi; bitta aniq tugma foydalanuvchini qaytaradi.

TuzilishiFonda ikki organik dog‘ (border-radius animatsiyasi) → katta kod → qisqa tushuntirish → bitta harakat. Aybdor qidirilmaydi, yechim beriladi.

Uslub nima, material nima

Ikkisi tez-tez chalkashtiriladi. Material — bitta sirt retsepti. Uslub — butun badiiy yo‘nalish: shrift, palitra, bo‘shliq, radius, harakat xarakteri va ohang birgalikda.

Material = retsept

glassmorphism = backdrop-filter + yarim shaffof fon + yorug‘ chekka. Bir necha qator CSS. Uni istalgan uslub ichida ishlatish mumkin.

Uslub = yo‘nalish

“Glass SaaS” = shisha + aurora fon + neytral grotesk + katta bo‘shliq + yumshoq spring + do‘stona ohang. Bu — qaror, retsept emas.

Uslub aralashadi

Sof holda kam uchraydi. Ko‘p sayt ikki-uchtasini qorishtiradi — masalan Swiss tuzilma + Dark cinematic palitra. Muhimi: qaysi biri yetakchi ekanini bilish.

Nima uchun muhim

Uslub auditoriyaga signal beradi. Noto‘g‘ri uslub — to‘g‘ri mahsulot noto‘g‘ri odamga gapiradi. Shuning uchun har kartochkada “qachon emas” bandi bor.

Zamonaviy mahsulot tili

Bugungi raqamli mahsulotlar gapiradigan tillar. Ularning aksariyati oxirgi 10 yilda shakllangan va bir-biriga o‘xshab ketishi — asosiy muammosi.

Swiss minimalAniqlik · Jiddiylik
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Panjara boshqaradi, bezak yo‘q. Har bo‘shliq o‘lchangan, har chiziq sababli. Tipografika yagona ifoda vositasi.

QachonPortfolio, arxitektura, konsalting, redaktsion sayt, dizayn studiyasi.
Qachon emasBolalar mahsuloti, o‘yin, chegirma-savdo — quruq va sovuq ko‘rinadi.
TipografikaBitta grotesk (Archivo / Helvetica Now). Sarlavha tor va qalin, matn oddiy.
HarakatMinimal. Faqat opacity va kichik siljish, 200–300 ms. Spring yo‘q.
Bunday qilmaRadius, soya yoki ikkinchi urg‘u rangi qo‘shish. Har qo‘shimcha uslubni buzadi.
Korporativ ishonchXavfsizlik · Barqarorlik
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Ko‘k, o‘rtacha radius, aniq ierarxiya, hech qanday kutilmagan narsa yo‘q. Zerikarli — va bu ataylab.

QachonBank, sug‘urta, tibbiyot, davlat, korporativ B2B, HR platformalari.
Qachon emasIjodiy portfolio, madaniyat, yoshlar brendi — darhol unutiladi.
TipografikaNeytral sans (Inter, system-ui). Sarlavha 600–700, matn 400, 16px+.
HarakatKam va tez: 150–250 ms fade va kichik siljish. Diqqatni tortmasin.
Bunday qilma“Jonlantirmoqchi” bo‘lib gradient qo‘shish. Ishonch — bashoratlilikdan.
Mahsulot minimalizmiApple maktabi
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Oq fon, markazlashgan matn, mahsulot rasmi hamma narsadan katta. Interfeys g‘oyib bo‘ladi — faqat mahsulot qoladi.

QachonApparat, premium mahsulot sahifasi, bitta narsani sotadigan landing.
Qachon emasKo‘p mahsulotli katalog, ma‘lumotga boy interfeys — joy yetmaydi.
TipografikaBitta neytral sans, sarlavha 600, matn kulrang. Havolalar ko‘k, tugma emas.
HarakatScroll-linked mahsulot aylanishi va parallax. Sekin, hech qachon o‘ynoqi emas.
Bunday qilmaRamka va soya qo‘shish. Bu yerda elementlar suzmaydi, ular shunchaki bor.
Glass SaaSZamonaviylik · Dasturiy mahsulot
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Aurora fon + shisha panellar + yumshoq spring. 2020-yillarning standart dasturiy tili. Eng ko‘p takrorlangani ham shu.

QachonB2B SaaS, ishlab chiquvchi asboblari, AI mahsulot, narx sahifalari.
Qachon emasHunarmandchilik, oziq-ovqat, moda — sovuq va shaxssiz chiqadi.
TipografikaNeytral grotesk (Inter tipida). Sarlavha 600, matn 400, tracking tor.
HarakatSpring: stiffness ~200, damping ~20. Hover‘da 2–4px ko‘tarilish.
Bunday qilmaOq fon ustida shisha ishlatish. Orqada rangli narsa bo‘lmasa ma‘nosi yo‘q.
Stripe gradientFintech · Ishlab chiquvchi
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Burchakka qiyshaygan yorqin gradient lenta, ustida oq kontent. Stripe ommalashtirgan va butun fintech nusxa ko‘chirgan til.

QachonTo‘lov, API, infratuzilma mahsulotlari, ishlab chiquvchiga qaratilgan landing.
Qachon emasKonservativ auditoriya — bank rahbariyati uchun juda “startap”.
TipografikaNeytral sans, sarlavha 680. Kod bloklari mono va rangli sintaksis bilan.
HarakatGradient sekin siljiydi, kartochkalar hover‘da ko‘tariladi.
Bunday qilmaGradientni butun sahifaga yoyish. U faqat yuqori lenta bo‘lib qolsin.
Ma‘lumot zichBloomberg maktabi
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Bo‘shliq isrof. Mono shrift, kichik o‘lcham, ko‘p ustun, rang faqat holat uchun. Professional foydalanuvchi tezlikni chiroylikdan ustun qo‘yadi.

QachonTrading terminali, monitoring, admin panel, logistika, analitika.
Qachon emasMarketing sahifasi, mobil ilova, tasodifiy foydalanuvchi — qo‘rqitadi.
TipografikaMono, 11–13px. Raqamlar tabular-nums bilan tekislanadi.
HarakatDeyarli yo‘q. Faqat qiymat o‘zgarganda qisqa rang chaqnashi.
Bunday qilmaBo‘shliq qo‘shib “nafas oldirish”. Bu yerda zichlik — xususiyat.
Dark cinematicPremium · Sirlilik
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Qorong‘i fon kontentni yoritilgan sahnaga aylantiradi. Katta tipografika, kam element, ko‘p havo.

QachonAI va texnologiya, mahsulot ochilishi, film va musiqa, lyuks avtomobil.
Qachon emasMa‘lumotga boy panellar, uzun o‘qish — qorong‘ida ko‘z charchaydi.
TipografikaGrotesk, katta o‘lchamda, tor tracking. Mono faqat kichik yorliqlar uchun.
HarakatScroll-scrub, lerp 0.08–0.12, uzun ease-out.
Bunday qilmaSof qora fon va sof oq matn. #0a0d12 va #f2f5f8 oling.
Terminal / devTexniklik · Ishonch
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Mono shrift, qorong‘i fon, fosfor rang, miltillovchi kursor. “Bu asbob men uchun yozilgan” degan signal.

QachonCLI va API mahsulotlari, hosting, ochiq kod, xavfsizlik.
Qachon emasIshlab chiquvchi bo‘lmagan auditoriya — qo‘rqinchli va sovuq.
TipografikaFaqat mono. Sarlavha ham mono.
HarakatTerish effekti, scramble, kursor. Silliq emas — bosqichli.
Bunday qilmaYashilni haddan tashqari ishlatish. Bitta urg‘u, qolgani kulrang.
3D render yetakchiSpline · Blender
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Markazda yumshoq yoritilgan 3D ob‘yekt sekin aylanadi. Tipografika unga yo‘l beradi. Rasm emas — jonli sahna.

QachonAI mahsulot, kripto, ijodiy asbob, kelajakka qaragan brend.
Qachon emasSekin internet va eski qurilma — WebGL sahna og‘ir, hamma ko‘tarmaydi.
TipografikaNeytral grotesk, o‘rtacha o‘lcham. Shrift diqqatni tortmasin.
HarakatOb‘yekt kursorga yoki scroll‘ga javob beradi. Doim sekin va inertsiyali.
Bunday qilmaSahnani hamma joyga qo‘yish. Bitta ob‘yekt yetadi, qolgani jim.

Tarixiy harakatlar

Ekrandan oldin qog‘ozda tug‘ilgan yo‘nalishlar. Ular veb uchun o‘ylab topilmagan, shuning uchun ularni ko‘chirishda tuzilma emas, ruh olinadi.

Bauhaus1919 · Geometriya
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Uch asosiy rang, uch asosiy shakl: doira, uchburchak, kvadrat. Forma vazifaga bo‘ysunadi — bezak yo‘q, faqat tuzilma.

QachonTa‘lim, madaniyat, arxitektura, tadbir, dizayn maktabi.
Qachon emasNozik va hissiy mahsulot — bu til qat‘iy va sovuq.
TipografikaGeometrik grotesk (Futura tipida), katta harflar, keng yoki juda tor.
HarakatShakllar aylanadi va siljiydi — mexanik, aniq, hech qanday spring yo‘q.
Bunday qilmaUchdan ortiq rang qo‘shish. Qizil, ko‘k, sariq — va qora. Tamom.
Konstruktivizm1920 · Plakat
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Diagonal kompozitsiya, qizil va qora, ulkan tor harflar. Harakat va shoshilish hissi — plakat qichqiradi.

QachonManifest, tadbir plakati, siyosiy yoki madaniy kampaniya, musiqa.
Qachon emasMahsulot interfeysi — diagonal o‘qish qulayligini yo‘q qiladi.
TipografikaJuda tor va juda qalin grotesk, katta harflar, burchak ostida burilgan.
HarakatBloklar chetdan uchib kiradi. Tez va qattiq, 200 ms.
Bunday qilmaUni interfeysga aylantirish. Bu — plakat tili, navigatsiya tili emas.
Art Deco1925 · Hashamat
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Simmetriya, oltin chiziqlar, ikki qavatli ramka, juda keng tracking. Zamonaviylik va boylikning 20-asr boshidagi tili.

QachonMehmonxona, restoran, teatr, atir, to‘y, premium tadbir.
Qachon emasTexnologiya mahsuloti — eskirgan va teatral ko‘rinadi.
TipografikaYuqori kontrastli serif yoki geometrik display, katta harflar, tracking 0.3em+.
HarakatSekin ochiluvchi ramkalar. Elegant, hech qachon o‘ynoqi emas.
Bunday qilmaOltinni haddan oshirish. Bir-ikki nozik chiziq — butun bezak shu.
Memphis1981 · Postmodern
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Qoidalarni rad etadi: to‘qnashuvchi ranglar, tasodifiy shakllar, qiyshiq kompozitsiya. 80-yillar quvonchi va bema‘niligi.

QachonYoshlar brendi, festival, ijodiy agentlik, moda, 80-yillar nostalgiyasi.
Qachon emasHar qanday jiddiy xizmat. Bu til qat‘iy ravishda o‘ynoqi.
TipografikaQalin geometrik grotesk. Ranglar to‘yingan va bir-biriga mos kelmaydi.
HarakatShakllar sakraydi va aylanadi. Overshoot va spring — ko‘p.
Bunday qilmaUni “muvozanatlashtirishga” urinish. Muvozanatsizlik — uslubning o‘zi.
Kosmik davr1965 · Retro-futurizm
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

NASA plakatlarining tili: keng harflar, sarg‘ish qog‘oz, to‘q sariq va jigarrang, katta doiralar. O‘tmish tasavvur qilgan kelajak.

QachonKosmik va ilmiy mahsulot, hujjatli film, retro brend, kitob nashri.
Qachon emasZamonaviy va tezkor bo‘lib ko‘rinishi kerak bo‘lgan mahsulot.
TipografikaKeng grotesk (wdth 118), katta harflar, o‘rtacha qalinlik.
HarakatSekin, orbital aylanish. Hech narsa shoshilmaydi.
Bunday qilmaSof oq fon. Qog‘oz rangi (#f0e6d2) uslubning yarmi.
RisographBosma · Chegaralangan rang
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Ikki-uch spot rang, ustma-ust bosilganda aralashadi, registratsiya biroz siljigan. Raqamli emas, jismoniy his.

QachonZine, plakat, mustaqil nashr, san‘at tadbiri, kichik brend.
Qachon emasAniqlik talab qiladigan interfeys — siljish va rang oqishi xato deb qabul qilinadi.
TipografikaQalin grotesk yoki mono. Matn kam — rang va shakl gapiradi.
HarakatDeyarli yo‘q. Bu bosma tili, ekran tili emas.
Bunday qilmaIkki-uchdan ortiq rang. Cheklov — uslubning butun mohiyati.
Redaktsion / jurnalObro‘ · Uzun matn
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Bosma nashrdan olingan: serif sarlavha, keng qatorlar orasi, iqtibos chiziqlari. Maqsad — uzoq o‘qishni qulay qilish.

QachonBlog, tadqiqot, keys-stadi, yangiliklar, hujjatli kontent.
Qachon emasDashboard, ilova interfeysi, konversiyaga qaratilgan qisqa landing.
TipografikaSerif sarlavha + sans matn. Matn 16–19px, line-height 1.6–1.8.
HarakatDeyarli yo‘q. Matn o‘qilayotganda hech narsa qimirlamasin.
Bunday qilmaQator uzunligini 75 belgidan oshirish — eng katta xato.

Platforma dizayn tillari

Kompaniyalar yaratgan va hujjatlashtirgan rasmiy tizimlar. Tayyor javob beradi — lekin shu bilan birga brendni yo‘q qiladi.

SkeuomorfizmiOS 6 · 2007–2013
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Haqiqiy buyumga taqlid: charm, metall, yaltiroq tugma. Yuqoridan yorug‘lik, ichkarida chuqurlik, pastda qirra.

QachonAudio va musiqa asboblari, retro mahsulot, o‘yin, nostalgik brend.
Qachon emasZamonaviy ish interfeysi — og‘ir va eskirgan ko‘rinadi, ekranda joy yeydi.
TipografikaNeytral sans, qalinroq, oq text-shadow bilan (o‘yiq matn effekti).
HarakatFizik: tugma bosilganda botadi, panel siljiydi, sahifa varaqlanadi.
Bunday qilmaYarmini qilish. Yo to‘liq jismoniy, yo umuman yo‘q — o‘rtasi arzon ko‘rinadi.
Flat designiOS 7 · 2013
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Skeuomorfizmga javob: soya yo‘q, gradient yo‘q, tekstura yo‘q. Faqat to‘yingan rang maydonlari va ingichka shrift.

QachonSodda ilova, ta‘lim mahsuloti, ichki asbob, tez yuklanishi kerak bo‘lgan sayt.
Qachon emasNima bosiladi-yu nima bosilmaydi — ajratish qiyin. Murakkab formalarda xavfli.
TipografikaIngichka geometrik sans (300–400). Katta o‘lcham, kam qalinlik.
HarakatTekis va tez. Faqat rang va pozitsiya o‘zgaradi.
Bunday qilmaInteraktiv elementni fondan ajratmaslik. Flat‘ning asosiy muammosi shu.
Material DesignGoogle · 2014
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Raqamli qog‘oz: har element z-o‘qida balandlikka ega, soya shu balandlikni ko‘rsatadi. Ripple bosilgan nuqtani tasdiqlaydi.

QachonAndroid ilova, ichki asboblar, katta jamoali mahsulot — tayyor tizim beradi.
Qachon emasBrendi kuchli bo‘lishi kerak bo‘lgan sayt — hamma Material bir xil ko‘rinadi.
TipografikaRoboto yoki neytral sans. Tugmalar katta harfda, tracking 0.09em.
HarakatRipple, sheet ko‘tarilishi, FAB kengayishi. Standart egri: cubic-bezier(.4,0,.2,1).
Bunday qilmaBalandliklarni tasodifiy tanlash. Tizimda 0–24 dp aniq belgilangan.
Fluent / akrilMicrosoft · 2017
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Shaffof akril qatlam, yorug‘lik chekkalari, chuqurlik. Windows 11 tili — shishaga o‘xshaydi, lekin issiqroq va shovqinli.

QachonIsh stoli ilovalari, Windows muhiti, korporativ mahsulot.
Qachon emasYengil marketing sahifasi — akril og‘ir va tizimga bog‘liq ko‘rinadi.
TipografikaSegoe UI yoki neytral sans, 600 sarlavha. O‘lchamlar kichikroq.
HarakatYumshoq va tez. Elementlar chetdan sirg‘alib kiradi.
Bunday qilmaAkrilni matn ostiga qo‘yish. Fon shovqini o‘qishni buzadi.
Frutiger Aero2004–2013 · Qaytgan
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Yaltiroq pufakchalar, moviy osmon, yashil o‘t, shaffof shisha. 2000-yillar optimizmi — hozir nostalgiya sifatida qaytdi.

QachonNostalgik brend, o‘yin, musiqa, ekologik mavzu, yoshlar loyihasi.
Qachon emasJiddiy B2B. Bu til “2008-yil” deb baqiradi — ataylab qilinsagina ishlaydi.
TipografikaYumaloq sans, oq soya bilan. Sarlavha yaltiroq va “ho‘l”.
HarakatPufakcha suzishi, yumshoq porlash. Yengil va suyuq.
Bunday qilmaIroniyasiz ishlatish. Uslub o‘z davrining bir qismi — buni tan olish kerak.

Internet subkulturasi

Forumlar, o‘yinlar va musiqa sahnasida tug‘ilgan estetikalar. Ular mahsulot haqida emas, mansublik haqida gapiradi.

Y2K / xrom2000 · Millenium
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Xrom matn, neon gradient, to‘yingan siyan va magenta. Ironiya bilan ishlatiladi — madaniy mansublik haqida signal.

QachonMusiqa, moda, kripto, yoshlar brendi, festival sahifalari.
Qachon emasHar qanday jiddiy xizmat. Bu uslub “biz o‘ynayapmiz” deb aytadi.
TipografikaMono yoki juda keng grotesk. Katta harflar, keng tracking.
HarakatGlitch, RGB split, skanlash chizig‘i. Qisqa va keskin.
Bunday qilmaHammasini yorqin qilish. Bitta xrom sarlavha yetadi.
Vaporwave2012 · Internet
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Binafsha-pushti gradient, perspektiv panjara, quyosh botishi, yapon yozuvi. 80-yillarni hech qachon ko‘rmagan avlodning 80-yillari.

QachonMusiqa, san‘at loyihasi, internet madaniyati, ironik brend.
Qachon emasMahsulot sotish. Bu estetika o‘zi haqida, mahsulot haqida emas.
TipografikaKeng grotesk yoki mono, ikki tomonlama rangli soya bilan.
HarakatPanjara cheksiz suriladi, matn sekin suzadi.
Bunday qilmaUni “toza” qilish. Ortiqchalik va bema‘nilik — mohiyati shu.
Cyberpunk / FUIHUD · Sci-fi
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Qorong‘i fon, neon siyan va magenta, kesilgan burchaklar, texnik yorliqlar. Film interfeyslaridan olingan — ular ishlashi shart emas edi, ta‘sirli bo‘lishi kerak edi.

QachonO‘yin, kripto, kiberxavfsizlik, esport, texno-musiqa.
Qachon emasUzoq ishlanadigan interfeys — neon va past kontrast ko‘zni tez charchatadi.
TipografikaTor qalin grotesk + mono yorliqlar. Katta harflar, texnik kodlar.
HarakatGlitch, skan chizig‘i, ma‘lumot oqimi, chegaralar miltillashi.
Bunday qilmaHaqiqiy ma‘lumotni bezakka ko‘mish. Kino uchun mumkin, mahsulot uchun yo‘q.
Piksel / 8-bitO‘yin · Retro
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Piksel shrift, chegaralangan palitra, qattiq soyalar. Har piksel qo‘lda qo‘yilgandek — bu kamchilik emas, imzo.

QachonIndie o‘yin, geymifikatsiya, retro tadbir, dasturchi hazil-loyihasi.
Qachon emasUzun matn. Piksel shrift 8px dan katta matnda o‘qib bo‘lmaydi.
TipografikaPress Start 2P yoki shunga o‘xshash. Faqat kichik o‘lchamda, ko‘p line-height bilan.
HarakatQadamli (steps()), silliq emas. Sprite kabi.
Bunday qilmaPiksel shriftni matn uchun ishlatish. U faqat sarlavha va yorliq uchun.
Web 1.01996 · Xom HTML
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Kulrang fon, Times New Roman, ko‘k tagchizilgan havolalar, o‘yiq tugmalar. Brauzerning standart ko‘rinishi — ataylab.

QachonArxiv loyihasi, sof matnli sayt, anti-marketing bayonoti, hazil.
Qachon emasMijoz ishi. Buni faqat o‘zing uchun yoki juda aniq maqsad bilan qil.
TipografikaTimes New Roman va Arial. Tizim shriftlari, hech qanday yuklash yo‘q.
HarakatYo‘q. 1996-yilda CSS transition mavjud emas edi.
Bunday qilmaUni “chiroyli” qilish. Xomlik — butun g‘oya. Yarim yo‘l ishlamaydi.
Corporate MemphisAlegria · Tanqid ostida
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Nomutanosib a‘zoli tekis odam figuralari, pastel palitra, do‘stona shakllar. 2018–2022 da hamma texnologiya kompaniyasi ishlatgan — va shuning uchun hech kim ajralib turmagan.

QachonOnboarding, tushuntiruvchi bo‘limlar, ichki hujjatlar — tez va arzon.
Qachon emasBrend ajralib turishi kerak bo‘lgan joy. Bu uslub “yana bir startap” deb o‘qiladi.
TipografikaYumaloq neytral sans, 600–700. Hech qanday xarakter yo‘q — ataylab.
HarakatYumshoq fade va kichik siljish. Figuralar qo‘l silkitadi.
Bunday qilmaUni identifikatsiya sifatida ishlatish. U — stok, brend emas.
Kawaii / cuteYaponiya · Cute
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Pushti va pastel, yumaloq hamma narsa, kichik yuzlar va yuraklar. Ochiq va himoyasiz — foydalanuvchini erkalaydi.

QachonBolalar, ta‘lim, kundalik ilova, oziq-ovqat, fandom, ijtimoiy loyiha.
Qachon emasMoliya, tibbiyot, huquq — jiddiylik butunlay yo‘qoladi.
TipografikaYumaloq sans, qalinroq. Kichik harflar va emoji-simvollar.
HarakatSakrash, tebranish, yurak chiqishi. Spring va overshoot ko‘p.
Bunday qilmaKontrastni unutish. Pushti ustidagi pushti matn — eng ko‘p uchraydigan xato.

Hunar, tekstura va kayfiyat

Materialdan va qo‘l mehnatidan kelib chiqqan yo‘nalishlar. Ular sovuq raqamli sirtga jismoniy his qaytaradi.

NeubrutalismDadillik · Mustaqillik
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Qalin qora ramka, siljigan qattiq soya, to‘yingan rang, blur umuman yo‘q. “Biz katta korporatsiya emasmiz” degan signal.

QachonStartap landingi, indie mahsulot, dizayn portfoliosi, konferensiya.
Qachon emasBank, tibbiyot, sug‘urta — ishonch talab qiladigan hamma joy.
TipografikaJuda qalin grotesk yoki mono. Sarlavha ko‘pincha katta harflarda.
HarakatQisqa va qattiq: 120–160 ms. Element soyasi tomon siljiydi.
Bunday qilmaYumshatish. Radius yoki blur qo‘shsang uslub darhol o‘ladi.
Clay / o‘ynoqiDo‘stonalik · Soddalik
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Katta radius, pastel palitra, puflangan soyalar. Interfeys o‘yinchoqqa o‘xshaydi va foydalanuvchi xato qilishdan qo‘rqmaydi.

QachonTa‘lim, bolalar, sog‘liq, onboarding, no-code asboblar.
Qachon emasMoliya, huquq, korporativ B2B — jiddiy qabul qilinmaydi.
TipografikaYumaloq grotesk, qalinroq (600–700).
HarakatSpring va overshoot. Bosilganda ezilish, qo‘yilganda sakrash.
Bunday qilmaPastelni matn rangi qilish. Kontrast 4.5:1 dan past bo‘lmasin.
Luxury / modaEksklyuzivlik · Sokinlik
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Ingichka yuqori kontrastli serif, ulkan bo‘shliq, monoxrom palitra, juda keng tracking. Kam narsa aytadi.

QachonModa, zargarlik, mehmonxona, ko‘chmas mulk, parfyumeriya, galereya.
Qachon emasKonversiyaga qaratilgan landing — bu uslub shoshilishni yomon ko‘radi.
TipografikaDidone yoki yuqori kontrastli serif. Kursiv urg‘u uchun.
HarakatJuda sekin fade, 600–900 ms. Hech qanday spring.
Bunday qilmaKo‘p element joylashtirish. Bo‘shliq mahsulotning bir qismi.
Skandinav / JapandiSokinlik · Tabiiylik
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Iliq kulrang va bej, ingichka shrift, juda ko‘p bo‘shliq, deyarli rangsiz. Shoshilmaydigan, tinch, kamtar.

QachonMebel, uy-ro‘zg‘or, meditatsiya, hunarmandchilik, mehmon uyi, choy va qahva.
Qachon emasTezkor harakat kerak bo‘lgan joy — bu til hech qachon qichqirmaydi.
TipografikaIngichka sans (300–400), katta line-height. Katta harflar keng tracking bilan.
HarakatJuda sekin, deyarli sezilmaydigan fade. Hech narsa sakramaydi.
Bunday qilmaTo‘yingan rang qo‘shish. Palitra tuproq va yog‘ochdan chiqmasin.
Qo‘lda chizilganExcalidraw · Notekis
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Qiyshiq chiziqlar, notekis radius, qo‘lyozma his. Notekislik “bu hali tugallanmagan, fikringizni ayting” deb aytadi.

QachonDiagramma asboblari, wireframe, ta‘lim, brainstorming, hujjat qoralamasi.
Qachon emasYakuniy mahsulot sahifasi — tugallanmagan va ishonchsiz ko‘rinadi.
TipografikaQo‘lyozma yoki yumaloq sans. Ba‘zan ataylab tekis emas.
HarakatChiziq “chizilishi” (stroke-dashoffset), yengil tebranish.
Bunday qilmaHar elementni qiyshaytirish. Bir-ikki joy yetadi, qolgani tinch tursin.
Kollaj / zinePanklik · DIY
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Kesilgan qog‘oz, ksero tekstura, qiyshiq bloklar, qo‘lda yopishtirilgan his. Nashriyot uskunasi bo‘lmaganlar tili.

QachonMusiqa, san‘at, aktivizm, mustaqil nashr, festival, moda lookbook.
Qachon emasIshonch va aniqlik kerak bo‘lgan joy — tartibsizlik e‘tiborni yeydi.
TipografikaAralash: bir sarlavha grotesk, boshqasi mono, yana biri kesilgan gazetadan.
HarakatBloklar sakrab tushadi, ozgina buriladi. Qattiq va notekis.
Bunday qilmaSimmetriya. Har element bir necha gradus qiyshiq bo‘lsin.
Blueprint / texnik chizmaMuhandislik
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Ko‘k fon, oq panjara, punktir chiziqlar, mono yorliqlar va o‘lchamlar. Mahsulotni muhandislik ishi sifatida ko‘rsatadi.

QachonApparat, ishlab chiqarish, arxitektura, muhandislik asboblari, dev-hujjat.
Qachon emasHissiy yoki lyuks mahsulot — sovuq va texnik chiqadi.
TipografikaMono, katta harflar, keng tracking. Raqamlar va o‘lchamlar ko‘p.
HarakatChiziqlar chiziladi, o‘lchamlar paydo bo‘ladi. Aniq va bosqichli.
Bunday qilmaPanjarani juda zich qilish. 16–24px qadam yetarli, aks holda ko‘z toladi.
Maksimalizm / anti-dizaynOrtiqchalik
NOVAISHLAR · ALOQA

Keling, boshlaymiz.

Bitta kontent — o‘ttiz olti xil yo‘nalish.

Hamma narsa bir vaqtda: to‘qnashuvchi ranglar, aralash shriftlar, ustma-ust qatlamlar. Minimalizmga ochiq isyon.

QachonMadaniy tadbir, moda, musiqa albomi, e‘tibor uchun kurashadigan brend.
Qachon emasVazifa bajariladigan har qanday interfeys. Bu — bayonot, asbob emas.
TipografikaUch-to‘rt xil shrift bir sahifada. Qoidalar ataylab buziladi.
HarakatKo‘p va bir vaqtda. Ortiqchalik — maqsad.
Bunday qilmaYarim yo‘lda to‘xtash. Yarim-maksimalizm shunchaki tartibsiz dizayn.

Buni o'z AI muharriringizga yuklang

Shu katalogdagi bilim — 36 yo'nalish, 110 texnika, 16 blok — Claude Code uchun skill sifatida tayyorlangan. O'rnatgandan keyin “saytga animatsiya qo'sh” yoki “qanaqa uslub tanlay” degan so'rovlarda o'zi ishga tushadi.

1 · Skill sifatida

Yuklab oling, web-design papkasini ~/.claude/skills/ ichiga ko'chiring. Ichida o'zbekcha o'rnatish yo'riqnomasi bor. Mahalliy ishlaydi — tarmoq kerak emas.

web-design-skill.zip ~112 KB
2 · MCP orqali

Hech narsa o'rnatmasdan. Cursor, Zed, ChatGPT va boshqa MCP mijozlari uchun ham xuddi shu manzil.

claude mcp add --transport http \ harakat-katalogi \ https://idea.namozjon.uz/mcp

AI ga aytishning to'g'ri usuli

"Chiroyli animatsiya qil" — natija tasodifiy bo'ladi. Buning o'rniga shu sahifadagi nomlarni ishlat: pinned section, scrubbed, lerp 0.08, staggered split-text reveal, 700ms ease-out. Har bir so'z aniq mexanizmni bildiradi va aynan shu narsa quriladi.

Uchta qoida esda tursin: faqat transform va opacity animatsiya qil (top, left, width — hech qachon); har effektga prefers-reduced-motion hurmati qo'sh; va ko'rinmayotgan animatsiyani to'xtat — bu sahifadagi 110 ta demo ham faqat ekranda ko'ringanda ishlaydi.