← Cycles
Qmap · c13

State Transition

archivedcreated 2026-03-23· last activity 2026-08-15

New in this cycle: Three coexisting view modes — topology, group-by-tag, geography

Goal

Explore animated transitions when data changes at runtime — actors entering, exiting, and moving between positions as filters are applied.

What's New

  • SceneReconciler — pure diff engine that compares current scene against a new layout and produces a transition plan (enter/exit/move for actors, rugs, and flows)
  • TransitionOrchestrator — phased animation sequencer that executes transition plans in 4 phases: EXIT → RUG RESHAPE → MOVE → ENTER, with staggered animations
  • Transition scenarios — sequential filter snapshots simulating live data changes (progressive filter, scaling events, regrouping)
  • useTransitionPlayer — composable wiring scenarios to reconciler + orchestrator with play/pause/step controls

Architecture

New data (filtered actors + groupBy)
    │
    ▼
LayoutEngine (unchanged, pure)
    │
    ▼
SceneReconciler.diff() → TransitionPlan
    │
    ▼
TransitionOrchestrator.execute(plan)
    │
    ▼
Phased animations (EXIT 300ms → RUG 400ms → MOVE 500ms → ENTER 300ms)

Key Decisions

  • Incremental update over clear+redraw — filter changes typically add/remove a few actors, full rebuild would be jarring
  • Reconciliation pattern — layout engine stays pure, diff logic is a separate layer
  • Staggered animations — max 15 concurrent, 30ms stagger delay, capped per phase
  • BaseMesh tweens reused for scale/opacity (battle-tested), animateValue() for position (new)

Built From

C11: Grid Layout — the layout engine, entity system, and composable architecture carry forward unchanged.

Visual record

9 captures — heroes, page slices, and full-page renders. Click to view.

Topology mode (default)
Topology mode (default)
Geography mode — actors on the map
Geography mode — actors on the map
Group mode at default tags
Group mode at default tags
Group mode from above
Group mode from above
Topology from above
Topology from above
Region Migration dataset mid-transition
Region Migration dataset mid-transition
Scale Storm dataset in geography mode
Scale Storm dataset in geography mode
Scale Storm grouped — 200 actors in tag rugs
Scale Storm grouped — 200 actors in tag rugs
c13 legacy

Artifacts

/experiments/c13.group-mode/ (local dev)

Qpoint Brand Style Guide