Example Source
These are raw source mirrors for the interactive examples. Use them when you want to read the example entry file directly.
Basic
Interactive dot grid with cursor tracking and animated custom uniforms.
LYGIA import
Using #include to pull LYGIA utilities into a shader.
Uniform presets
Cycling through preset uniform values to get multiple looks from one shader.
History tiles
Saving distinct frames into history, then composing them into a grid.
Cursor feedback
A shader that feeds back on itself through a 5x5 tiled history buffer.
Reading history
An illustration of how to read past frames using the historyZ helper.
Selfie
Capture shader output to PNG with the save utility.
Webcam trails
Webcam echo trails built from texture history.
Webcam channel trails
RGB webcam echoes blended from modified history frames.
Webcam grid
A webcam timeline arranged into a grid of delayed frames.
Single-channel textures
An R8 webcam pass chained into history to show single-channel textures in action.
Wide-gamut color
A Display P3 test image rendered through a Display P3 ShaderPad.
Fragmentum
A procedural animation ported from Shadertoy.
Face detection
Face landmarks, masks, and regions on webcam input.
Pose detection
Pose landmarks and segmentation overlays on webcam input.
Hand detection
Hand landmarks and centers on webcam input.
Segmenter
A multi-category segmentation mask on webcam input.
MediaPipe chaining
Two-pass webcam compositing with shared face detection.
Background blur
An advanced blur filter demonstrating a chained ShaderPad pipeline.
Camo
Face- or body-centered camouflage using a single history frame.
Elastics
Elastic glowing connections between fingertips and thumbs.
Finger pens
Interactive ink strokes controlled by your fingertips.
MIDI fingers
Hand tracking routed to MIDI CC output with a live visual overlay.
God rays
Volumetric glow from tracked hands and face landmarks.
Web component
Using <shader-pad> directly in HTML with one image texture and one inline shader.
React
Embedding a shader in React using the built-in <ShaderPad> component.