folded DOM runtime

Orikata

A quiet runtime for folding one real DOM surface into paper-like facets. The demo keeps the setup intentionally simple: three vertical creases at 1/4, 2/4, and 3/4 of the sheet.

npm install orikata
升箱の折り目hover a crease, click to rotate

Washi form

Click the folded button or type into the folded input.

selected crease
quarter fold 3 45°

The live mirror demo uses three plain vertical folds; the 3/4 fold animates between +45° and +80° so the button stays readable while the motion remains obvious.

Live mirror backend

First-class non-snapshot backend: visual DOM clones are clipped to folded faces, so CSS transitions and keyframe animations can keep running on paper. Events still bridge back to one hidden source DOM; large or exotic DOM subtrees remain best-effort.

Live DOM

Hover the folded button: this is CSS transition, not snapshot rebuild.

Square collapse

Static-view: four corners fold inward, then the sheet folds upward from the center line.

Complex DOM graphic

A dense dashboard-like DOM texture folded as a static surface with an automatic Z-fold loop.

Static view

visual only

Snapshot texture plus fold transforms. No hidden source DOM, no click bridge.

createOrigamiRuntime({
  mode: 'static-view',
  host, paper, foldOps,
  snapshot
});
no interaction layer

Interactive bridge

click me

One hidden source DOM; folded hit-tests bridge back to a real button.

createOrigamiRuntime({
  mode: 'interactive-bridge',
  host, sourceRoot,
  snapshotProvider
});
folded button updates source

Baked view

precomputed

Manifest pieces are mounted directly; runtime angle mutation is frozen.

const manifest =
  buildBakedOrigamiManifest(doc);
createOrigamiRuntime({
  mode: 'baked-view',
  host, manifest
});
baked pieces only
source package