Live Docs

Navigation

Foundations /

stable

Motion

5 duration tokens + 4 easing curves. Mature, bukan loud. Default smooth, durasi short-to-medium, hindari bounce kecuali playful context.

Duration

Pilih durasi sesuai jarak/perubahan visual.

--duration-instant

0ms

Toggle state tanpa animasi

--duration-fast

120ms

Hover, color shift, button press

--duration-base

200ms

Modal fade, dropdown open

--duration-slow

320ms

Drawer slide, page transition

--duration-slower

480ms

Hero animation, splash

Easing Curves

Smooth = default. Snappy untuk feedback langsung.

--easing-smooth

cubic-bezier(0.32, 0.72, 0, 1)

Default, natural deceleration

--easing-snappy

cubic-bezier(0.4, 0, 0.2, 1)

UI feedback, button, tabs

--easing-linear

linear

Progress bar, infinite loop

--easing-bounce

cubic-bezier(0.68, -0.55, 0.27, 1.55)

Playful overshoot (gunakan hemat)

Prinsip Motion

Konsensus Naraya untuk semua animasi.

Cepat default

120-320ms range. Lebih dari 500ms terasa lambat di workflow.

Smooth lebih sering

Snappy untuk feedback klik, smooth untuk panel/modal/page.

Respect reduced-motion

@media (prefers-reduced-motion: reduce) → durasi=0 atau opacity-only.

Hindari bounce di workflow

Bounce untuk celebration, success splash, onboarding — bukan tabs.

Cara Pakai

/* Transition default */
.my-button {
  transition: background-color var(--duration-fast) var(--easing-snappy);
}

/* Keyframe animation */
.my-modal {
  animation: fade-in var(--duration-base) var(--easing-smooth);
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}