Technical overview

Built for
privacy.

DENOIR is a fully client-side photobooth. Every photo is captured, processed, composed, and downloaded on your device. No server sees your camera. No server touches your photos.

Privacy pipeline

01
Camera inputMediaDevices.getUserMedia()

Browser requests camera permission. No data leaves yet.

02
Stream preview<video> + MediaStream

Live preview rendered directly to a <video> element.

03
Live effectsCanvas API (drawImage + filters)

CSS filters applied per frame. Processed on the GPU locally.

04
Frame capturecanvas.drawImage(video)

A single video frame is drawn to an off-screen canvas.

05
Effect processingImageData manipulation

Pixel-level effect (grain, mono, VHS) applied via getImageData.

06
Strip compositionOffscreenCanvas / HTMLCanvasElement

3 frames composed with borders, typography, date, and brand.

07
Exportcanvas.toBlob() → JPEG

Final image encoded to JPEG (~90% quality) on your device.

08
Download / ShareURL.createObjectURL() / Web Share

File handed directly to the browser. Never touches a server.

Result

Your photos never leave your device.

Tech stack

Next.js 15Framework, static/edge hosting, App Router
TypeScriptType safety across the full codebase
Canvas APIFrame capture, effect processing, strip composition
MediaDevices APICamera stream via getUserMedia()
Web Share APINative share sheet on mobile
Web Audio APIProgrammatic shutter and countdown sounds
Tailwind CSSUtility-first styling with design tokens
Cormorant GaramondDisplay typeface, editorial serif
Inter VariableUI typeface, controls, labels, metadata

What DENOIR never does

✕Photo upload to a server
✕Image storage of any kind
✕Face recognition or biometric processing
✕User accounts or sessions
✕Tracking pixels or ad networks
✕Server-side image processing
✕Third-party camera data access

See it in action.

Enter Booth