Reactive Store Blueprint & 3D Scene Synchronization

Designing unified reactive store properties (store.properties), state categories, and bidirectional synchronization with 3D shaders and meshes.
Published: 7/10/2026

The Aircada Reactive Store acts as the central state synchronization bus connecting React UI overlay inputs, TypeScript @Operator scene mutators, and @System singleton managers.

Store properties are strongly typed (string, number, boolean, color, choice) and organized into functional categories: Visual State (finishes, colors, textures), Dimensional State (sizing, scale), Commercial State (price total, currency), and Personalization State (engraving text, monogram toggle).

When a user toggles a switch in React, useAirStore updates the property value, immediately notifying listening @Operator classes to mutate 3D materials or meshes in the same animation frame.

  • Strongly Typed Keys: Every reactive state key has an explicit type (string, boolean, number, color) and safe initial value.
  • Functional Categorization: Group properties by category (VISUAL, DIMENSIONAL, COMMERCIAL, PERSONALIZATION) for clean architecture.
  • Automatic Store Synthesis: UI input storePropertyKey bindings automatically synthesize corresponding store properties during auto-healing.
  • Twin-Proxy Reactive Sync: Guarantees zero lag between 2D UI touch events and 3D WebGL material updates.