feat: phase 3+4 timeline animation + education entities

- Add education entities (A-Levels, MPharm) to constellation data
- Add 'education' node type with dashed border styling
- Create useTimelineAnimation hook with rAF scheduler + state machine
  (IDLE → PLAYING → PAUSED → HOLDING → RESETTING → loop)
- Chronological reveal: entities oldest-first with skill stagger,
  link draw-on, reinforcement pulse for already-visible skills
- Year indicator overlay (monospace, top-left)
- Multiplicative opacity: animation visibility × highlight emphasis
- Highlight system respects visibleNodeIdsRef (unrevealed stay hidden)
- Interaction pause/resume wired to animation hook
- Play/pause button (bottom-right, larger touch target on mobile)
- prefers-reduced-motion: shows final state immediately, no animation
- Remove Phase 2 entry animation (replaced by timeline animation)
This commit is contained in:
2026-02-16 14:31:11 +00:00
parent 7d7628c8a7
commit 8b674ffe14
10 changed files with 675 additions and 171 deletions
+14
View File
@@ -39,6 +39,20 @@ export const ENTRY_ROLE_DURATION_MS = 300
export const ENTRY_SKILL_STAGGER_MS = 30
export const ENTRY_SKILL_DURATION_MS = 250
// Timeline animation
export const ANIM_ENTITY_REVEAL_MS = 600
export const ANIM_SKILL_REVEAL_MS = 350
export const ANIM_SKILL_STAGGER_MS = 60
export const ANIM_LINK_DRAW_MS = 300
export const ANIM_LINK_STAGGER_MS = 40
export const ANIM_REINFORCEMENT_MS = 350
export const ANIM_STEP_GAP_MS = 400
export const ANIM_HOLD_MS = 3000
export const ANIM_RESET_MS = 400
export const ANIM_RESTART_DELAY_MS = 200
export const ANIM_INTERACTION_RESUME_MS = 800
export const ANIM_SETTLE_ALPHA = 0.05
// Domain color map
export const DOMAIN_COLOR_MAP: Record<string, string> = {
clinical: '#059669',