ShaderPad Docs

The core ShaderPad bundle is currently 5.8 kB gzipped.

Start From A Template

If you want to create a new project, use one of the provided starter templates:

npm create shaderpad@latest

The CLI will prompt you to choose a starter app interactively. You can also start exparimenting with the templates in your browser:

Install Into An Existing Project

To add ShaderPad to a project you already have:

npm install shaderpad

Peer dependency requirements

If you wish to use the tracking plugins (face, pose, hands, or segmenter), you’ll also need to install MediaPipe as a peer dependency:

npm install @mediapipe/tasks-vision

Using AI

If you are working with Claude, Cursor, Codex, or another coding assistant, the best documentation entry point for agents is the AI agent guide. That page is written for AI assistants, not humans, and it links to smaller machine-readable sources and example mirrors.

If your tool accepts extra context URLs, these are the most useful:

/llms.txt for the small discovery layer
/llms-index.json for a structured page catalog
/llms-full.txt for a one-fetch docs corpus
/examples/source for raw example source mirrors

The smoothest workflow is usually:

Start a local project with npm create shaderpad@latest.
Point your agent to the AI agent guide.
Tell it which starter you chose and what you want to build.
Ask for the smallest working version first, then iterate.

Good prompts to start with:

“Read the ShaderPad AI agent guide and turn the basic starter into an animated shader that looks like a holographic orb.”
“Using the basic ShaderPad starter, build an animated pattern using Cairo tiling.”
“Using the face filter starter, make a face-tracked pixelation effect. Keep the first version as small and readable as possible.”

If you are working locally with an editor agent, it also helps to tell it to start with one fragment shader, one ShaderPad instance, createFullscreenCanvas() plus autosize(), and shader.play() for animation. Those defaults line up with the rest of the docs and tend to produce the cleanest first pass.