Foundations

Motion

Six durations, four easings. Every transition reads from these so the kit speaks one motion language.

Durations

--supa-duration-instant60msTap feedback, button press

--supa-duration-quick120msTooltip, hover, focus

--supa-duration-base200msPopover, accordion, tabs

--supa-duration-slow280msDialog, sheet, drawer

--supa-duration-story480msMarketing, decrypt text, hero

--supa-duration-epic720msEditorial transitions

Easings

--supa-ease-out

cubic-bezier(0.2, 0.8, 0.2, 1)Default for entrances + hovers

--supa-ease-in-out

cubic-bezier(0.4, 0, 0.2, 1)Sliding panels, drawers

--supa-ease-spring

cubic-bezier(0.34, 1.56, 0.64, 1)Switch snap, chip selection

--supa-ease-pixel

steps(4, end)Skeleton, glyph rotate

Reduced motion

@media (prefers-reduced-motion: reduce) drops every transition to 0ms and reduces animation iteration to one cycle. Reach for --supa-ease-pixel when you need motion that still reads at the lowest setting — stepped pixel motion stays visible without continuous interpolation.