GNI Interactive Framework · v1.0

Interactive Visualisations

Canvas 2D scenes embedded in articles with a single <div> and one <script> tag. Data and rendering are separated — scientists and editors can update constants and component data without touching renderer code.

2 Live Scenes
47 Hotspot Nodes
3 Themes
0 Build Steps

Available Scenes

Scene 01

Fine-Tuning Control Room

25 Constants 3 Rings Gold-Cosmic Canvas 2D
Embed snippet 
<div id="fine-tuning-viz" style="height:560px"></div>
<script type="module">
  import { GNIInteractive } from '/interactive/index.js';
  GNIInteractive.mount({
    scene:     'fine-tuning',
    container: '#fine-tuning-viz',
    theme:     'gold-cosmic',
  });
</script>

25 physical constants plotted as dial nodes across 3 concentric rings. Click any node for viability range, physical significance, and article link. Data in scenes/fine-tuning/constants.data.js.

View in article
Scene 02

Bacterial Flagellum Motor

22 Components 4 Layers Bio-Green Live Rotor
Embed snippet 
<div id="flagellum-viz" style="height:560px"></div>
<script type="module">
  import { GNIInteractive } from '/interactive/index.js';
  GNIInteractive.mount({
    scene:     'flagellum',
    container: '#flagellum-viz',
    theme:     'bio-green',
  });
</script>

Architecture Notes

No Build Step
All files are plain ES modules served directly. TypeScript source is kept alongside for reference but .js files are what browsers load.
Data / Render Separation
constants.data.js and flagellum.parts.js are pure data. Renderers import from them. Pass dataUrl to override with a JSON file at runtime.
Adaptive Performance
PerformanceManager monitors rolling FPS and auto-downgrades quality tier (high→medium→low) when sustained FPS drops below 25.
Accessibility First
Tab cycles hotspots. SR-only list of all nodes. ARIA live region for announcements. Skip link. Pause/glow/reset toolbar. prefers-reduced-motion respected.
Analytics Zero-Cost
Runtime-checked window.gtag and window.plausible calls. No import. No bundle impact. Custom onEvent callback also available.
Adding a Scene
Implement BaseScene, add an entry to SCENE_REGISTRY in index.js, create companion CSS. See AUTHORING-GUIDE.md §12.