Splice Oracle turns a synthetic damaged archive into a full-width microfilm recovery machine. Two oversized reels pull a perforated strip through seven rollers, across a compact projection gate, and beneath an articulated optical arm. The transport has momentum, the film accumulates emulsion damage, and the projected document changes as the reconstruction engine decides which fragments deserve confidence.
The apparatus is built for direct manipulation. Run the transport in reverse, pause it, or send it forward. Adjust capstan speed while the reels are moving. Switch among raw, threshold, and reconstruction scans. Scrub individual film frames with the keyboard, drag the loupe over the strip, and apply cement-bed repairs when a damaged splice enters the gate. The recovery percentage records cumulative repair instead of resetting whenever the film advances.
Three interacting systems keep the machine alive:
- Inertial film transport. The dual reels, capstan, roller path, perforation cadence, direction controls, and speed setting share one transport state. Reversing the machine changes the motion coherently across the entire strip instead of swapping a decorative animation.
- Damage-aware archive reconstruction. Each synthetic frame carries its own damage profile and OCR regions. Raw and threshold modes expose the source material, while reconstruction mode produces confidence-scored text boxes and an optical-gate view of the current sheet.
- Optical inspection and repair. The movable loupe samples the film directly, frame scrubbing exposes adjacent damage states, and the cement bed converts deliberate splice work into persistent recovery. Inspection and repair operate on the same frame model as the transport.
Vanilla TypeScript keeps those systems explicit. The transport model, archive state, renderer, and interaction layer remain separate files, which makes the timing and state transitions easier to audit than a component tree wrapped around one giant mutable canvas loop. Canvas 2D handles the continuous film path, reels, rollers, projected sheet, damage, and loupe geometry. DOM and CSS handle buttons, sliders, readouts, focus states, and the machine-mounted control pods where native accessibility matters more than freeform drawing.
That split carries a useful tradeoff. Rendering the whole desk in Canvas would simplify compositing, but every control would need custom hit testing, keyboard behavior, and focus treatment. Building the mechanism entirely in DOM would make the curved film transport and moving optical geometry needlessly awkward. Each layer does the job it is good at, with no framework added to referee six small modules.
The visual hierarchy follows the mechanism. The reels are cropped by the frame, the roller path crosses the full width, and the projection gate sits where the film physically converges. Controls stay attached to the perimeter rather than forming a generic dashboard rail. The result reads as a machine first, with its interface growing out of the transport instead of surrounding it.
Playwright drives the final apparatus at 1600×900 and 375×812. It changes scan mode, applies repairs, exercises keyboard transport, drags the loupe, checks desktop and mobile overflow, rejects clipped labels and undersized touch targets, watches console errors, and captures the exact frame shown above. Everything runs locally with synthetic records. There are no accounts, uploads, analytics, external requests, or user-data collection hiding behind the archival fiction.