Files
portfolio/4-vitals-monitor.html
T
admin 80ff51a1ee Task 3: Build second and third heartbeats with overflow branching
- Second heartbeat: R peak 60px, color shifts green→teal (#00C9A7), bg lightens to #0A0A0A
- Third heartbeat: R peak 100px, full teal (#00897B), bg lightens to #141414
- Overflow branching from third R peak apex: 7 SVG branch paths trace UI outlines
  - Branch 1: pill nav bar rounded rectangle at top center
  - Branches 2-3: hero section left/right edges
  - Branches 4-7: four vital sign card outlines
- Branches staggered by 50-150ms with cubic-bezier easing (800ms draw)
- Background transitions rapidly from near-black to white during branching
- All SVG lines fade out over 500ms, overlays removed from DOM, CV content revealed
- Glow filter dynamically matched to stroke color (green→teal)
- Total animation timing ~8.5s (within 8-9s guardrail)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-09 10:41:46 +00:00

18 KiB