GlyphfieldShaders and time
Tune Design Lab shader layers and the live preview quality, pick and capture exact shader frames, and build sequences that cut between several shaders.
A shader layer in Design Lab, the layered composition tool, renders one material from the shared Shader Library. A material can also fill a text, mark, image, or sticker layer, clipped to that layer's shape. The Shader Library page describes the catalog, engines, filters, and native controls.
Add or replace a shader
Click a library card to add a shader layer, or to replace the material of the selected shader layer. With a text, mark, image, or sticker layer selected, a card applies the material as that layer's fill. A material picked from the library takes the identity palette and keeps the layer's opacity, blend mode, and zoom. New Design Lab compositions start with Gem Smoke (paper-gem-smoke).
When a material is replaced, 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 within 8 seconds, the old one fades out anyway. A card starts loading the engine code for Shaders.com and ShaderGradient materials when the pointer enters it or it receives focus, so those materials open faster when clicked.
Shader inspector
| Section | Controls |
|---|---|
| Shader color | Base color, Mid color, and Light color. Palette buttons apply the identity palette or one of seven presets (Monochrome chrome, Mercury, Ultraviolet, Signal lime, Copper heat, Arctic, Vermilion ink). Reset shader restores the material's starting settings and zoom. A link opens the material's source when it has one |
| Effect settings | Shaders.com materials only: the material's native controls |
| Shader settings | Shader zoom 0.1×–10× on a logarithmic slider, Layer opacity, a blend mode (Normal, Screen, Overlay, or Multiply), Center X and Center Y (Paper materials), Shader speed 0–1.5, Frequency 0.5–12, Warp 0–1.5, Detail 0.5–9, Texture (grain) 0–100, and Light (brightness) 0.35–1.6 |
| Shader frame | Horizontal position and Vertical position in pixels, Frame width and Frame height (2% to 300% of the artboard), Layer rotation, and Fit shader to canvas |
| Advanced | Amplitude 0–10, Density 0.1–2, and Rotation −180° to 180°. This rotation turns the material inside the layer. Layer rotation turns the layer itself |
Shaders.com materials show Shader speed and their native controls. Frequency, Warp, Detail, Texture, Light, and the Advanced section do not apply to them, so Design Lab hides them. Each native control uses the range, step, and choices that its nativeControls entry in /api/materials declares.
Shader zoom below 1× shows more of the field, and zoom above 1× moves into its detail. Equal slider travel gives equal visual zoom. The value field next to the slider accepts an exact zoom.
Preview quality
Live shader preview quality in the canvas toolbar cycles through Auto, High, and Draft. It changes only the resolution of live shader previews. Exports always render at the output size.
| Mode | Pixels per shader | Pixels for all shaders |
|---|---|---|
| High | 240,000–2,400,000 | 4,800,000 |
| Draft | 48,000–120,000 | 300,000 |
| Auto | Starts at High, switches to Draft after sustained slow frames, and returns to High when frames recover | Follows the current level |
Auto measures frames only while Design Lab is active, the composition is playing and has motion, the page is visible, and reduced motion is off. After a 2-second warm-up it sorts frames into 2.5-second windows. A frame is late when it takes more than 1.35 times a 60 Hz frame. A window is slow when the average frame takes more than 1.15 times a 60 Hz frame and at least 20% of frames are late. A window is smooth when the average frame takes at most 1.05 times a 60 Hz frame and at most 5% of frames are late.
- Two slow windows in a row switch Auto to Draft.
- Four smooth windows in a row (10 seconds) switch Auto back to High.
- After the first return to High, each new drop doubles the number of smooth windows that the next return needs, up to 24 windows (one minute).
- Every switch restarts the warm-up.
The button's tooltip says when Auto has lowered the resolution. The chosen mode is stored in this browser.
Captured shader frames, saved designs, and project files copy the pixels of the live preview canvas. Choose High before Capture shader frame when the saved frame must stay sharp at large sizes.
Shader time
The strip below the canvas controls the time of the selected shader layer:
| Control | Action |
|---|---|
| Freeze current shader frame and Resume live shader motion | Pause or play. Stateful materials show Start new fluid motion in place of resume |
| Shader time | Shows Live or Paused and the time in seconds |
| Explore shader time | A slider over a 30-second range in steps of 1/60 second |
| Previous shader frame (1/60 second) and Next shader frame (1/60 second) | Step one frame |
| Extend shader exploration by 30 seconds | Lengthen the slider's range by 30 seconds |
| Capture shader frame | Save the visible pixels as a lossless PNG checkpoint |
| Shader sequence | Open the shader sequence panel |
Pausing, playing, and scrubbing are editing operations. They do not encode a PNG or write captured-frame assets. Live shaders target 60 FPS whatever the export settings are, and hidden or paused renderers stop drawing. Playback does not lengthen the slider's range.
Capture a frame
Capture shader frame stores two things together: a lossless PNG of the pixels on screen, and the editable material recipe with its native engine frame. Saved and duplicated captures display the PNG, so reopening a design does not depend on rendering the same GPU pixels on another device. The PNG is stored once in IndexedDB, keyed by its SHA-256 hash, and portable source embeds it in CanvasDocument.assets. A captured PNG must be smaller than 25 MB. If a saved PNG cannot be loaded, its preview stays marked as unavailable. Design Lab does not start a different live shader in its place.
Seekable, stateful, and static materials
- Seekable materials render any requested time. These are the animated Paper materials, the Glyphfield originals, Prismatic sphere, and every Shaders.com material that is not stateful.
- Stateful materials depend on earlier frames or on pointer input. These are Fluid Energy, the Interactive Shaders.com materials (Smoke, Ink Flow, Boids, Reaction Diffusion, and others), Particles, and Smoke Fill. They can be paused and captured, but a time value cannot reproduce them. Playing from a saved PNG starts a new simulation.
- Static materials have no time range. These are the Paper Dot Grid, Fluted Glass, Halftone CMYK, Halftone Dots, Image Dithering, and Paper Texture families.
design.motion.describe reports each shader layer's provider, motion model, PNG capture support, editable seek support, and loop behavior. A continuous animation is not a seamless loop of finite length. Prismatic sphere exposes a configured loop duration, and no material promises a pixel-exact loop.
Shader sequences
A shader sequence turns one shader layer into a timeline of 8 to 12 materials. The first materials are intro cuts taken from a fixed list of 12 candidates, and the last is the layer's own material, which holds at the end. Cuts either accelerate from 1050 ms down to 280 ms or stay even at 620 ms each. The default is 10 materials, accelerating, with a 5-second final hold.
| Control | Values |
|---|---|
| Background layer | The shader layer the sequence replaces |
| Cuts | 8 to 12 shaders |
| Final hold | 3, 4, 5, or 6 seconds |
| Pacing | Accelerating or Even |
| New cuts | Rotates to another set of intro materials |
| Preview cuts and Stop preview | Play the sequence on the canvas, or stop it |
| Export MP4 | Exports the sequence as MP4 |
The timeline records the material IDs, the start and end time of each segment, the target shader layer, the sequence offset, and the paused frame. Preview, GIF, and MP4 use the same timeline. Stop the preview before saving, copying, exploring time, or exporting. The preview swaps materials temporarily and is not the saved composition. The panel's Export MP4 exports the sequence as MP4. The Browser API exports it as GIF or MP4 with design.export.shader-sequence.gif and design.export.shader-sequence.mp4.
Browser API
The Browser API is window.glyphfield.studio. These actions control shader time and sequences:
| Action | Input | Output |
|---|---|---|
design.frame.pause | None | null. Pauses at once without writing assets |
design.frame.play | None | null |
design.frame.seek | { timeMs }, a non-negative finite number | null. Rejected for stateful materials |
design.frame.capture | None | A portable CanvasDocument JSON string with the captured PNG assets |
design.motion.describe | None | { timeMs, paused, layers: [{ layerId, materialId, provider, motionModel, supportsPngSnapshot, supportsEditableSeek, loop }] } |
design.sequence.describe | None | { durationMs, materials, settings } |
design.sequence.configure | Partial settings: cutCount 8–12, finalHoldMs 3000–6000, pace (accelerating or even) | null |
design.sequence.preview | None | null |
design.sequence.stop | None | null |
const studio = window.glyphfield.studio;
const motion = await studio.invoke('design.motion.describe');
const layer = motion.layers[0];
if (layer?.supportsEditableSeek) await studio.invoke('design.frame.seek', { timeMs: 1250 });
const source = await studio.invoke('design.frame.capture');
// Keep `source` with its CanvasDocument.assets outside the browser.design.frame.capture rejects when storage, the renderer, or PNG encoding fails. It does not return a partial save.
Effect layers
Process every layer beneath a Design Lab Effect layer with a built-in converter or a Shaders.com image effect, and export the result as a still or motion file.
Export, saving, and source
Export a Design Lab artboard as PNG, JPG, GIF, or MP4, save named checkpoints, share a project file, and edit the CanvasDocument source by hand.