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:
2026-02-11 03:22:29 +00:00
parent ef5bc9c3a6
commit 06ebef80c1
4 changed files with 112 additions and 25 deletions
+26
View File
@@ -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)