Shader Library

The Shader Library is Glyphfield's shared catalog of live materials (animated shaders). Design Lab (the layered composition tool), Animation, Lottie, and the expression tools take their materials from it. Each tool stores a material by its ID and settings. This release lists 197 materials. GET /api/materials returns the current list, count, engines, controls, and defaults, so agents read the count from the endpoint.

Where it appears

Compact browsers have search, the look buttons, and the source and kind filters. Show more shaders adds another batch of cards.

Browse and filter

The Design Lab library header shows Shader library and the number of materials shown out of the total, for example 197 of 197 materials.

Search matches substrings, so interactive smoke and metal chrome both work. Shaders.com descriptions end with their upstream category, so Textures and Shape Effects also work as search terms.

Order

The order is fixed:

1. Fourteen curated materials: Gem Smoke, Architectural Chrome, Electric Lines, Liquid Metal, Chrome Glares, God Rays, Warp, Dither gradient, Mesh gradient, Spectral Bloom, Radiant Void, Galactic Rings, Fluid Energy, and Holo Cloth.
2. The richer materials, highest quality score first. Prismatic sphere and Glyph field sit directly after Water · Abstract.
3. Simple patterns and the Paper filters that process a sample picture, highest quality score first. Examples are stripes, grids, spirals, dot grids, the halftones, and image dithering.

Within the second and third groups, two presets of one Paper family do not appear next to each other when another material can go between them.

Materials the library leaves out

• Shape primitives, plain fills, and raw noise. These are the Shaders.com shapes (Circle, Star, Polygon, Heart, and the others), Solid Color, Linear Gradient, Radial Gradient, Diamond Gradient, Thin Film, Studio Background, Image Texture, Text, the Perlin, Simplex, Wavelet, and Gabor noises, and the Paper Perlin Noise, Simplex Noise, and Waves families.
• The Paper Static Mesh and Static Radial families.
• The Shaders.com image effects. They transform the pixels beneath them, so Design Lab runs them on Effect layers. /api/materials lists them under imageEffects.
• The Shaders.com Group, VideoTexture, WebcamTexture, and HTMLInCanvas components. Browsing the library does not request camera access.

A saved document that uses a material the library leaves out still loads and renders it. HTTP design-sequence requests accept only listed materials.

Engines

The Shaders.com studies are original implementations of public Shaders.com techniques. The design studies are original implementations informed by the visual directions of Evil Rabbit Shaders, GRADIENTOOL, and Grainient.

Glyphfield's original materials are 24 GLSL programs: the eight Glyphfield GLSL materials, the nine Shaders.com studies, the six design studies, and Holo Cloth. They blend palette colors in linear light, interpolate color ramps in OKLab, dither every frame before 8-bit output, and size patterns relative to the frame. A preview and a 4K export therefore show the same composition.

Fluid Energy solves velocity on a coarse grid. The grid's short side grows with Detail from 96 to 224 cells, scaled by render quality. Each step runs 20 pressure iterations, and the simulation runs 150 steps before the first frame. Three moving emitters and the pointer add dye.

Shaders.com WebGPU behavior

• Each material's code loads when the material is first used. All Shaders.com materials on a page share one GPU device. Rendering is capped at 30 FPS and at a device pixel ratio of 2.
• Stateful materials (the Interactive group, Particles, and Smoke Fill) simulate 3 seconds before they first appear, so they open already developed.
• Interactive materials follow a slow automatic cursor while the real pointer is elsewhere. Moving the pointer over the canvas takes control. The real pointer keeps control for 1.5 seconds after it stops moving.
• Without WebGPU, the material shows its still thumbnail with the message "WebGPU is unavailable here. Showing a still preview." Still and motion exports refuse the material and do not export the thumbnail.

Loading and replacing

Shaders.com and ShaderGradient materials load their engine code on demand. A library card starts that download when the pointer enters it or the card receives focus, so the material paints sooner when it is chosen. Paper and Glyphfield materials ship with the canvas and need no preload.

When a live canvas switches to another material, the previous material stays on screen in a paused state until the new one has drawn its first frame. The old material then fades out over 160 ms. If the new material is not ready after 8 seconds, the old one fades out anyway.

WebGL2 availability

Paper, Glyphfield GLSL, Fluid Energy, and Prismatic sphere need WebGL2. Studio requests the WebGL2 context with failIfMajorPerformanceCaveat, so software rendering counts as unavailable. Without WebGL2, the canvas shows a placeholder named "Shader preview unavailable" and checks again every 2.5 seconds. A lost WebGL context is remounted after 350 ms, up to five times. After a 2.5-second cooldown the cycle can start again. Studio controls, source editing, and exports that do not need WebGL keep working.

Shared controls

Design Lab's shader inspector and the Live material controls map one set of settings onto every engine, and each engine interprets a setting in its own way. The Live material controls appear in Lottie and in an Animation scene's background. The Animation base background has its own shorter set, described on the Animation page.

The 15 palette presets are Monochrome chrome, Mercury, Ultraviolet, Signal lime, Copper heat, Arctic, Vermilion ink, Cobalt bloom, Signal axis, Signal terraces, Solar orbit, Mineral wave, Paper aperture, Ink dither, and Signal dither. Design Lab shows the first seven. A preset sets Base, Mid, and Light, and the colors stay editable afterward.

/api/materials publishes the API ranges under controls. They match the Live material controls. Speed runs from 0 to 1.5 in every control because motion stops getting faster at 1.5. For Prismatic sphere, speed sets the radius of the sphere's loop path, up to 0.5.

Shaders.com materials use the colors, speed, and zoom, plus their native controls. Strength, detail, frequency, grain, brightness, amplitude, density, and rotation do not apply to them, so Design Lab hides those sliders and the Advanced section for them.

Native Shaders.com controls

Each Shaders.com material shows its upstream settings in Effect settings: colors, gradient stops, lights, positions, numeric ranges, switches, choices, and structured values. A setting that applies to one mode appears only when that mode is chosen.

Settings are stored in settings.effectProps, which holds only changed values. /api/materials returns each material's nativeControls with defaults, choices, and ranges. A color control's palette field names the stop that seeds it: base is settings.colorA, main is colorB, highlight is colorC, and ramp or lights spread all three. Controls marked hidden, such as the native speed, are not shown. shaderEffects.components lists all 199 upstream components.

{
  "materialId": "shader-effects-aurora",
  "settings": {
    "speed": 0.3,
    "effectProps": { "intensity": 80, "colorA": "#A533F8", "colorB": "#22EE88" }
  }
}

This is the shader part of a design-sequence request. Aurora's colorA and colorB are set explicitly, and its colorC follows the palette.

Time and motion

Every tool stores shader time, pause state, zoom, colors, and settings in its document. Design Lab adds lossless frame captures and shader sequences, described in Shaders and time. Each /api/materials record has a motion object:

Source format

HTTP

GET /api/materials returns { categories, kinds, shaderEffects, controls, count, defaults, engines, lookPresets, materials, framePersistence, palettes, schemaVersion, sharedBy, imageEffects }. Each material has id, name, description, engine, qualityScore, sourceLabel, sourceUrl, category, kind, and motion. Shaders.com materials add nativeControls, settingsKey: "effectProps", and requiresWebGPU: true. defaults names the default materials for Animation, the landing page hero, and new shader surfaces. Design Lab starts new compositions with Gem Smoke.

Read material IDs from the endpoint instead of deriving them from display names. Several names appear under more than one engine, for example Chroma Flow, Nebula, Mesh Gradient, and Liquid Metal.

POST /api/generate with kind: "design-sequence" accepts a listed material ID and its settings. The server returns a recipe, and Studio renders the pixels.

Licensing

Paper Shaders, the Shaders.com components, WebGL Fluid Simulation, and HoloCloth keep their own licenses. Their notices and the visual references for the original studies are in Third-party notices. ShaderGradient is an MIT-licensed npm dependency. The design studies are original implementations, and Glyphfield bundles no Evil Rabbit, GRADIENTOOL, or Grainient code or downloadable assets. When a material has an upstream project or visual reference, the inspector links to it.