1 · Project Architecture

2 · Advanced State Machine

State Structure

const states = {
    1: { title: "Breakthrough Haptic Technology", image: "state1_static.webp" },
    2: { title: "Precision Engineering", image: "state2_static.webp" },
    3: { title: "Force Distribution", image: "state3-static.webp", hasSubstate: true, currentSubstate: "A" },
    "3B": { title: "Force Distribution", image: "state3b-static.webp", hasSubstate: true, currentSubstate: "B" },
    4: { title: "Scalable Haptic Arrays", image: "state4_static.webp" },
    5: { title: "Sensory Feedback", image: "state5_static.webp" }
};

const animations = {
    "1-2": "state1-to-state2.webm",
    "2-1": "state2-to-state1.webm", 
    "1-4": "state1-to-state4.webm",
    "4-1": "state4-to-state1.webm",
    "2-3": "state2-to-state3.webm",
    "3-2": "state3-to-state2.webm",
    "2-4": "state2-to-state4.webm", 
    "4-2": "state4-to-state2.webm",
    "3-3B": "3Ato3B.webm",
    "3B-3": "3Bto3A.webm"
};

Intelligent Transition Routing

The system automatically routes transitions through intermediate states when direct animations don't exist:

• Direct transitions: Play available WebM animations
• Compound transitions: Route via intermediate state (e.g., 1→3 goes 1→2→3)
• Substate handling: State 3B always routes through 3A before going elsewhere
• Graceful fallbacks: Instant image swaps when animations fail

Current State Graph

stateDiagram-v2
    [*] --> S1 : page load
    S1 --> S2 : direct animation
    S1 --> S4 : direct animation  
    S2 --> S1 : direct animation
    S2 --> S3 : direct animation
    S2 --> S4 : direct animation
    S3 --> S2 : direct animation
    S3 --> S3B : substate toggle
    S3B --> S3 : substate toggle
    S3B --> S2 : via S3 (compound)
    S4 --> S1 : direct animation
    S4 --> S2 : direct animation
    S1 --> S3 : via S2 (compound)
    S3 --> S1 : via S2 (compound)
    S1 --> S5 : via S2→S4 (compound)
    S3 --> S4 : via S2 (compound)
    S4 --> S5 : planned
    S5 --> S4 : planned
    

3 · Core Functions

Compound Transition Flow

sequenceDiagram
    participant UI as Nav Click
    participant TM as transitionToState()
    participant CT as performCompoundTransition()
    participant V1 as Video 1→2
    participant V2 as Video 2→3
    participant IMG as Final Image
    
    UI->>TM: click state 3 (from state 1)
    TM->>TM: check: no direct "1-3" animation
    TM->>CT: route via state 2
    CT->>V1: play "1-2.webm"
    V1-->>CT: ended
    Note over CT: 100ms pause
    CT->>V2: play "2-3.webm" 
    V2-->>CT: ended
    CT->>IMG: load state 3 image
    CT-->>TM: compound transition complete
    TM->>TM: update content & nav
    

4 · User Interface

Navigation Bar

• Position: Sticky bottom bar (mobile-first design)
• Icons: FontAwesome + custom SVG icons for each state
• Active State: Highlighted with underline accent
• Substate Handling: State 3B highlights the State 3 nav item

State 3 Switch Button

When in state 3 or 3B, a "Switch" button appears that toggles between the two perspectives using dedicated transition animations.

Responsive Layout

• Desktop: Grid layout with sticky visual content
• Mobile: Single column, visual above text content
• Media Container: Square aspect ratio using vh units

5 · Extension Guide

Adding a New Primary State

1. Add static image: assets/animations/state-static/stateN_static.webp
2. Update states object with new entry
3. Create transition animations and add to animations object
4. Add navigation icon to HTML and update CSS selectors

Adding Substates (like 3B)

1. Add hasSubstate: true and currentSubstate to parent state
2. Create new state entry with string key (e.g., "3B")
3. Add toggle animations to animations object
4. The switch button will appear automatically

Adding New Transition Paths

If direct animation doesn't exist, the system will automatically route through the most logical intermediate state (usually state 2). To add custom routing:

// In performCompoundTransition(), add custom routing logic
if (currentState === 4 && targetState === 3) {
    await performCompoundTransition(currentState, 2, targetState);
}

Performance Optimizations

• Video Compression: Target 1-2MB per WebM file
• CDN Hosting: Move assets to Cloudflare R2 for global edge caching
• Lazy Loading: Load animations only when approaching that transition
• Format Fallbacks: Add MP4 versions for older browser support

6 · Debugging & Troubleshooting

Common Issues

Debug Console Output

The system logs transition paths:

// Normal direct transition
"Playing direct transition: 1 → 2"

// Compound transition  
"Using compound transition: 1 → 2 → 3"
"First leg complete: 1 → 2"
"Second leg complete: 2 → 3"

// Substate toggle
"Toggling state 3 substate: A → B"

7 · Technical Specifications

---

For implementation questions or feature requests, contact the development team or open an issue in the repository.