Motion

Subtle, fast motion keeps the product feeling responsive without distraction. Prefer CSS variables in globals.css.

Durations

• --co-duration-fast — 150ms (hovers, copy feedback)
• --co-duration — 200ms (dialogs, popovers)
• --co-duration-slow — 250ms (page enter)

Easing

--co-ease-out — cubic-bezier(0.16, 1, 0.3, 1) for exits that feel snappy.

Patterns

• Page — .co-page-enter fade + 6px slide up.
• Modal — overlay fade + content scale-in.
• Buttons — active:scale-[0.98], hover shadow bump.
• Online dot — soft pulse on healthy devices.
• Copy success — check pop keyframe on code blocks.

Don’t

• Avoid bouncy springs on dense data tables.
• Respect prefers-reduced-motion in future iterations.