Motion

Duration steps and easing curves that create consistent, purposeful animation. All motion respects prefers-reduced-motion, zeroing durations when the user requests it.

Duration Scale

5 duration steps from instant to slower. Each step roughly doubles the previous.

instant

0ms0–50ms

Ghost text, immediate UI responses

fast

100ms50–150ms

Accept/reject, button feedback

normal

200ms150–300ms

Panel transitions, tab switching

slow

350ms300–500ms

Sheet/drawer slide, accordion

slower

500ms500–2000ms

Ambient markers, scope highlight

Easing Curves

4 easing functions for different motion intents. Each curve communicates a different physical metaphor.

ease-out--motion-easing-ease-out

Default for entering elements. Starts fast, decelerates.

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

ease-in--motion-easing-ease-in

For exiting elements. Starts slow, accelerates.

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

ease-in-out--motion-easing-ease-in-out

Symmetrical. For state changes, position updates.

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

spring--motion-easing-spring

Slight overshoot. For playful feedback, bouncy entrances.

cubic-bezier(0.175, 0.885, 0.32, 1.275)

Interactive Demo

Click Animate to see each duration and easing combination side-by-side. Use Loop for continuous comparison.

fast + ease-out

100ms

Button feedback, icon transitions

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

normal + ease-out

200ms

Panel transitions, tab switching

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

slow + ease-out

350ms

Sheet/drawer slide, accordion

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

slower + ease-in-out

500ms

Scope highlight fade, ambient

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

normal + spring

200ms

Playful feedback, bouncy entrances

cubic-bezier(0.175, 0.885, 0.32, 1.275)

slow + spring

350ms

Card entrance, modal spring

cubic-bezier(0.175, 0.885, 0.32, 1.275)

Timing Reference

Standard timing for common Inkwell interactions. From Inkwell_UI_UX_Concept_Guide.md §6.4.

Action	Timing	Easing	Example
Ghost text / instant UI	0–50ms	none	AI inline suggestion appears
Accept / reject	50–150ms	ease-out	Diff suggestion accepted
Panel / drawer transitions	150–300ms	ease-out	Version history panel slides in
Ambient markers fading	500–2000ms	ease-in-out	Scope highlight fades after skill complete

Reduced Motion

When prefers-reduced-motion: reduce is active, all duration tokens are set to 0ms.

How it works

The @media (prefers-reduced-motion: reduce) block in globals.css overrides all duration tokens to 0ms. Since all transitions reference these variables, every animation is disabled simultaneously. Content changes still occur — only the transition animation is removed. Instant (0ms) stays at 0ms in both modes.