Foundations — Motion Tokens
Süre ve easing token'ları. Tıkla → fill animasyonu o token ile oynar. Varsayılan UI hareketi fast + standard birleşimidir.
Durations
--nb-duration-instant
75ms
Mikro feedback (ikon swap, checkbox tick)
--nb-duration-fast
150ms · default
Hover, color swap, focus ring giriş
--nb-duration-base
200ms
Dropdown, popover, tooltip
--nb-duration-slow
300ms
Modal in/out, drawer, sidebar slide
--nb-duration-entrance
700ms · only for hero / first-paint reveal
Marketing fadeIn / fadeUp (translateY 16→0). Hiçbir UI etkileşimi 700ms hissedilmemeli.
Easing curves
standard
cubic-bezier(.2,0,0,1) · default UI
emphasized
cubic-bezier(.2,0,.05,1) · hero entrance
decelerate
cubic-bezier(0,0,.2,1) · giriş (enter)
accelerate
cubic-bezier(.4,0,1,1) · çıkış (exit)
Kural. UI hareketi --nb-duration-fast + --nb-ease-standard ile başlar. Modal/drawer gibi büyük yüzey değişimleri --nb-duration-slow; mikro feedback --nb-duration-instant. Sayfa girişi --nb-duration-entrance. prefers-reduced-motion aktifse tüm süreler 0.01ms'e indirilir.