Skip to content

Introduction ​

Intermact is an interactive math visualization platform built on React Three Fiber. Starting as an "interactive Manim alternative" (v0.1), it expanded through the v0.2 math toolbox into a full 2D interactive narrative system; v1.0 further delivers PCG, 3D, export/embed, and plugin extensibility. The same program can orchestrate narrative animation, support live parameter tuning, let viewers drag to explore, and embed into web pages and handouts.

Packages are on npm (@intermact/core, @intermact/react v1.0.0). To install in your app, see Getting started · Use in your app (npm); to hack on this repo, see "Run from source" on the same page.

What problem does it solve? ​

Pain pointIntermact approach
Manim offline rendering is slow and costly to iterateReal-time rendering in the browser — change code, see results immediately
Traditional animation libraries are hard to make interactiveRetained-mode seekable timeline + Signal/derived reactive layer
Experiment logic coupled to renderingcore has no framework dependency; headless evaluation and testing in Node/Worker
Output limited to videoWeb-native serialization, snapshot/video export, Web Component embed (v1.0)

What can v0.1 do? (Phase-1) ​

  • Declarative 2D primitives: circle, ellipse, rectangle, arc, polygon (with holes), Bézier, line segment, arrow
  • Create stroke/fill reveal, Fade, Move, Rotate, Scale
  • Coordinate systems: Cartesian domain, abs/rel/fit transforms, polar coordinates, getAxes to register axis objects
  • Reactive: signal / derived / valueTracker / tweenSignal, bound to Leva
  • React entry: <IntermactCanvas program={...} /> + timeline overlay controls

What can v0.2 do? (Phase-2 · math toolbox) ​

  • Scale: linear / log / pow / time scales, axis ticks and formatting
  • Math constructs: NumberPlane, FunctionGraph, Riemann sum, tangent, Matrix/Table/Brace, DecimalNumber
  • Morph: arc-length / anchor / matching / cross-fade; group2D part keys and transformMatchingTex
  • Text and LaTeX: OpenType outlines + MathJax SVG; stroke-by-stroke writing; vector multi-size glyphs
  • Interaction: draggable control points/values, precise hit-test, explorable derivative exploration
  • Layout and Inspector: nextTo / arrange / fitTo; React Inspector for scene tree and signal debugging

Documentation structure ​

  • Guides: concepts and code examples for users (this directory)
    • Core capabilities (v0.1): program, timeline, geometry, rendering, animation, coordinates, reactive
    • Math toolbox (v0.2): Scale, constructs, Morph, text/LaTeX, interaction, layout
  • API Reference: TypeDoc-generated symbol docs (overview with Phase-1/2 entry tables)
  • Packages: @intermact/* layer responsibilities and dependency rules
  • Examples: index aligned with the examples/ demo gallery
  • Project: milestone roadmap and v0.1 / v0.2 / v1.0 acceptance checklists

For the full interface contract and revision history, see dev-docs/design.md and dev-docs/dev-roadmap.md.

Intermact v1.0 — docs cover Phase-1 / Phase-2 / Phase-3 (all stages)