Operational Topology Framework

Operational Topology Framework

OTF models a site, product, or knowledge system as a persistent operational world with entities, relationships, layouts, camera, inspector, signals, and themes.

Persistent world modelAxial grid and cell-based occupancyDeterministic layout familiesInspector-led exploration

Framework model

Components

World

The persistent operational space that stays stable while the viewport and camera change.

Grid

The axial spatial substrate where coordinates, cells, and layout contracts are expressed.

Entities

The items that occupy cells and become the visible nodes, anchors, or content points.

Relationships

The links between entities, including connector routing such as straight, axial, and obstacle-aware paths.

Signals

Transient cues for origin, movement, broadcast, reception, and resolution states.

Camera

The observation layer that focuses the same world differently on desktop, tablet, and mobile.

Inspector

The human-readable detail layer that explains the currently focused entity or layout state.

Themes

Semantic color and contrast systems that let one topology express different visual modes.

Presets

Reusable scene and layout configurations for simulations, demos, and production pages.

Layouts

Deterministic spatial contracts that translate authored structure into repeatable topology arrangements.

Usage

How to use OTF

1. Define the world

Model your content as entities, relationships, and layout rules instead of a single static page tree.

2. Choose a layout family

Pick the OTL pattern that matches the structure: fan, matrix, basin, territories, or comparison.

3. Keep it data-driven

Author the content in Markdown or structured data, then derive positions and rendering from that source.

4. Add interaction layers

Use the camera, inspector, signals, and theme system to make the world explorable and readable.

Example

Minimal usage

import { createOperationalTopology } from "operational-topology";

const topology = createOperationalTopology({
  grid: { radius: 28, columns: 12, rows: 10, originQ: -6, originR: -5 },
  entities: [
    { id: "root", label: "Root", q: 0, r: 0, variant: "root" },
    { id: "entry", label: "Entry", q: 3, r: 2, variant: "entity" },
  ],
  relationships: [{ from: "root", to: "entry", kind: "parent" }],
});

const frame = topology.createRenderFrame({ selectedId: "root" });

Package surface

Use the right entry point

Home sceneLabAnimations LabConnector LabPresentation SimulatorPreset SimulatorTheme Gallery

Operational Topology Framework

Operational Topology Framework, or OTF, is a way to build connected digital systems as a persistent spatial world instead of as a flat list of pages or nodes.

What it is

OTF models content, structure, and interaction as one coordinated topology. The same world can be observed through different layouts, themes, cameras, and inspector states without changing the underlying model.

How it works

  • Markdown-authored content defines the information model.
  • Entities occupy axial grid cells in a persistent world.
  • Relationships connect entities and can use different routing strategies.
  • The camera changes observation, not world state.
  • The inspector explains the currently focused entity, preset, or layout.
  • Themes control semantic presentation without changing the topology.

Core components

  • World model: the persistent operational space.
  • Grid: the axial spatial substrate.
  • Cells: atomic locations in the grid.
  • Entities: the items that occupy cells.
  • Relationships: the links between entities.
  • Signals: transient state and movement cues.
  • Camera: the observation layer.
  • Inspector: the human-readable focus layer.
  • Presets: reusable scene and layout configurations.
  • Layouts: deterministic spatial contracts.

How to use it

  1. Define your content as entities and relationships.
  2. Choose the layout family that fits the structure you want to show.
  3. Keep the topology data-driven so coordinates can be derived from the content.
  4. Use the camera, inspector, and signals to make the world explorable.
  5. Apply a theme or preset when you want a specific presentation mode.

Typical surfaces

  • /overview for the framework summary.
  • OTF Elements Cheat Sheet for a one-page element reference.
  • /lab for interaction exploration.
  • /animation-lab for motion experiments.
  • /connector-lab for connector routing.
  • /presentation-simulator for deck and slide behavior.
  • /preset-simulator for reusable presentation presets.