Interactive Demonstrations as CT Teaching

Five demos that bridge System 2 reading and System 1 intuition

Applied CT·Pedagogy + UB Rules

A7A9A10B3B6UB-2UB-5

THE INSIGHT

The current site TELLS the reader that coherence must exceed cost. But the reader's System 1 (intuition, pattern recognition) is idle. Each demo produces a bridge moment where the reader thinks “oh, THAT is what that means” before finishing the explanation.

H_min is not implementation complexity (B_cx). It is B_leak at the concept-to-intuition boundary: the risk the demo shows something interesting but the reader fails to connect it to the CT concept.

Placement Strategy

Inline, not separate — demos embedded where concepts are introduced

Demos are NOT on a separate /demos page. They are inline — embedded directly into the theory page at the exact point where the concept is introduced. Progressive disclosure (UB-7): text first, then interaction.

Nine concepts, but five demos. Some concepts combine naturally. This respects UB-2 (max 4 competing elements per viewport) and keeps the implementation surface manageable.

The Five Demos

Selection Playground

Selection Inequality + Three Budgets + SEP

A 2D plane where X = Total Budget, Y = Coherence. A diagonal selection boundary divides surviving patterns (above) from dying ones (below). Draggable dots + three λ sliders rotate the boundary.

THE AHA “Changing the environment kills patterns that were surviving. A recession is just λ_th going up.”

Organism Builder

Six Elements (toggleable)

A hexagonal organism with six toggle buttons. Each element fills a zone when toggled on. Coherence bar fills non-linearly (binder contributes most). Leakage toggle is permanently disabled (A9).

THE AHA “The minimum viable organism is scaffold + binder. Leakage cannot be turned off — that checkbox is grayed out.”

Editor Blindspot Simulator

Hidden Editor Opacity + Poke Asymmetry

A dark field with appearing dots (pokes). A mouse-controlled spotlight catches pokes inside it. The spotlight has FIXED radius — the reader literally cannot catch everything. After 15 seconds, blue dots (outgoing pokes / undiscovered capabilities) appear at the edges.

THE AHA “I completely ignored the blue dots because I was busy with the red ones. That is EXACTLY what happens with product features.”

Root Forest

Multi-Root Resilience (T2) + Organism Tilt (T3)

Roots grow from a seed point. Mode 1 (single root) catches fewer pokes. Mode 2 (three roots at different angles) catches more. A “Root Strength” slider shows how a dominant root tilts the organism, recreating single-root vulnerability.

THE AHA “Three imperfect attempts beat one optimized attempt. The SPREAD matters more than the PRECISION.”

Domain Mosaic

Polycrystalline Structure

A honeycomb grid of hexagonal tiles. Click to rotate any tile's orientation by π/6. Borders between misaligned tiles thicken. Live readout shows τ = λ_leak · sin²(Δθ).

THE AHA “Adoption friction is literally the border thickness. Small deviations are almost free. 90-degree misalignment is maximally expensive.”

Implementation Surface

Demo	Technology	Lines	Dependencies
Selection Playground	SVG	~180	None
Organism Builder	SVG + CSS	~150	None
Editor Blindspot	Canvas	~190	None
Root Forest	SVG + CSS	~180	None
Domain Mosaic	SVG + CSS	~160	None

Total: ~860 lines, zero external dependencies, fully client-side, zero API calls, zero database requirements.

Falsifiable Predictions

Pedagogy

P1: Interaction Time

If the Selection Playground is correctly designed, a first-time visitor will spend at least 20 seconds interacting with it before scrolling past.

CONFIRMS IF

20+ seconds on Selection Playground before scrolling past

FALSIFIES IF

Visitors scroll past without interacting

Pedagogy

P2: Concept Retention

Readers who interact with the Organism Builder will name all six elements when prompted at a higher rate than readers of the text-only version.

CONFIRMS IF

Organism Builder users name all six elements at higher rates

FALSIFIES IF

No retention difference between interactive and text-only readers

P3: Failure Mode

If the demos fail, they will fail because the visual metaphor does not map to the reader's own experience. High play time but low conversion = bridge text needs strengthening.

CONFIRMS IF

High interaction time but low conversion to CT Analyst tool

FALSIFIES IF

Interaction time correlates with conversion

Source: CT_ANALYSIS_INTERACTIVE_DEMOS.md · Joint CT + UB analysis of five interactive demonstrations for ct.hivekit.ai.