Live demonstration

rule.motion.purpose-first

feedback

ads-motion-feedback · dur-fast

feedback

Allowed

buttons
toggles
drag handles

Prohibited

decorative bounce on every hover

Performance

Interruptible; cancel on pointer leave

Reduced motion

Color/border change only

@media (min-width: 68rem) { html .shell[data-sidebar-state="collapsed"] { grid-template-columns: var(--docs-rail) minmax(0, 1fr); } html .shell[data-sidebar-state="collapsed"] .sidebar { padding: var(--space-6) var(--space-5); } html .shell[data-sidebar-state="collapsed"] .rail-heading { flex-direction: row; } html .shell[data-sidebar-state="collapsed"] .brand-lockup > span:last-child { display: flex; } html .shell[data-sidebar-state="collapsed"] .desktop-navigation { display: block; } html .shell[data-sidebar-state="collapsed"] .rail-utilities--desktop { display: flex; } html .shell[data-sidebar-state="collapsed"] .sidebar-toggle { display: none; } }