Loom

Build visuals with nodes, WGSL shaders and GPU point kernels. Drive parameters with audio, MIDI, OSC or expressions, then export stills and MP4s or send the result to a projector. Save your work as a .loom.json project and reuse parts as components.

What you can build

• Video effects with feedback loops, frame caches, depth and pose inference.
• Custom WGSL shaders with typed controls generated from struct Params.
• GPU point systems rendered as points, instances or meshes.
• 3D scenes with cameras, lights, shadows and materials.
• Audio-reactive visuals and controller-driven compositions.
• Reusable components, multiple output views and saved workspace layouts.

Browse the examples for working networks. Loom's core GPU runtime uses vGPU by Vercel Labs.

Run locally

Requires Node.js 22.12+, pnpm 9.15.4 and a browser with WebGPU.

pnpm install
pnpm dev

The hosted app runs browser features. Local device connections, terminal panes and desktop MCP clients need a local clone and the helper below.

For the Electron app, run pnpm desktop:dev. macOS Apple Silicon supports Syphon and NDI; native setup requires Xcode, and NDI needs a separately supplied SDK. Windows Spout transport is not implemented. See the desktop guide.

Photo projection mapping

Choose File → Map from photo…. Prepare or reuse float32 depth and an optional surface mask, preview animated effects on the reference photo or a night shot, then create an editable mapping network. Align projector output with Grid Warp and Corner Pin.

Photo mapping guide

Connect devices

Run the helper and enter its pairing code under agent → Connections in your local Loom tab. MIDI works directly through the browser; OSC, lasers and native Person Mask use the helper.

Command	Enables
pnpm helper	Device connections and the MCP server
pnpm helper --terminal	Terminal panes running a local shell
pnpm helper --grant-export	Agent access to rendered pixels and readbacks
pnpm helper --all	Device, terminal and pixel access
pnpm helper --devices-only	Device connections without the MCP server
pnpm helper --phone	A phone control panel on your local network

Shell and pixel access require their flags when you start the helper. Phone access is separate from --all.

Helper, MIDI and OSC setup

Work with an agent

MCP lets a desktop agent edit networks, shaders and parameters. WebMCP exposes the same tools to supported browser agents. Changes appear in the editor and remain undoable; connect MCP to your local tab to work on the visible project.

Agent setup

Development

The app uses TypeScript, React, CSS Modules and a WebGPU runtime. See the spec for the architecture and project format.

Build with pnpm build. Run pnpm lint, pnpm typecheck and tests for the affected feature before submitting changes. Maintainers publish the hosted build from main with pnpm deploy.