Concept / owning the interval
The premise
Split Second Facility treats time as a physical specimen rather than a backdrop.
The fictional lab captures at one million frames per second, so the ordinary “instant” can be entered, measured and scrubbed. Black-lab restraint makes luminous materials feel scarce: cyan belongs to liquid and sensor light; rose marks rupture, heat and warnings. There is no photography or generated media. Every visible specimen is constructed by HTML, SVG, canvas and CSS—the code-only constraint is treated proudly as part of the exhibit.
The central experience stretches one second across a tall scroll chamber. Scrolling advances the master clock; dragging the range control takes direct ownership away from the document. Frame-step buttons expose adjacent millionths, while “Traverse second” plays the same state at a legible human pace. Every route calls one normalized time model, making the page feel like a connected temporal machine.
Technique / visible machinery
How the frames work
In main.js, setMaster() maps 0–1,000,000 µs to three consecutive scenes and calculates gesture velocity. That velocity shifts the specimen scan line and typographic echo, while chapter crossings fire a stepped white optical cut. drawDrop() constructs a liquid crown on canvas: impact radius expands, alternating vertices rise into spikes, and deterministic beads follow the rim. The balloon uses SVG because membrane topology benefits from exact paths. drawBalloon() opens branching tears, throws four skin fragments on distinct vectors and preserves a dashed air-volume ghost after the latex is gone.
drawMatch() combines a seeded particle field, screen compositing and a hand-shaped Bézier flame. The added microsecond loupe remains part of the same clock: updateLoupeReadout() synchronizes its slit and 5 adjacent-frame labels, while drawLoupe() renders a deterministic temporal fingerprint around the selected frame. “Expose This Frame” prints the exact gate to an accessible live status without inventing a second timeline.
drawFan() clips a rotor into horizontal bands; rolling mode gives each band a later angle, while global mode gives all bands one exposure. traverseSecond() provides intentional playback without introducing a second state model.
The hero’s code-drawn scope sits behind a two-panel CSS shutter opening. Intersection observers gate the scope, fan, section reveals, active navigation and mobile dock. Animation pauses when the document is hidden, canvas density is capped at 2×, and reduced-motion mode removes optical travel while keeping every specimen manually scrubbable.
Optical specification
Optical materials
Lab black (#050606) absorbs the interface. Strobe white (#F1F4F1) is reserved for capture and overexposure; droplet cyan (#9EF3FF) describes optics and liquid; flash rose (#FF7898) signals irreversible events. Major Mono Display supplies large calibrated headings and timestamps. Manrope carries all explanatory text for clarity. Both families are self-hosted from the project archive.
Reproduce this
Prompt the instrument
Ask an AI frontend agent to build “a black-lab high-speed imaging essay where one global microsecond scrubber drives deterministic canvas and SVG phenomena.” Specify a single temporal state model, a strict four-color optical palette, self-hosted mono display type, factual-feeling fictional lab notes and code-only visuals. Require scroll, drag, frame-step, loupe and playback to share state; ask for a real rolling-shutter band simulation, an exact-frame exposure reveal, off-screen pausing, reduced-motion behavior, keyboard access and critical screenshot inspection at phone, tablet and desktop widths.
Return to the facility↗