A quick start, an honest projector-setup guide, a reference for every tool, and the full keyboard cheat sheet. Prefer to poke around? Open the editor — it starts on a live surface.
The editor opens on a test-pattern surface. Press W for Warp mode and drag its four corners until the pattern sits square on your real wall, screen, or object — the image re-warps perspective-correctly as you pull each corner.
Select the surface, then click an item in Media — an image URL, an image/video file, a screen or window capture, or a webcam — or pick a live GLSL source in Shaders. The chosen content fills the surface immediately.
Click Go Live to open the chrome-free output window, drag it onto your projector display, and go fullscreen. The output mirrors your stage live while you keep editing on the laptop.
Go Live is the one step people trip on. Here's exactly what it does and how to drive a physical projector — no surprises during a show.
Plug in the projector and set it up as a display in your OS — extended desktop is best (the projector shows only the output while the editor stays on your laptop); mirrored puts the same picture on both. The browser can't discover a projector on its own, and it can't reach network receivers like an Apple TV — mirror to those from the OS first, then let the browser see them as a display.
Go Live opens a separate, chrome-free browser window that renders only your stage on true black. It's a pop-up: if your browser's pop-up blocker eats it, nothing appears — allow pop-ups for this site and click Go Live again (the button surfaces a blocked-pop-up notice when that happens).
On Chrome and Edge, a ▾ menu sits next to Go Live: it lists your connected displays (via the Window Management API) so you can open the output straight onto the projector. On other browsers the window opens at a default size — just drag it onto the projector display yourself.
Move your mouse in the output window to reveal its bottom bar, then click Fullscreen. Press Esc to leave fullscreen. The bar auto-hides after a couple of seconds so nothing but the projection shows during a run.
The editor drives the output over a same-origin BroadcastChannel, so the output window must be the one Go Live opened, in the same browser and profile on the same machine. You can't drive the projector from a different browser, a different profile, or another device — and a shared #p= link opens a fresh copy rather than streaming your live session.
The same guides you get from each panel's ? button — deep-link any heading.
A surface is a shape you map media onto. + Add drops a quad, triangle, ellipse, polygon, or mesh warp; quad and ellipse stay perspective-correct as you warp them. + Layer groups surfaces so you can fade or hide a whole set at once. Top row = front-most; ▲▼ change draw order.
Select a surface first, then click a media item to assign it. Add an image by URL, drop or pick an image/video file, capture a screen or window, use a webcam, or the live line-art camera. The test pattern is built in for aligning your warp.
Live GLSL generative sources. Click one to apply it to the selected surface — Bars reacts to the mic, the rest are self-running. The code editor opens below the stage; edits recompile as you type. Start from Blank shader to write your own.
Everything that makes a projection sit right on the selected surface: opacity, blend mode, color (brightness, contrast, saturation, gamma, hue), a freeform mask, and exact corner coordinates. Double-click a color slider to reset just that channel.
How this surface combines with what's behind it. Add and Screen lift blacks toward transparent — right for projecting onto dark surfaces where black should read as ‘off’. Multiply darkens; Normal just layers by opacity.
Hide part of a surface without moving its corners. Fit shapes the mask to the outline; drag points to carve it. Cut hole inverts it (mask the inside instead of the outside); Feather softens the edge. Mask editing is quad/ellipse only.
Switch how dragging the stage behaves. Move (V) repositions, scales, and rotates the whole surface. Warp (W) drags individual corners to fit a real wall. Mask (M) edits the cut-out. Arrow keys nudge a selected point 1px, Shift 10px.
Corners snap to other surfaces, stage edges/center, and — with Grid on — a regular grid. Guides flash magenta (vertical) and cyan (horizontal) on a catch. Hold Alt while dragging to bypass snapping for one move. ∠ sets the rotation step (0 = free).
Capture the current per-surface mix as a Look, then recall it live — geometry stays put, only content and mix cross-dissolve. Set a per-look fade in seconds (0 = hard cut). ▶ Go / ◀ Back step the list; ⟳ re-captures, ✎ or right-click renames.
Turn on the mic to make audio-reactive shaders (like Bars) come alive and to drive beat-synced looks. Continuous bass / mid / high bands feed the shaders; sens scales their gain. Nothing is recorded — audio stays in the browser.
Enable WebMIDI (Chrome/Edge), then click a ◉ learn button — on a Look, on opacity, or on a color slider — and move a pad or fader to bind it. Bindings show top-right of the stage and persist in this browser.
Edits hot-reload the live surface and save into the project. Errors underline the exact line and the badge turns red; compiled means it’s running. If a shader reads uAudio… uniforms, turn on Audio or they stay 0.
Opens output as a separate, chrome-free window (not this tab) that mirrors the stage live. It opens via a popup, so allow popups for this site or nothing appears — you’ll get an inline “popup blocked” note with Retry if that happens. Drag the window onto your projector, or use ▾ to send it straight to a specific display (Chrome/Edge); the projector must already be extended or mirrored from your OS — the browser can’t find it on its own. Once live the button becomes Focus output (bring it forward) and Stop (close it and go offline). The header pill tracks OFFLINE → OPENING… → LIVE, and shows OUTPUT CLOSED if you close the window yourself.
Your project travels in the link itself (#p=) — anyone can open and fork it, or paste the iframe to embed it. Heads up: webcams and uploaded files don’t travel; shaders, image URLs, and the test pattern do. Embeds render read-only.
Upload a photo of your surface; tuned edge contours become editable polygon surfaces. Raise Simplify for fewer points, Min length to drop small specks; Outlines traces edges, Filled regions traces areas. The image is decoded locally and never uploaded.
The same set the in-editor ? overlay lists.