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, icon transitions

normal

200ms150–300ms

Panel transitions, tab switching

slow

350ms300–500ms

Sheet/drawer slide, accordion expand

slower

500ms500–2000ms

Ambient markers fading, scope highlight fade-out

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

Hover or click the trigger button to see each duration and easing combination in action.

fast + ease-out

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

normal + ease-out

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

slow + ease-out

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

slower + ease-in-out

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

normal + spring

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

slow + spring

350ms 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 \u00a76.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. Content changes still occur \u2014 only animation is removed.

How it works

The @media (prefers-reduced-motion: reduce) block in globals.css overrides --motion-duration-fast through --motion-duration-slower to 0ms. Since all transitions reference these variables, every animation is disabled simultaneously. Instant (0ms) stays at 0ms in both modes \u2014 it's already instantaneous.