🗺️ NEW INTERACTION MODEL

Visual Knowledge Explorer

An infinite-canvas interface for exploring visual knowledge spaces. Start with one focused image, zoom out to discover related visuals, pan to explore, and click to focus on new images.

Status: Prototype (new interaction model testing)

Impact: Completely isolated—main lesson remains untouched

Goal: Create a map-like experience for visual exploration

🎯 Interaction Model

  • ✓ Zoom in/out with +/- buttons or scroll wheel
  • ✓ Pinch to zoom on mobile
  • ✓ Drag to pan when zoomed out
  • ✓ Click any image to focus and explore from there

🏗️ Architecture

  • ✓ Provider-agnostic image source layer
  • ✓ Openverse + Meemor cache supported
  • ✓ Quality filtering built in
  • ✓ Extensible for future providers

⚠️ Important: Safety First

  • ✓ This is a completely isolated prototype
  • ✓ Main lesson visual cards are untouched
  • ✓ If explorer fails, lesson still renders normally
  • ✓ Text always loads first, images are optional
  • ✓ No page-blocking operations

Try the Explorer

Select a Topic

📍 Exploring: Elephant

African and Asian elephants

How to use: Use +/- buttons or scroll to zoom, drag to pan, click images to focus.

Visual Explorer

Focused

Loading visual explorer...

💡 Testing Checklist

  • □Desktop: Click +/- buttons to zoom, use scroll wheel, drag to pan
  • □Mobile: Pinch to zoom, drag to pan, tap images to focus
  • □Interaction: Explorer feels smooth and responsive
  • □Fallback: If explorer breaks, lesson text still renders
  • □Different Topics: Switch topics and verify smooth transitions

🏗️ Architecture

Components: VisualKnowledgeExplorer (main), VisualKnowledgeExplorerPage (test)

Provider Registry: visualProviderRegistry.ts (abstraction layer)

Providers: openverseProvider.ts, meemoCacheProvider.ts

Interaction: Zoom (0-100%), Pan (x,y), Click to focus

Layout: Infinite-canvas with CSS transforms for smooth animation

📋 Technical Approach

✓ Provider Abstraction: Providers implement common interface (search, getImage)

✓ Infinite Canvas: CSS transforms for smooth zoom/pan, no page reflow

✓ Lazy Loading: Images load as needed when viewport expands

✓ Gesture Support: Pinch zoom, drag pan, scroll wheel zoom

✓ Quality Filtering: Hard rejects (memes, logos, text-heavy, low-quality)

✓ Mobile First: Touch-native interactions, button fallbacks

🚀 Next Steps

  • ✓ Wire up provider registry with real image retrieval
  • ✓ Implement infinite-canvas spatial positioning algorithm
  • ✓ Test gesture handling on mobile devices
  • ✓ Gather feedback before integrating into lesson flow
  • ✓ Add support for diagrams, illustrations, and other visual types