Skip to content

feat(design-system): add motion duration and easing tokens - #478

Merged
IbrahimIjai merged 1 commit into
SO4-Markets:mainfrom
dev-susa:feat/397-motion-duration-easing-tokens
Jul 29, 2026
Merged

feat(design-system): add motion duration and easing tokens#478
IbrahimIjai merged 1 commit into
SO4-Markets:mainfrom
dev-susa:feat/397-motion-duration-easing-tokens

Conversation

@dev-susa

Copy link
Copy Markdown
Contributor

Summary

Implements DS-010: Add motion duration and easing tokens (#397)

Standardizes timing and easing for micro-interactions, UI transitions, and page-level animations while ensuring proper accessibility support for users with motion sensitivity.

Changes

  • ✅ Defined duration tokens: fast (150ms), normal (250ms), slow (400ms)
  • ✅ Defined easing tokens: ease-smooth (cubic-bezier), ease-bounce (playful bounce)
  • ✅ Updated landing page pulse animations to consume new tokens
  • ✅ Implemented prefers-reduced-motion media query to disable non-essential animations
  • ✅ Preserved focus and state change transitions for accessibility
  • ✅ Documented usage patterns for each token

Duration Token Usage

  • fast (150ms): Micro-interactions (hover states, focus rings, tooltips)
  • normal (250ms): Standard UI transitions (dropdowns, modals, tab switches)
  • slow (400ms): Page-level animations (drawer slides, route transitions)

Easing Token Usage

  • ease-smooth: General purpose cubic-bezier for most UI transitions
  • ease-bounce: Playful bounce effect for attention-grabbing elements

Accessibility

  • prefers-reduced-motion: reduce disables decorative animations
  • ✅ Focus indicators and state changes maintain timing for understandability
  • ✅ Critical UI feedback remains accessible without animation

Testing

  • ✅ Skeleton component tests pass
  • ✅ Landing page animations render correctly
  • ✅ Reduced motion respects user preferences

Acceptance Criteria

  • Fast, normal, and slow duration tokens and two easing tokens exist
  • Existing landing animations consume the tokens where applicable
  • prefers-reduced-motion disables non-essential motion
  • Focus and state changes remain understandable without animation

Closes #397

…4-Markets#397)

- Define fast (150ms), normal (250ms), and slow (400ms) duration tokens
- Add ease-smooth and ease-bounce easing function tokens
- Document usage for micro-interactions, UI transitions, and page animations
- Update landing page pulse animations to consume duration/easing tokens
- Implement prefers-reduced-motion to disable non-essential animations
- Preserve focus and state change transitions for accessibility

Implements DS-010 acceptance criteria:
✓ Fast, normal, and slow duration tokens and two easing tokens exist
✓ Existing landing animations consume the tokens where applicable
✓ prefers-reduced-motion disables non-essential motion
✓ Focus and state changes remain understandable without animation
@vercel

vercel Bot commented Jul 29, 2026

Copy link
Copy Markdown

@dev-susa is attempting to deploy a commit to the Ijai's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave

drips-wave Bot commented Jul 29, 2026

Copy link
Copy Markdown

@dev-susa Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@IbrahimIjai
IbrahimIjai merged commit 649d925 into SO4-Markets:main Jul 29, 2026
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

DS-010: Add motion duration and easing tokens

2 participants