Task 2 & 3: Set up project structure and build BootSequence component

- Task 2: Project structure and types already complete from Task 1
- Task 3: Create BootSequence component with Framer Motion
  - 14 boot lines with 220ms staggered delays
  - Terminal typing animation with opacity/translateY transitions
  - Blinking cursor using CSS animation
  - AnimatePresence for 800ms exit fade
  - Total boot time ~4.28s matching concept.html
- Update App.tsx to use BootSequence with phase transitions
This commit is contained in:
2026-02-10 15:59:44 +00:00
parent 17ffd237a2
commit 77c03144a9
4 changed files with 123 additions and 6 deletions
+8 -4
View File
@@ -1,5 +1,6 @@
import { useState } from 'react'
import type { Phase } from './types'
import { BootSequence } from './components/BootSequence'
function App() {
const [phase, setPhase] = useState<Phase>('boot')
@@ -7,13 +8,16 @@ function App() {
return (
<div className="min-h-screen bg-white">
{phase === 'boot' && (
<div className="fixed inset-0 bg-black flex flex-col justify-center p-10 font-mono text-sm">
<div className="text-ecg-green">CLINICAL TERMINAL v3.2.1</div>
<BootSequence onComplete={() => setPhase('ecg')} />
)}
{phase === 'ecg' && (
<div className="fixed inset-0 bg-black flex flex-col justify-center items-center">
<button
onClick={() => setPhase('content')}
className="mt-8 text-ecg-cyan hover:text-ecg-green transition-colors"
className="text-ecg-green font-mono hover:opacity-80 transition-opacity"
>
Press to skip boot sequence (placeholder)
ECG Animation (placeholder - click to continue)
</button>
</div>
)}