Shaders (Post-Processing Effects)

Shaders are GPU-accelerated post-processing effects that operate on the final rendered canvas pixels using WebGL2. Unlike Effects which manipulate individual ASCII cells, shaders work on the composite pixel output — enabling visual treatments like blur, glow, and distortion that aren't possible at the cell level.

Overview

Info

Shaders operate on pixels, not cells. They are applied as a final render pass after all layers, effects, and generators have been composited into the canvas.

Processing Pipeline

text

Layer Content → Layer Effects (cells)
  → Layer Transforms → Composite All Layers
  → Global Effects (cells)
  → Render to Canvas 2D
  → Upload as WebGL Texture
  → Shader Chain (stacked in timeline order)
  → Final Display

Available Shaders

Shader	Category	Description
Chromatic Aberration	Color	RGB channel splitting with directional offset
Screen Distortion	Distortion	Barrel, pincushion, and wave distortion
Glow	Light	Multi-pass bloom with color modes
Blur	Filter	Gaussian, box, radial, and zoom blur
Pixelate	Stylize	Nearest-neighbor mosaic downsampling

Adding Shaders

Open the right panel and expand the Shaders section

Click the + button to open the shader menu

Select a shader type from the dropdown

The shader appears as a track at the top of the timeline, spanning the full duration by default

Configure parameters in the shader properties panel on the right

Shader Tracks on the Timeline

Shader tracks appear at the top of the timeline, above all layer tracks. Each shader track contains a single effect block:

Drag block edges to adjust the in/out points (when the shader is active)
Default duration spans the entire timeline — trim to apply only during specific sections
Toggle visibility with the eye icon to disable without removing
Drag to reorder — the order of shader tracks determines the processing order (top track is applied first)

Warning

Shader stacking order matters. A blur applied before glow produces a different result than glow applied before blur. Drag tracks to experiment with different orders.

Keyframeable Properties

Every shader parameter can be animated over time using the same keyframe system as effects and layer transforms:

Expand a shader track in the timeline to reveal its property tracks

Click the diamond icon next to a property in the right panel to add a keyframe at the current frame

Navigate to a different frame and change the property value — a new keyframe is added automatically

Right-click keyframes for easing options, copy/paste, and more

Properties use:

Numeric interpolation — smooth transitions between values (intensity, radius, angle, etc.)
Hold interpolation — snaps to the most recent value (type selectors, boolean toggles)

Export Compatibility

Shaders are supported in pixel-based export formats. Text-based formats cannot render GPU effects.

Format	Shader Support	Notes
PNG / JPEG	✅ Full	Applied at export resolution
Video (WebM/MP4)	✅ Full	Applied per-frame during encoding
React Component	✅ Full	Self-contained WebGL runtime embedded in component
HTML	✅ Full	Self-contained WebGL runtime embedded in file
Session (.asciimtn)	✅ Saved	Shader data and keyframes preserved in project files
SVG	❌ None	Vector format — shaders auto-disabled
Plain Text / JSON	❌ None	No pixel rendering
CLI (Ink, OpenTUI, Bubbletea)	❌ None	Terminal output — no WebGL

Info

When exporting to React or HTML, the shader pipeline is embedded as a self-contained WebGL2 runtime with all GLSL shader sources included. No external dependencies are required.

Effects vs. Shaders

	Effects	Shaders
Operates on	ASCII cells (characters, colors)	Rendered pixels (WebGL textures)
Rendering	CPU, per-cell processing	GPU, fragment shader
Scope	Per-layer, per-group, or global	Always global (full canvas)
Bakeable	Yes — permanently apply to cell data	No — pixel-only output
Timeline position	Attached to layers/groups	Own tracks at top of timeline
Export	All formats	Pixel formats only (image, video, React, HTML)

Tips

Combine with effects — Use cell-based effects for character/color manipulation, then add shaders for final visual polish
Start subtle — Shader effects are powerful; small values often produce the best results
Preview during playback — Shaders render in real-time on the canvas; use playback to see animated keyframes
Check export format — Remember that text and CLI exports won't include shader effects
Stack carefully — Each additional shader adds a render pass; keep stacks manageable for performance

Technical Notes

Shaders require a browser with WebGL2 support (all modern browsers)
The pipeline uses ping-pong framebuffers for multi-pass effects (glow, blur)
A dedicated snapshot texture preserves the original unprocessed image for effects that need it (glow compositing)
Shader programs are cached per GL context and recompiled only when needed