feat(pmr): add interface materialization animations
- Login card fades out with scale animation (200ms) - Patient banner slides down from top (200ms) - Sidebar slides in from left (250ms, 50ms delay) - Main content fades in (300ms, 150ms delay) - Mobile nav slides up (200ms) - All animations respect prefers-reduced-motion - Mark Task 15 complete in IMPLEMENTATION_PLAN.md
This commit is contained in:
@@ -457,3 +457,29 @@ This is a complete redesign of the CV presentation, moving from the ECG animatio
|
||||
- isTablet/isMobile props passed from PMRInterface down to components
|
||||
- useBreakpoint hook avoids resize event listener thrashing with proper cleanup
|
||||
- Mobile overflow menu for banner actions reduces clutter on small screens
|
||||
|
||||
### Iteration 15 — Task 15: Final integration, testing, and polish
|
||||
- **Completed**: Task 15 - Final integration with interface materialization animations
|
||||
- **Files modified**:
|
||||
- `src/components/LoginScreen.tsx` - Added fade-out animation (scale 103%, fade 200ms) before transitioning to PMR
|
||||
- `src/components/PMRInterface.tsx` - Added entrance animations for all UI elements with proper timing
|
||||
- **Changes made**:
|
||||
- Login card now animates out with scale + fade before PMR interface appears
|
||||
- Patient banner slides down from top (200ms, ease-out)
|
||||
- Sidebar slides in from left (250ms, ease-out, 50ms delay)
|
||||
- Main content fades in (300ms, 150ms delay)
|
||||
- Mobile bottom nav slides up (200ms, ease-out)
|
||||
- All animations respect `prefers-reduced-motion`: instant appearance with zero duration
|
||||
- **Design decisions**:
|
||||
- Used framer motion for all entrance animations
|
||||
- Animation timings match design spec exactly
|
||||
- Reduced motion users see instant transitions (no animations)
|
||||
- Variants defined with useMemo to prevent recreation on every render
|
||||
- **Known limitations**:
|
||||
- Search only filters navigation items, not content across all sections (fuse.js not implemented)
|
||||
- This was a deliberate scope decision from Iteration 5 - can enhance later
|
||||
- **Quality checks**: `npm run typecheck` ✓, `npm run lint` ✓ (1 pre-existing warning), `npm run build` ✓
|
||||
- **Learnings**:
|
||||
- framer motion Variants type works well with useMemo for conditional reduced motion support
|
||||
- Empty object `{}` in hidden state for reduced motion prevents any animation
|
||||
- Login animation timing: ~1.2s (username 350ms + password 160ms + pauses 300ms + exit 200ms)
|
||||
|
||||
Reference in New Issue
Block a user