How Miraiclip works
Three layers, one source of truth.
| Layer | Package | Job |
|---|---|---|
| State | @miraiclip/core | A project document changed only by commands. Every command is validated (Zod), undoable and emitted as JSON patches. |
| Render | @miraiclip/renderer | Decodes media (WebCodecs), composites the scene (WebGL), mixes audio (Web Audio). The audio clock drives playback. |
| Export | @miraiclip/renderer, @miraiclip/server-export | Walks the timeline frame by frame through the same compositor, then encodes MP4 or WebM. |
Your UI sits on top: it reads state, dispatches commands and hosts the preview canvas.
your UI ── dispatch(command) ──▶ core ── patches ──▶ renderer ──▶ canvas
▲ │
└────── subscribe(selector) ───┘Rules that hold everywhere
- State changes only through commands. Undo, collaboration and AI editing all build on this.
- Playhead and selection are ephemeral. They're never in undo history and never serialized.
- Preview and export share one compositor. What you see is what you export.
- Time is integer microseconds. Frame math is exact, so an hour at 29.97 fps doesn't drift.