[UI/UX Design] Apply motion tokens to route transitions and hover/press via framer-motion

[1nonlypiece]

[UI/UX Design] Apply motion tokens to route transitions and hover/press via framer-motion

Description

src/utils/motion.ts and design-system/tokens/motion.json define motion values, and framer-motion is a dependency, but route transitions in src/App.tsx and interactive hover/press states are static. This issue applies consistent, reduced-motion-aware transitions across route changes and core interactions.

Requirements and context

• Must be secure, tested, and documented
• Should be efficient and easy to review
• Drive durations/easings from motion.json via src/utils/motion.ts
• Add page-transition wrapper around the Routes in App.tsx
• Respect the global prefers-reduced-motion handling in src/index.css
• Apply hover/press motion to the Button component states

Suggested execution

• Fork the repo and create a branch
• git checkout -b feature/motion-tokens-transitions
• Implement changes
  • Update src/App.tsx, src/utils/motion.ts, and Button
  • Write src/utils/__tests__/motion.test.ts
  • Document motion usage in design-system/documentation
  • Verify reduced-motion disables transitions correctly
• Test and commit
  • Run tests, cover edge cases
  • Include test output and notes

Example commit message

feat: token-driven route and interaction motion

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours