Primitives
Primitives are a way of authoring shader components using building blocks instead of hand-rolling WGSL code. Each one is a plain TypeScript function you compose inside defineShader, and the engine turns the result into WebGPU at runtime.
New here? Read Custom Components first, then start with defineShader & wgsl.
Defining a shader
- defineShader & wgsl8A shader is a plain object: a name, the props a user can set, and one field that says what it draws.
- Props & values2How a definition points at its own props. p('radius') is a prop ref: hand it to any word that takes a color, a position or a number and the word reads that prop live on the GPU, with drivers and animation applied, and no rebuild when the value changes.
- Identity & recompile rules6Two small kinds of rule that make a filter cheap.
- Context & invocation13The context is what every pixel knows about its surroundings: its coordinate (uv, 0–1 across the canvas with y down), the clock (time, in seconds), the canvas shape (aspect, viewportSize) and the mouse (pointer). ctx names these as tokens you can pass to a word or bind in a wgsl body's inputs.
- List props2A list prop holds any number of items of the same shape: lights, points, anchors.
Painting
- Fields, palettes & ramps30The words every gradient and most textures are drawn with.
- Gradients5Finished gradient paints: a flat fill, a color wheel that cycles over time, a cloud of five colored points, and a beam of light between two points.
- Patterns & tiling34Repeating patterns you can color and animate: checkers, stripes, zigzags, rings, falling streaks, and tiled lattices of squares, hexagons, triangles, bricks, truchet arcs, woven threads and isometric cubes, plus the print-screen filters (halftone dots, CMYK plates and dithering).
- Figures & strokes2Drawn lines: a straight segment and a traveling sine wave.
- Layering & output4The words that finish a paint: function. layers stacks several colors into one, back to front, each with an optional opacity and an optional factor it is seen through. layered builds N variations of one recipe from a data list and sums them, which is how curtains, cloud banks and echo trails get their depth cheaply.
- Media3Pixels that come from an image, a video or the user's camera instead of from math.
Noise, light & materials
- Noise37Words for grainy, cloudy, cellular and streaked surfaces: the textures behind clouds, film grain, stone, water and brushed metal.
- Light40Words for drawing light: glows, rays, beams, flares and halos, plus the frames they are drawn in.
- Materials & surfaces56Words that shade a surface so a shape reads as glass, metal, plastic or stone.
- Volumes4Words for filling a shape with something you look through: smoke, gas, tinted glass, a starfield behind a window.
- Radiance3Words for light a shape gives off or blocks.
- Voxels1One word, voxelSurface, rebuilds any shape out of blocks.
Shapes, frames & warps
- Shapes16The 2D shapes: a circle, a star, a heart and a dozen more, each as a function of a point that tells you how far that point is from the shape's edge.
- Frames & coordinates7Frames are how a generator measures its pixels.
- Warps19Words for the map: field.
- Masks5A mask is coverage: a number from 0 to 1 at every pixel that says how much of something shows there.
- Math47The arithmetic you write your own paint with.
- Motion & timing11Words that turn a clock into rhythm.
- Signals3Live inputs a simulation reads every frame: where the pointer is and how fast it is moving.
Filters & effects
- Filter effects5Words for the effect: field.
- Color effects16Words that recolor the layer inside them, one pixel at a time.
- Blurs, glows & screens50Effects that read the layer inside them (the child) as a texture and rebuild it: blurs, glows, sharpening, pixelation, shadows, retro screens, glitches, fluted glass, page peels and mirror floors.
- Stylize11Hand-made looks for the layer inside: a watercolor wash, a chalk drawing on a board, ASCII characters, and copper-plate line engraving.
- Lens2Words for the color fringing a real lens leaves behind: the red, green and blue copies of the layer inside pushed apart, or fanned out into a whole spectrum.
- Reveals & wipes10Words that make the layer inside disappear in a chosen order: a straight edge, a growing circle, a clock sweep, a grid of blocks, a noise dissolve.
- Instances5Repeat the layer inside. repeatInstances draws many copies of it, laid out in a grid, around a circle or along a line, each copy scaled, turned, faded and jittered a little more than the last.
- Fracture5Broken glass.
- Edge glow7A band of light hugging the edge of any shape, with coloured spots racing around it.
- Overlays2Heads-up-display overlays: whole fragments that look at the layer inside, find things in it and draw chrome on top. detectionOverlay cuts the canvas into cells, finds the bright, dark, colored or opaque content in each and draws a bounding box with an optional label around it, the computer-vision look. motionTrackerHud draws tracker gizmos that chase content over time, dropping keyframe diamonds behind them along their paths.
- Pointer fields5Push fields the pointer stirs.
Simulation
- Simulate7Say "simulate this" and let the engine run it. simulate.grid declares a square grid of numbers that changes a little every frame: you list the steps that advance it (op.wave makes it ripple, op.splat presses the pointer into it) and name the outputs you want derived from it (op.gradient, the slope at every cell).
- Grid programs16A grid simulation is a fixed-size field of cells (a displacement per cell, two chemical concentrations, a sort offset) that changes a little every frame. gridSim runs it: you describe the frame as an ordered list of stages built with op., and the engine runs that list every frame, owning the clock, the frame-delta clamp, the ready gate, the settle gate and the outputs the layer samples.
- Fluids6Smoke, ink and fog that flow.
- Feedback1Effects that remember the last frame.
- Agents6Thousands of small things that move: flocks, motes, filings, swarms, particles standing on an image.
- Agent forces36What pushes, turns and carries each agent.
- Agent frame9The once-per-frame arithmetic an agent simulation writes into its values.
- Agent rendering13How agents become a picture.
- Shape fields5The shape a swarm is held inside. force.containment needs one thing from a shape: the signed distance to its surface at any 3D point, negative inside and positive outside. shapeField builds that distance function from whatever shape the layer was given, so one integrator serves every shape kind: analyticExtruded gives a flat shape (circle, polygon, star) a depth; svgExtruded does the same for an SVG outline uploaded as a distance texture; analytic3d wraps a true 3D solid; svgLifted3d wraps an SVG lifted into 3D.
For agents and tools: the whole vocabulary as llms.txt or as docs-manifest.json, generated from engine 4.0.5.