Primitives

Motion

Duration and easing tokens that define how DEW components move. Purposeful, fast, and respectful of accessibility preferences.

Duration

Name	Token	Value	Usage
fast	`--duration-fast`	`100ms`	Micro-interactions, hover states, colour transitions
normal	`--duration-normal`	`200ms`	Appear/disappear, scale, height transitions (default)
slow	`--duration-slow`	`300ms`	Slide-in panels, modals, page transitions
slower	`--duration-slower`	`500ms`	Complex sequences, orchestrated reveals

All curves are defined as CSS cubic-bezier functions. Use the named token, not raw values in component code.

Default

--ease-default

Snappy ease-out. Use for most UI transitions.

--ease-in

Accelerating. Use for exits - elements leaving the screen.

Out

--ease-out

Decelerating. Use for entrances - elements entering the screen.

In-Out

--ease-in-out

Symmetric. Use for layout shifts and position changes.

Spring

--ease-spring

Overshoot bounce. Use sparingly for playful interactions.

Motion has purpose

Every animation should help the user understand what changed and why. Avoid motion for decoration alone.

Enter slowly, exit fast

Elements entering the viewport should ease-out and take a little longer. Exits should be quick - users have already made a decision.

Reduce for accessibility

Wrap non-essential animations in @media (prefers-reduced-motion: reduce). Motion should never obstruct usability.