folded DOM runtime

Orikata

A quiet runtime for folding one real DOM surface into paper-like facets. The demo now treats the center line as a pre-crease, then folds only a small diagonal corner flap on patterned washi.

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

Washi form

Click the folded button or type into the folded input.

selected crease
corner mountain 48°

Step 1 is a flat center pre-crease; step 2 folds a local corner flap on the already-defined right panel. The sheet should read as one continuous piece of paper, not two sliced halves.

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