Task 1b: Rebuild boot sequence and ECG animation

- Refactored BootSequence to config-driven architecture with type-safe line components
- Added cursor position capture and smooth cursor-to-dot morph transition
- Rebuilt ECGAnimation with mask-based text reveal technique
- Implemented connector lines between letters with per-character profiles
- ECG trace now starts from cursor position (no teleport)
- Added prefers-reduced-motion support for both phases
- Updated App.tsx to pass cursor position between components

Quality checks: typecheck ✓, lint ✓, build ✓
This commit is contained in:
2026-02-11 22:54:44 +00:00
parent cfd0283c78
commit 959f0e1842
5 changed files with 661 additions and 140 deletions
+27 -4
View File
@@ -1,4 +1,4 @@
import { useState } from 'react'
import { useState, useCallback } from 'react'
import type { Phase } from './types'
import { BootSequence } from './components/BootSequence'
import { ECGAnimation } from './components/ECGAnimation'
@@ -8,20 +8,43 @@ import { AccessibilityProvider } from './contexts/AccessibilityContext'
function App() {
const [phase, setPhase] = useState<Phase>('boot')
const [cursorPosition, setCursorPosition] = useState<{ x: number; y: number } | null>(null)
const handleBootComplete = useCallback(() => {
setPhase('ecg')
}, [])
const handleCursorPositionReady = useCallback((position: { x: number; y: number }) => {
setCursorPosition(position)
}, [])
const handleECGComplete = useCallback(() => {
setPhase('login')
}, [])
const handleLoginComplete = useCallback(() => {
setPhase('pmr')
}, [])
return (
<AccessibilityProvider>
<div className="min-h-screen bg-black">
{phase === 'boot' && (
<BootSequence onComplete={() => setPhase('ecg')} />
<BootSequence
onComplete={handleBootComplete}
onCursorPositionReady={handleCursorPositionReady}
/>
)}
{phase === 'ecg' && (
<ECGAnimation onComplete={() => setPhase('login')} />
<ECGAnimation
onComplete={handleECGComplete}
startPosition={cursorPosition}
/>
)}
{phase === 'login' && (
<LoginScreen onComplete={() => setPhase('pmr')} />
<LoginScreen onComplete={handleLoginComplete} />
)}
{phase === 'pmr' && <PMRInterface />}