OVERVIEW

Convergence Protocol - Layered Content System

Overview

The Layered Content System is the core interaction architecture for the Convergence Protocol experience. It implements a progressive revelation mechanic where users discover cross-cultural parallels through engagement.

Architecture

4-Layer Content Structure

Each concept contains 4 layers of increasing depth:

1. Surface (Layer 0) - Title/Symbol
   • Visible immediately
   • Creates intrigue and sets theme
2. Context (Layer 1) - Cultural Background
   • Unlocks after 3+ second hover
   • Reveals origin and brief explanation
3. Parallel (Layer 2) - Cross-Cultural Comparison
   • Unlocks on click (investigation)
   • Shows side-by-side comparison
   • Triggers comparison modal
4. Full (Layer 3) - Complete Explanation
   • Unlocks on second click (mastery)
   • Deep dive into cultural significance
   • Celebration animation

File Structure

~/Public/convergence-protocol/
├── index.html              # Main entry point
├── css/
│   └── layeredContent.css  # Progressive reveal animations
├── js/
│   └── layeredContent.js   # Core interaction system
├── data/
│   └── concepts.json       # Content for all 40 concepts
└── README.md               # This file

Adding New Concepts

Step 1: Use the Template

Copy the template object from data/concepts.json:

{
  "id": "unique-identifier",
  "surface": {
    "title": "Concept Title",
    "symbol": "🔮"
  },
  "context": {
    "origin": "Cultural Origin",
    "brief": "Brief description",
    "english": "English cultural context",
    "chinese": "Chinese cultural context"
  },
  "parallel": {
    "english": "English expression",
    "chinese": "Chinese expression (中文)",
    "preview": "Teaser for parallel discovery",
    "synthesis": "Comparative analysis",
    "connections": [
      {
        "targetOffset": 0,
        "similarity": 0.8,
        "label": "Connection type"
      }
    ]
  },
  "full": {
    "explanation": "Complete explanation"
  },
  "hints": [
    "Hint 1: Vague pointer",
    "Hint 2: Cultural reference",
    "Hint 3: Direct parallel",
    "Hint 4: Full explanation"
  ]
}

Step 2: Fill in Content

Surface Layer:

• Choose a clear, intriguing title
• Select an appropriate emoji symbol

Context Layer:

• Research the origin of both expressions
• Write brief, engaging descriptions
• Include cultural background for both languages

Parallel Layer:

• Find the closest equivalent in each language
• Write a synthesis that compares them
• Define connection points for visual lines

Full Layer:

• Write 2-3 paragraphs explaining deeper significance
• Highlight cultural differences in approach
• Connect to broader philosophical themes

Hints:

• Hint 1: Abstract, poetic pointer
• Hint 2: Cultural/historical reference
• Hint 3: Nearly gives it away
• Hint 4: Direct translation or explanation

Step 3: Add to concepts.json

Append your new concept to the concepts array in data/concepts.json.

Step 4: Update Metadata

Increment the implemented count in the metadata section:

"metadata": {
  "totalConcepts": 40,
  "implemented": 6,  // Update this
  ...
}

Unlock Mechanics

Time-Based (Hover)

• User hovers over concept card for 3+ seconds
• Triggers Context layer reveal
• Visual ripple effect indicates unlock

Click-Based (Investigation)

• First click after Context unlock reveals Parallel layer
• Opens comparison modal with side-by-side view
• Connection lines animate between related concepts

Completion-Based (Mastery)

• Second click reveals Full layer
• Particle celebration animation
• Mastery badge appears
• Progress saved to localStorage

Comparison-Based (Synthesis)

• Viewing multiple concepts unlocks synthesis view
• Deeper connections between concepts become visible
• “Cave wall” shows collective annotations

User Annotation System

Users can leave “marks on the cave wall”:

1. Click the ✎ button on any concept
2. Write insight or discovery
3. Mark appears as glowing dot on the card
4. Other users can upvote helpful annotations
5. Threaded discussions on complex concepts

Annotations persist in localStorage and appear as visual marks on concept cards.

Hints System

Each concept has 4 progressive hints:

1. Vague Pointer - Poetic, abstract clue
2. Cultural Reference - Historical/philosophical context
3. Direct Parallel - Nearly explicit comparison
4. Full Explanation - Complete answer

Click the ? button to reveal hints one at a time.

Styling Guide

Color Palette

• --surface-color: #c9b99a - Lightest, surface layer
• --context-color: #b8a88a - Context layer
• --parallel-color: #a79779 - Parallel layer
• --full-color: #968668 - Darkest, full layer
• --glow-color: #d4af37 - Accent/highlight

Animations

• Reveal: 600ms cubic-bezier(0.4, 0, 0.2, 1)
• Hover delay: 3000ms for context unlock
• Mastery celebration: Particle burst + glow pulse

Responsive Breakpoints

• Mobile: < 768px (single column, simplified comparison)
• Tablet: 768px - 1024px (2 columns)
• Desktop: > 1024px (3+ columns, full comparison modal)

Local Development

To test locally:

cd ~/Public/convergence-protocol
python3 -m http.server 8000

Then open http://localhost:8000 in your browser.

Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Mobile Safari/Chrome

Future Enhancements

• Server-side annotation persistence
• Audio narration for each layer
• Achievement system for mastery
• Social sharing of discoveries
• Dark/light theme toggle
• Accessibility improvements (screen reader support)

License

Part of the Convergence Protocol project.