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 spike

Experimental non-snapshot backend: cloned visual DOM is clipped to folded faces, so CSS transition and keyframe animation can keep running on the paper. Events still bridge back to the single hidden source DOM.

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