@vibecook/ghosttea-react 0.7.0 → 0.9.0

package/dist/terminal-render.worker.js

@@ -254,6 +254,13 @@ function emptyRenderMetrics() {
 }
 
 // src/renderers/types.ts
+var ANIMATED_SHADER_EFFECTS = /* @__PURE__ */ new Set([
+  "ghosttea:vhs",
+  "ghosttea:sparks-from-fire"
+]);
+function terminalEffectsNeedAnimation(effects) {
+  return effects.animate === true && (effects.shaderEffects?.some((effect) => ANIMATED_SHADER_EFFECTS.has(effect)) ?? false);
+}
 function effectiveCursorStyle(view) {
   if (!view.cursor.visible) return null;
   if (!view.focused) return CursorStyle.HollowBlock;
@@ -270,11 +277,15 @@ var DEFAULT_THEME = {
   background: [40 / 255, 44 / 255, 52 / 255, 1],
   foreground: [1, 1, 1, 1],
   cursor: [1, 1, 1, 1],
+  cursorText: [40 / 255, 44 / 255, 52 / 255, 1],
   selection: [1, 1, 1, 1],
-  selectionForeground: [40 / 255, 44 / 255, 52 / 255, 1]
+  selectionForeground: [40 / 255, 44 / 255, 52 / 255, 1],
+  backgroundOpacityCells: false
 };
 var DEFAULT_EFFECTS = {
-  postProcess: "none"
+  postProcess: "none",
+  shaderEffects: [],
+  animate: false
 };
 var CELL_WIDTH = 7.83;
 var LINE_HEIGHT = 19;
@@ -299,7 +310,7 @@ var CanvasTerminalRenderer = class {
     this.#performanceMeasurementEnabled = enabled;
   }
   mount(id, canvas) {
-    const context = canvas.getContext("2d", { alpha: false });
+    const context = canvas.getContext("2d", { alpha: true });
     if (!context) throw new Error("Canvas2D worker backend unavailable");
     this.#surfaces.set(id, { canvas, context, width: 1, height: 1, dpr: 1 });
   }
@@ -319,6 +330,7 @@ var CanvasTerminalRenderer = class {
     const surface2 = this.#surfaces.get(id);
     if (!surface2) return;
     const { context, width, height, dpr } = surface2;
+    context.clearRect(0, 0, surface2.canvas.width, surface2.canvas.height);
     context.save();
     context.setTransform(dpr, 0, 0, dpr, 0, 0);
     context.fillStyle = css(view.theme.background);
@@ -379,6 +391,13 @@ var CanvasTerminalRenderer = class {
         context.strokeRect(x + 0.5, y + 0.5, CELL_WIDTH - 1, LINE_HEIGHT - 1);
       } else {
         context.fillRect(x, y, CELL_WIDTH, LINE_HEIGHT);
+        context.save();
+        context.beginPath();
+        context.rect(x, y, CELL_WIDTH, LINE_HEIGHT);
+        context.clip();
+        context.fillStyle = css(view.theme.cursorText ?? view.theme.background);
+        context.fillText(view.rows[view.cursor.y] ?? "", ORIGIN_X, ORIGIN_Y + view.cursor.y * LINE_HEIGHT);
+        context.restore();
       }
     }
     context.restore();
@@ -416,10 +435,226 @@ function rowsForDamage(rowCount, damage, sceneValid) {
   return { full: false, rows: [...rows].sort((left, right) => left - right) };
 }
 
+// src/renderers/shader-effects.ts
+var SHADER_EFFECT_WGSL = (
+  /* wgsl */
+  `
+@group(0) @binding(0) var terminal_image: texture_2d<f32>;
+@group(0) @binding(1) var terminal_sampler: sampler;
+
+struct EffectConfig {
+  mode: u32,
+  frame: u32,
+  effect_index: u32,
+  effect_count: u32,
+  resolution: vec2f,
+  time: f32,
+  time_delta: f32,
+  cursor: vec4f,
+}
+@group(0) @binding(2) var<uniform> effect: EffectConfig;
+
+@vertex fn vertex_main(@builtin(vertex_index) vertex_index: u32) -> @builtin(position) vec4f {
+  let positions = array<vec2f, 3>(
+    vec2f(-1.0, -1.0),
+    vec2f(3.0, -1.0),
+    vec2f(-1.0, 3.0),
+  );
+  return vec4f(positions[vertex_index], 0.0, 1.0);
+}
+
+fn sample_image(uv: vec2f) -> vec4f {
+  return textureSample(terminal_image, terminal_sampler, clamp(uv, vec2f(0.0), vec2f(1.0)));
+}
+
+fn straight_rgb(sampled: vec4f) -> vec3f {
+  if (sampled.a <= 0.00001) { return vec3f(0.0); }
+  return sampled.rgb / sampled.a;
+}
+
+fn premultiplied(rgb: vec3f, alpha: f32) -> vec4f {
+  return vec4f(max(rgb, vec3f(0.0)) * alpha, alpha);
+}
+
+fn hash21(p0: vec2f) -> f32 {
+  var p = fract(p0 * vec2f(443.8975, 397.2973));
+  p += dot(p, p.yx + vec2f(19.19));
+  return fract(p.x * p.y);
+}
+
+// Existing Better CRT compatibility port. Its source carries the upstream
+// Shadertoy default CC BY-NC-SA terms; this mode preserves the already-bundled
+// behavior while keeping alpha intact.
+fn better_crt(position: vec2f, uv0: vec2f) -> vec4f {
+  var uv = uv0;
+  var dc = abs(vec2f(0.5) - uv);
+  dc *= dc;
+  uv.x = (uv.x - 0.5) * (1.0 + dc.y * 0.075) + 0.5;
+  uv.y = (uv.y - 0.5) * (1.0 + dc.x * 0.10) + 0.5;
+  let scanline = abs(sin(position.y) * 0.125);
+  let sampled = sample_image(uv);
+  return vec4f(sampled.rgb * (1.0 - scanline), sampled.a);
+}
+
+fn from_srgb1(value: f32) -> f32 {
+  return select(pow(value / 1.055 + 0.055 / 1.055, 2.4), value / 12.92, value <= 0.04045);
+}
+
+fn to_srgb1(value: f32) -> f32 {
+  return select(1.055 * pow(max(value, 0.0), 0.41666) - 0.055, value * 12.92, value < 0.0031308);
+}
+
+fn from_srgb(value: vec3f) -> vec3f {
+  return vec3f(from_srgb1(value.r), from_srgb1(value.g), from_srgb1(value.b));
+}
+
+fn to_srgb(value: vec3f) -> vec3f {
+  return vec3f(to_srgb1(value.r), to_srgb1(value.g), to_srgb1(value.b));
+}
+
+// WebGPU adaptation of Timothy Lottes' public-domain CRT scalar. The source
+// port is Unlicensed/public domain. This retains its warp, scan blur, shadow
+// mask, linear-light processing, and corner vignette in a compact GPU form.
+fn public_domain_crt(position: vec2f, uv0: vec2f) -> vec4f {
+  let aspect = effect.resolution.x / max(1.0, effect.resolution.y);
+  var centered = uv0 * 2.0 - 1.0;
+  centered *= vec2f(
+    1.0 + centered.y * centered.y / (50.0 * aspect),
+    1.0 + centered.x * centered.x / 50.0,
+  );
+  let uv = centered * 0.5 + 0.5;
+  let pixel = 1.0 / effect.resolution;
+  let center_sample = sample_image(uv);
+  let left = from_srgb(straight_rgb(sample_image(uv - vec2f(pixel.x, 0.0))));
+  let center = from_srgb(straight_rgb(center_sample));
+  let right = from_srgb(straight_rgb(sample_image(uv + vec2f(pixel.x, 0.0))));
+  var color = left * 0.18 + center * 0.64 + right * 0.18;
+  let scan = 0.58 + 0.42 * pow(max(0.0, cos(position.y * 2.0943951)), 2.0);
+  let mask_index = u32(position.x + position.y * 3.0) % 6u;
+  var mask = vec3f(0.65);
+  if (mask_index < 2u) { mask.r = 1.0; }
+  else if (mask_index < 4u) { mask.g = 1.0; }
+  else { mask.b = 1.0; }
+  color *= scan * mask;
+  let vignette_axis = clamp(1.0 - centered * centered, vec2f(0.0), vec2f(1.0));
+  color *= mix(0.5, 1.0, vignette_axis.x * vignette_axis.y);
+  let peak = max(0.00001, max(color.r, max(color.g, color.b)));
+  let tone = peak / (peak * 0.72 + 0.28);
+  color *= tone / peak;
+  let inside = all(uv >= vec2f(0.0)) && all(uv <= vec2f(1.0));
+  let alpha = select(0.0, center_sample.a, inside);
+  return premultiplied(to_srgb(color), alpha);
+}
+
+// MIT-licensed VHS effect by Alex Brinsmead, adapted from the upstream GLSL
+// to premultiplied WebGPU output.
+fn vhs(position: vec2f, uv0: vec2f) -> vec4f {
+  let distortion = 1.0;
+  let tape_wear = 1.75;
+  let color_bleed = 2.0;
+  var cc = uv0 - 0.5;
+  var warped = clamp(uv0 + cc * (dot(cc, cc) * 0.02), vec2f(0.0), vec2f(1.0));
+  warped.x += (
+    sin(warped.y * 40.0 + effect.time * 0.5) * 0.000375 +
+    sin(warped.y * 80.0 + effect.time * 0.2) * 0.0001875 +
+    (hash21(vec2f(floor(position.y), floor(effect.time * 20.0))) - 0.5) * 0.0006
+  ) * distortion;
+  let tracking_y = fract(effect.time * 0.04);
+  let band_distance = min(abs(warped.y - tracking_y), 1.0 - abs(warped.y - tracking_y));
+  let band = smoothstep(0.05, 0.0, band_distance);
+  let horizontal_offset = band * (hash21(vec2f(floor(position.y * 0.5), effect.time * 3.0)) - 0.5) * 0.006;
+  let burst_cycle = floor(effect.time / 30.0);
+  let burst_start = hash21(vec2f(burst_cycle, 88.0)) * 25.0;
+  let burst_time = effect.time - floor(effect.time / 30.0) * 30.0;
+  let burst = burst_time > burst_start && burst_time < burst_start + 5.0;
+  let jump = select(0.0, (hash21(vec2f(floor(effect.time * 2.0), 11.3)) - 0.5) * 0.08, burst);
+  let sample_uv = fract(warped + vec2f(horizontal_offset, jump));
+  let aberration = (0.0003 + band * 0.0015) * color_bleed;
+  let center_sample = sample_image(sample_uv);
+  let red_sample = straight_rgb(sample_image(sample_uv + vec2f(aberration, 0.0)));
+  let blue_sample = straight_rgb(sample_image(sample_uv - vec2f(aberration, 0.0)));
+  var color = vec3f(red_sample.r, straight_rgb(center_sample).g, blue_sample.b);
+  let pixel = 1.0 / effect.resolution.x;
+  let neighbor = straight_rgb(sample_image(sample_uv + vec2f(pixel, 0.0))) * 0.4 +
+    straight_rgb(sample_image(sample_uv + vec2f(pixel * 3.0, 0.0))) * 0.6;
+  let luma_weights = vec3f(0.299, 0.587, 0.114);
+  let luma = dot(color, luma_weights);
+  color = vec3f(luma) + mix(color - vec3f(luma), neighbor - vec3f(dot(neighbor, luma_weights)), 0.5 * color_bleed);
+  color *= 1.8;
+  let grain_time = fract(effect.time);
+  let noise1 = hash21(position + vec2f(grain_time * 100.0)) - 0.5;
+  let noise2 = hash21(position + vec2f(grain_time * 200.0)) - 0.5;
+  let gray = dot(color, luma_weights);
+  color += (color - vec3f(gray)) * vec3f(noise1, noise2, -noise1) * 0.15 * tape_wear;
+  color += vec3f(noise1 * 0.05 * tape_wear);
+  color *= mix(vec3f(1.0), vec3f(1.03, 1.01, 0.96), tape_wear);
+  let vignette = uv0 * (1.0 - uv0);
+  color *= mix(1.0, clamp(vignette.x * vignette.y * 15.0, 0.0, 1.0), 0.35);
+  let static_time = fract(effect.time * 20.0);
+  let static_hash = hash21(vec2f(floor(position.x / 10.0), floor(position.y / 2.0) + static_time * 500.0) + vec2f(static_time * 77.0));
+  color = mix(color, vec3f(1.0), step(0.9991, static_hash) * 0.135);
+  return premultiplied(color, center_sample.a);
+}
+
+// Ember overlay inspired by Jan Mr\xF3z's CC BY 3.0 shader, adapted for the
+// Ghostty pipeline. Attribution is retained in THIRD_PARTY_NOTICES.md.
+fn sparks(position: vec2f, uv: vec2f) -> vec4f {
+  let terminal = sample_image(uv);
+  var spark = vec3f(0.0);
+  var spark_alpha = 0.0;
+  for (var layer = 0u; layer < 8u; layer += 1u) {
+    let layer_value = f32(layer);
+    let scale = 18.0 + layer_value * 7.0;
+    let drift = vec2f(effect.time * (0.35 + layer_value * 0.025), -effect.time * (0.7 + layer_value * 0.05));
+    let grid = uv * vec2f(scale, scale * 1.6) + drift;
+    let cell = floor(grid);
+    let random = hash21(cell + vec2f(layer_value * 13.7, layer_value * 5.1));
+    let local = fract(grid) - vec2f(random, fract(random * 17.17));
+    let radius = 0.018 + 0.045 * hash21(cell + vec2f(31.0));
+    let intensity = smoothstep(radius, 0.0, length(local)) * step(0.79, random);
+    let flicker = 0.55 + 0.45 * sin(effect.time * (5.0 + random * 4.0) + random * 31.0);
+    let value = intensity * flicker;
+    spark += vec3f(1.5, 0.42, 0.05) * value;
+    spark_alpha = max(spark_alpha, value * 0.78);
+  }
+  let terminal_rgb = straight_rgb(terminal);
+  let background_weight = 1.0 - smoothstep(0.12, 0.55, dot(terminal_rgb, vec3f(0.2126, 0.7152, 0.0722)));
+  let overlay_alpha = spark_alpha * background_weight;
+  let alpha = overlay_alpha + terminal.a * (1.0 - overlay_alpha);
+  let rgb = select(
+    vec3f(0.0),
+    (spark * overlay_alpha + terminal_rgb * terminal.a * (1.0 - overlay_alpha)) / max(alpha, 0.00001),
+    alpha > 0.00001,
+  );
+  return premultiplied(rgb, alpha);
+}
+
+@fragment fn fragment_main(@builtin(position) position: vec4f) -> @location(0) vec4f {
+  let uv = position.xy / effect.resolution;
+  switch effect.mode {
+    case 1u: { return better_crt(position.xy, uv); }
+    case 2u: { return public_domain_crt(position.xy, uv); }
+    case 3u: { return vhs(position.xy, uv); }
+    case 4u: { return sparks(position.xy, uv); }
+    default: { return sample_image(uv); }
+  }
+}
+`
+);
+
 // src/renderers/webgpu-renderer.ts
 var ATLAS_SIZE = 2048;
 var GEOMETRY_CACHE_LIMIT = 8;
 var FONT_STACK = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
+var EFFECT_MODES = {
+  "ghosttea:better-crt": 1,
+  "ghosttea:crt": 2,
+  "ghosttea:vhs": 3,
+  "ghosttea:sparks-from-fire": 4
+};
+function effectIntermediateTextureCount(effectPassCount) {
+  return Math.min(2, Math.max(0, Math.trunc(effectPassCount) - 1));
+}
 var RECT_SHADER = (
   /* wgsl */
   `
@@ -553,54 +788,13 @@ struct VertexOutput {
 }
 `
 );
-var BETTER_CRT_SHADER = (
-  /* wgsl */
-  `
-@group(0) @binding(0) var terminal_image: texture_2d<f32>;
-@group(0) @binding(1) var terminal_sampler: sampler;
-struct PostProcessConfig {
-  // A vec4 keeps the WGSL uniform layout equal to the host's 16-byte buffer.
-  enabled: vec4u,
-}
-@group(0) @binding(2) var<uniform> post_process: PostProcessConfig;
-
-@vertex fn vertex_main(@builtin(vertex_index) vertex_index: u32) -> @builtin(position) vec4f {
-  let positions = array<vec2f, 3>(
-    vec2f(-1.0, -1.0),
-    vec2f(3.0, -1.0),
-    vec2f(-1.0, 3.0),
-  );
-  return vec4f(positions[vertex_index], 0.0, 1.0);
-}
-
-@fragment fn fragment_main(@builtin(position) position: vec4f) -> @location(0) vec4f {
-  let dimensions = vec2f(textureDimensions(terminal_image));
-  var uv = position.xy / dimensions;
-  if (post_process.enabled.x == 0u) {
-    return textureSample(terminal_image, terminal_sampler, uv);
-  }
-  var dc = abs(vec2f(0.5) - uv);
-  dc *= dc;
-
-  // These constants are the active Ghostty shader's warp = 0.25 and
-  // scan = 0.50 values.
-  uv.x -= 0.5;
-  uv.x *= 1.0 + dc.y * 0.075;
-  uv.x += 0.5;
-  uv.y -= 0.5;
-  uv.y *= 1.0 + dc.x * 0.10;
-  uv.y += 0.5;
-
-  let scanline = abs(sin(position.y) * 0.125);
-  let color = textureSample(terminal_image, terminal_sampler, uv).rgb;
-  return vec4f(mix(color, vec3f(0.0), scanline), 1.0);
-}
-`
-);
 var premultipliedBlend = {
   color: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
   alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" }
 };
+function premultipliedClear(color) {
+  return { r: color[0] * color[3], g: color[1] * color[3], b: color[2] * color[3], a: color[3] };
+}
 var DynamicVertexBuffer = class {
   constructor(device, label) {
     this.device = device;
@@ -890,16 +1084,20 @@ function geometryCacheKey(view, rows, hasNativeRows, atlasGenerations) {
     [
       ...view.theme.background,
       ...view.theme.foreground,
+      ...view.theme.cursor,
+      ...view.theme.cursorText ?? view.theme.background,
       ...view.theme.selection,
       ...view.theme.selectionForeground
     ].join(","),
+    view.theme.backgroundOpacityCells ? "opacity-cells" : "opaque-cells",
     selection,
+    effectiveCursorStyle(view) === CursorStyle.Block ? `${view.cursor.x},${view.cursor.y}` : "-",
     atlasGenerations.join(",")
   ].join("|");
 }
 function pushCursorVertices(vertices, view, renderRowSet, scale, viewportWidth, viewportHeight) {
   const cursorStyle = effectiveCursorStyle(view);
-  if (cursorStyle === null || !renderRowSet.has(view.cursor.y)) return;
+  if (cursorStyle === null || cursorStyle === CursorStyle.Block || !renderRowSet.has(view.cursor.y)) return;
   const x = (ORIGIN_X + view.cursor.x * CELL_WIDTH) * scale;
   const y = (ORIGIN_Y + view.cursor.y * LINE_HEIGHT) * scale;
   const width = CELL_WIDTH * scale;
@@ -1090,6 +1288,22 @@ function selectionContains(selection, row, column) {
   const last = row === end.row ? end.column : Number.MAX_SAFE_INTEGER;
   return column >= first && column <= last;
 }
+function blockCursorContains(view, row, column, span = 1) {
+  return effectiveCursorStyle(view) === CursorStyle.Block && view.cursor.y === row && view.cursor.x >= column && view.cursor.x < column + Math.max(1, span);
+}
+function pushBlockCursorBackground(vertices, view, renderRows, scale, viewportWidth, viewportHeight) {
+  if (effectiveCursorStyle(view) !== CursorStyle.Block || !renderRows.includes(view.cursor.y)) return;
+  pushRectangle(
+    vertices,
+    (ORIGIN_X + view.cursor.x * CELL_WIDTH) * scale,
+    (ORIGIN_Y + view.cursor.y * LINE_HEIGHT) * scale,
+    CELL_WIDTH * scale,
+    LINE_HEIGHT * scale,
+    view.theme.cursor,
+    viewportWidth,
+    viewportHeight
+  );
+}
 function resolveStyle(style, theme) {
   let foreground = style?.foreground ? rgb(style.foreground) : theme.foreground;
   let background = style?.background ? rgb(style.background) : null;
@@ -1098,6 +1312,9 @@ function resolveStyle(style, theme) {
     foreground = background ?? theme.background;
     background = originalForeground;
   }
+  if (background && theme.backgroundOpacityCells) {
+    background = [background[0], background[1], background[2], theme.background[3]];
+  }
   if (style?.faint) foreground = [foreground[0], foreground[1], foreground[2], foreground[3] * 0.55];
   return {
     foreground,
@@ -1241,7 +1458,10 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
       label: "terminal color glyph shader",
       code: COLOR_GLYPH_SHADER
     });
-    const postProcessModule = device.createShaderModule({ label: "Ghostty bettercrt shader", code: BETTER_CRT_SHADER });
+    const effectModule = device.createShaderModule({
+      label: "Ghosttea shader effect registry",
+      code: SHADER_EFFECT_WGSL
+    });
     this.#rectanglePipeline = device.createRenderPipeline({
       label: "terminal rectangle pipeline",
       layout: "auto",
@@ -1268,6 +1488,28 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
       },
       primitive: { topology: "triangle-list" }
     });
+    this.#rectangleOverwritePipeline = device.createRenderPipeline({
+      label: "terminal row-reset overwrite pipeline",
+      layout: "auto",
+      vertex: {
+        module: rectangleModule,
+        entryPoint: "vertex_main",
+        buffers: [
+          {
+            arrayStride: 40,
+            stepMode: "instance",
+            attributes: [
+              { shaderLocation: 0, offset: 0, format: "float32x2" },
+              { shaderLocation: 1, offset: 8, format: "float32x2" },
+              { shaderLocation: 2, offset: 16, format: "float32x2" },
+              { shaderLocation: 3, offset: 24, format: "float32x4" }
+            ]
+          }
+        ]
+      },
+      fragment: { module: rectangleModule, entryPoint: "fragment_main", targets: [{ format }] },
+      primitive: { topology: "triangle-list" }
+    });
     this.#glyphPipeline = device.createRenderPipeline({
       label: "terminal glyph pipeline",
       layout: "auto",
@@ -1339,15 +1581,15 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
       },
       primitive: { topology: "triangle-list" }
     });
-    this.#postProcessPipeline = device.createRenderPipeline({
-      label: "Ghostty custom shader pipeline",
+    this.#effectPipeline = device.createRenderPipeline({
+      label: "Ghosttea ordered shader effect pipeline",
       layout: "auto",
-      vertex: { module: postProcessModule, entryPoint: "vertex_main" },
-      fragment: { module: postProcessModule, entryPoint: "fragment_main", targets: [{ format }] },
+      vertex: { module: effectModule, entryPoint: "vertex_main" },
+      fragment: { module: effectModule, entryPoint: "fragment_main", targets: [{ format }] },
       primitive: { topology: "triangle-list" }
     });
-    this.#postProcessSampler = device.createSampler({
-      label: "Ghostty custom shader sampler",
+    this.#effectSampler = device.createSampler({
+      label: "Ghosttea shader effect sampler",
       addressModeU: "clamp-to-edge",
       addressModeV: "clamp-to-edge",
       minFilter: "linear",
@@ -1370,11 +1612,12 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
   kind = "webgpu";
   #surfaces = /* @__PURE__ */ new Map();
   #rectanglePipeline;
+  #rectangleOverwritePipeline;
   #glyphPipeline;
   #fallbackGlyphPipeline;
   #colorGlyphPipeline;
-  #postProcessPipeline;
-  #postProcessSampler;
+  #effectPipeline;
+  #effectSampler;
   #monoAtlas;
   #colorAtlas;
   #fallbackAtlas;
@@ -1399,18 +1642,15 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
     const context = canvas.getContext("webgpu");
     if (!context) throw new Error("WebGPU canvas context unavailable");
     const sceneTexture = this.#createSceneTexture(canvas.width, canvas.height);
-    const postProcessConfigBuffer = this.device.createBuffer({
-      label: `Ghostty custom shader configuration ${id}`,
-      size: 16,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-    });
     const surface2 = {
       canvas,
       context,
       sceneTexture,
-      postProcessConfigBuffer,
-      postProcessBindGroup: this.#createPostProcessBindGroup(sceneTexture, postProcessConfigBuffer),
-      postProcessEnabled: void 0,
+      effectTextures: [],
+      effectPasses: [],
+      effectSignature: "",
+      effectFrame: 0,
+      lastEffectTime: 0,
       width: 1,
       height: 1,
       dpr: 1,
@@ -1431,7 +1671,8 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
     if (!surface2) return;
     surface2.context.unconfigure();
     surface2.sceneTexture.destroy();
-    surface2.postProcessConfigBuffer.destroy();
+    for (const texture of surface2.effectTextures) texture.destroy();
+    for (const pass of surface2.effectPasses) pass.configBuffer.destroy();
     surface2.rectangleBuffer.destroy();
     surface2.glyphBuffer.destroy();
     surface2.colorGlyphBuffer.destroy();
@@ -1453,11 +1694,12 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
   #configure(surface2) {
     surface2.context.configure({ device: this.device, format: this.format, alphaMode: "premultiplied" });
     surface2.sceneTexture.destroy();
+    for (const texture of surface2.effectTextures) texture.destroy();
+    for (const pass of surface2.effectPasses) pass.configBuffer.destroy();
     surface2.sceneTexture = this.#createSceneTexture(surface2.canvas.width, surface2.canvas.height);
-    surface2.postProcessBindGroup = this.#createPostProcessBindGroup(
-      surface2.sceneTexture,
-      surface2.postProcessConfigBuffer
-    );
+    surface2.effectTextures = [];
+    surface2.effectPasses = [];
+    surface2.effectSignature = "";
     clearGeometryCache(surface2);
     surface2.sceneValid = false;
   }
@@ -1469,29 +1711,116 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
       usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
     });
   }
-  #createPostProcessBindGroup(texture, configBuffer) {
+  #createEffectTexture(width, height, suffix) {
+    return this.device.createTexture({
+      label: `terminal shader ping-pong ${suffix}`,
+      size: [Math.max(1, width), Math.max(1, height)],
+      format: this.format,
+      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+    });
+  }
+  #createEffectBindGroup(texture, configBuffer) {
     return this.device.createBindGroup({
-      label: "Ghostty custom shader bindings",
-      layout: this.#postProcessPipeline.getBindGroupLayout(0),
+      label: "Ghosttea shader effect bindings",
+      layout: this.#effectPipeline.getBindGroupLayout(0),
       entries: [
         { binding: 0, resource: texture.createView() },
-        { binding: 1, resource: this.#postProcessSampler },
+        { binding: 1, resource: this.#effectSampler },
         { binding: 2, resource: { buffer: configBuffer } }
       ]
     });
   }
+  #shaderStack(view) {
+    const configured = view.effects?.shaderEffects?.filter((id) => EFFECT_MODES[id] !== void 0) ?? [];
+    if (configured.length > 0) return [...configured];
+    return view.effects?.postProcess === "better-crt" ? ["ghosttea:better-crt"] : [];
+  }
+  #ensureEffectPasses(surface2, stack) {
+    const signature = stack.join("\0") || "ghosttea:blit";
+    if (surface2.effectSignature === signature) return;
+    for (const pass of surface2.effectPasses) pass.configBuffer.destroy();
+    const modes = stack.length > 0 ? stack.map((id) => EFFECT_MODES[id]) : [0];
+    const intermediateCount = effectIntermediateTextureCount(modes.length);
+    while (surface2.effectTextures.length > intermediateCount) surface2.effectTextures.pop().destroy();
+    while (surface2.effectTextures.length < intermediateCount) {
+      const suffix = surface2.effectTextures.length === 0 ? "A" : "B";
+      surface2.effectTextures.push(this.#createEffectTexture(surface2.canvas.width, surface2.canvas.height, suffix));
+    }
+    surface2.effectPasses = modes.map((mode, index) => {
+      const configBuffer = this.device.createBuffer({
+        label: `Ghosttea shader effect configuration ${index}`,
+        size: 48,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+      });
+      const inputTexture = index === 0 ? surface2.sceneTexture : surface2.effectTextures[(index - 1) % 2];
+      return {
+        mode,
+        configBuffer,
+        bindGroup: this.#createEffectBindGroup(inputTexture, configBuffer)
+      };
+    });
+    surface2.effectSignature = signature;
+    surface2.effectFrame = 0;
+    surface2.lastEffectTime = 0;
+  }
+  #encodeEffectStack(surface2, view, encoder) {
+    const stack = this.#shaderStack(view);
+    this.#ensureEffectPasses(surface2, stack);
+    const now = view.effects?.animate ? performance.now() / 1e3 : 0;
+    const delta = surface2.lastEffectTime > 0 ? Math.min(0.1, Math.max(0, now - surface2.lastEffectTime)) : 0;
+    surface2.lastEffectTime = now;
+    const passCount = surface2.effectPasses.length;
+    for (let index = 0; index < passCount; index += 1) {
+      const effectPass = surface2.effectPasses[index];
+      const storage = new ArrayBuffer(48);
+      const values = new DataView(storage);
+      values.setUint32(0, effectPass.mode, true);
+      values.setUint32(4, surface2.effectFrame, true);
+      values.setUint32(8, index, true);
+      values.setUint32(12, passCount, true);
+      values.setFloat32(16, surface2.canvas.width, true);
+      values.setFloat32(20, surface2.canvas.height, true);
+      values.setFloat32(24, now, true);
+      values.setFloat32(28, delta, true);
+      values.setFloat32(32, (ORIGIN_X + view.cursor.x * CELL_WIDTH) * surface2.dpr, true);
+      values.setFloat32(36, (ORIGIN_Y + view.cursor.y * LINE_HEIGHT) * surface2.dpr, true);
+      values.setFloat32(40, view.cursor.visible ? 1 : 0, true);
+      values.setFloat32(44, view.cursor.style, true);
+      this.device.queue.writeBuffer(effectPass.configBuffer, 0, storage);
+      const last = index === passCount - 1;
+      const output = last ? surface2.context.getCurrentTexture().createView() : surface2.effectTextures[index % 2].createView();
+      const pass = encoder.beginRenderPass({
+        label: `Ghosttea shader effect pass ${index + 1}/${passCount}`,
+        colorAttachments: [
+          {
+            view: output,
+            clearValue: { r: 0, g: 0, b: 0, a: 0 },
+            loadOp: "clear",
+            storeOp: "store"
+          }
+        ]
+      });
+      pass.setPipeline(this.#effectPipeline);
+      pass.setBindGroup(0, effectPass.bindGroup);
+      pass.draw(3);
+      pass.end();
+    }
+    surface2.effectFrame += 1;
+    return passCount;
+  }
+  #encodeEffectsOnly(surface2, view, encoder) {
+    const effectPassCount = this.#encodeEffectStack(surface2, view, encoder);
+    if (!this.#performanceMeasurementEnabled) return void 0;
+    return {
+      ...emptyRenderMetrics(),
+      canvasPixels: surface2.canvas.width * surface2.canvas.height,
+      renderPasses: effectPassCount,
+      drawCalls: effectPassCount
+    };
+  }
   render(id, view) {
     const surface2 = this.#surfaces.get(id);
     if (!surface2) return;
-    const postProcessEnabled = view.effects?.postProcess === "better-crt";
-    if (surface2.postProcessEnabled !== postProcessEnabled) {
-      surface2.postProcessEnabled = postProcessEnabled;
-      this.device.queue.writeBuffer(
-        surface2.postProcessConfigBuffer,
-        0,
-        new Uint32Array([Number(postProcessEnabled), 0, 0, 0])
-      );
-    }
     const encoder = this.device.createCommandEncoder({ label: `terminal frame ${id}` });
     const metrics = view.damage?.geometryChanged === false ? this.#encodeCachedRender(id, view, encoder) : this.#encodeRender(id, view, encoder);
     this.device.queue.submit([encoder.finish()]);
@@ -1504,16 +1833,6 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
     const encoder = this.device.createCommandEncoder({ label: `terminal frame batch (${active.length} panes)` });
     const byId = /* @__PURE__ */ new Map();
     for (const { id, view } of active) {
-      const surface2 = this.#surfaces.get(id);
-      const postProcessEnabled = view.effects?.postProcess === "better-crt";
-      if (surface2.postProcessEnabled !== postProcessEnabled) {
-        surface2.postProcessEnabled = postProcessEnabled;
-        this.device.queue.writeBuffer(
-          surface2.postProcessConfigBuffer,
-          0,
-          new Uint32Array([Number(postProcessEnabled), 0, 0, 0])
-        );
-      }
       byId.set(
         id,
         view.damage?.geometryChanged === false ? this.#encodeCachedRender(id, view, encoder) : this.#encodeRender(id, view, encoder)
@@ -1561,14 +1880,13 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
           top,
           viewportWidth,
           Math.max(0, bottom - top),
-          // The rectangle pipeline blends. Force the row reset opaque so it
-          // replaces stale scene pixels even when a theme carries alpha.
-          [view.theme.background[0], view.theme.background[1], view.theme.background[2], 1],
+          view.theme.background,
           viewportWidth,
           viewportHeight
         );
       }
     }
+    const rowResetInstanceCount = rectangleVertices.length / 10;
     for (const row of renderRows) {
       for (const run of view.nativeStyleRows[row] ?? []) {
         const style = styleFor(run.styleId);
@@ -1605,6 +1923,7 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
         );
       }
     }
+    pushBlockCursorBackground(rectangleVertices, view, renderRows, scale, viewportWidth, viewportHeight);
     const selectionInstanceCount = rectangleVertices.length / 10 - backgroundInstanceCount;
     if (!hasNativeRows) {
       this.#fallbackAtlas.prepare(
@@ -1621,7 +1940,7 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
           const style = styleFor(instance.styleId);
           if (style.invisible) continue;
           const isSelected = selectionContains(selection, row, instance.cellStart);
-          const foreground = isSelected ? view.theme.selectionForeground : style.foreground;
+          const foreground = blockCursorContains(view, row, instance.cellStart, instance.cellSpan) ? view.theme.cursorText ?? view.theme.background : isSelected ? view.theme.selectionForeground : style.foreground;
           const boxDrawing = boxCells.get(instance.cellStart);
           if (boxDrawing) {
             let backdrop = style.background ?? view.theme.background;
@@ -1676,7 +1995,7 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
           const glyph = this.#fallbackAtlas.glyph(grapheme, scale);
           const cells = glyph?.cells ?? graphemeCellWidth(grapheme);
           if (glyph) {
-            const foreground = selectionContains(selection, row, column) ? view.theme.selectionForeground : view.theme.foreground;
+            const foreground = blockCursorContains(view, row, column, cells) ? view.theme.cursorText ?? view.theme.background : selectionContains(selection, row, column) ? view.theme.selectionForeground : view.theme.foreground;
             pushGlyph(
               fallbackGlyphVertices,
               (ORIGIN_X + column * CELL_WIDTH) * scale,
@@ -1734,6 +2053,7 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
       glyphData: new Float32Array(glyphVertices),
       colorGlyphData: new Float32Array(colorGlyphVertices),
       fallbackGlyphData: new Float32Array(fallbackGlyphVertices),
+      rowResetInstanceCount,
       backgroundInstanceCount,
       selectionInstanceCount,
       decorationInstanceStart,
@@ -1792,14 +2112,13 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
           top,
           viewportWidth,
           Math.max(0, bottom - top),
-          // The rectangle pipeline blends. Force the row reset opaque so it
-          // replaces stale scene pixels even when a theme carries alpha.
-          [view.theme.background[0], view.theme.background[1], view.theme.background[2], 1],
+          view.theme.background,
           viewportWidth,
           viewportHeight
         );
       }
     }
+    const rowResetInstanceCount = rectangleVertices.length / 10;
     for (const row of renderRows) {
       for (const run of view.nativeStyleRows[row] ?? []) {
         const style = styleFor(run.styleId);
@@ -1836,6 +2155,7 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
         );
       }
     }
+    pushBlockCursorBackground(rectangleVertices, view, renderRows, scale, viewportWidth, viewportHeight);
     const selectionInstanceCount = rectangleVertices.length / 10 - backgroundInstanceCount;
     const hasNativeRows = view.nativeRows.some((row) => row.length > 0);
     if (!hasNativeRows) {
@@ -1853,7 +2173,7 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
           const style = styleFor(instance.styleId);
           if (style.invisible) continue;
           const isSelected = selectionContains(selection, row, instance.cellStart);
-          const foreground = isSelected ? view.theme.selectionForeground : style.foreground;
+          const foreground = blockCursorContains(view, row, instance.cellStart, instance.cellSpan) ? view.theme.cursorText ?? view.theme.background : isSelected ? view.theme.selectionForeground : style.foreground;
           const boxDrawing = boxCells.get(instance.cellStart);
           if (boxDrawing) {
             let backdrop = style.background ?? view.theme.background;
@@ -1910,7 +2230,7 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
           const glyph = this.#fallbackAtlas.glyph(grapheme, scale);
           const cells = glyph?.cells ?? graphemeCellWidth(grapheme);
           if (glyph) {
-            const foreground = selectionContains(selection, row, column) ? view.theme.selectionForeground : view.theme.foreground;
+            const foreground = blockCursorContains(view, row, column, cells) ? view.theme.cursorText ?? view.theme.background : selectionContains(selection, row, column) ? view.theme.selectionForeground : view.theme.foreground;
             pushGlyph(
               fallbackGlyphVertices,
               (ORIGIN_X + column * CELL_WIDTH) * scale,
@@ -2026,7 +2346,7 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
           viewportWidth,
           viewportHeight
         );
-      } else {
+      } else if (cursorStyle !== CursorStyle.Block) {
         pushRectangle(rectangleVertices, x, y, width, height, cursorColor, viewportWidth, viewportHeight);
       }
     }
@@ -2045,21 +2365,21 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
       colorAttachments: [
         {
           view: surface2.sceneTexture.createView(),
-          clearValue: {
-            r: view.theme.background[0],
-            g: view.theme.background[1],
-            b: view.theme.background[2],
-            a: view.theme.background[3]
-          },
+          clearValue: premultipliedClear(view.theme.background),
           loadOp: fullRedraw ? "clear" : "load",
           storeOp: "store"
         }
       ]
     });
-    if (rectangleBuffer && backgroundInstanceCount > 0) {
+    if (rectangleBuffer && rowResetInstanceCount > 0) {
+      pass.setPipeline(this.#rectangleOverwritePipeline);
+      pass.setVertexBuffer(0, rectangleBuffer);
+      pass.draw(6, rowResetInstanceCount);
+    }
+    if (rectangleBuffer && backgroundInstanceCount > rowResetInstanceCount) {
       pass.setPipeline(this.#rectanglePipeline);
       pass.setVertexBuffer(0, rectangleBuffer);
-      pass.draw(6, backgroundInstanceCount);
+      pass.draw(6, backgroundInstanceCount - rowResetInstanceCount, 0, rowResetInstanceCount);
     }
     if (rectangleBuffer && selectionInstanceCount > 0) {
       pass.setPipeline(this.#rectanglePipeline);
@@ -2095,26 +2415,7 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
       pass.draw(6, cursorInstanceCount, 0, cursorInstanceStart);
     }
     pass.end();
-    const postProcessPass = encoder.beginRenderPass({
-      label: `Ghostty custom shader pass ${id}`,
-      colorAttachments: [
-        {
-          view: surface2.context.getCurrentTexture().createView(),
-          clearValue: {
-            r: view.theme.background[0],
-            g: view.theme.background[1],
-            b: view.theme.background[2],
-            a: 1
-          },
-          loadOp: "clear",
-          storeOp: "store"
-        }
-      ]
-    });
-    postProcessPass.setPipeline(this.#postProcessPipeline);
-    postProcessPass.setBindGroup(0, surface2.postProcessBindGroup);
-    postProcessPass.draw(3);
-    postProcessPass.end();
+    const effectPassCount = this.#encodeEffectStack(surface2, view, encoder);
     surface2.sceneValid = true;
     if (!this.#performanceMeasurementEnabled) return void 0;
     const monoUploadsAfter = this.#monoAtlas.uploadMetrics();
@@ -2128,8 +2429,8 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
       geometryCacheHits: 0,
       geometryCacheMisses: 0,
       canvasPixels: viewportWidth * viewportHeight,
-      renderPasses: 2,
-      drawCalls: Number(backgroundInstanceCount > 0) + Number(selectionInstanceCount > 0) + Number(glyphData.length > 0) + Number(colorGlyphData.length > 0) + Number(fallbackGlyphData.length > 0) + Number(decorationInstanceCount > 0) + Number(cursorInstanceCount > 0) + 1,
+      renderPasses: 1 + effectPassCount,
+      drawCalls: Number(rowResetInstanceCount > 0) + Number(backgroundInstanceCount > rowResetInstanceCount) + Number(selectionInstanceCount > 0) + Number(glyphData.length > 0) + Number(colorGlyphData.length > 0) + Number(fallbackGlyphData.length > 0) + Number(decorationInstanceCount > 0) + Number(cursorInstanceCount > 0) + effectPassCount,
       rectangleVertices: rectangleVertices.length / 10 * 6,
       monoGlyphVertices: glyphVertices.length / 12 * 6,
       colorGlyphVertices: colorGlyphVertices.length / 12 * 6,
@@ -2142,9 +2443,12 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
   #encodeCachedRender(id, view, encoder) {
     const surface2 = this.#surfaces.get(id);
     if (!surface2) return;
-    if (!surface2.sceneValid || !view.damage || view.damage.full) return this.#encodeRender(id, view, encoder);
+    if (!surface2.sceneValid || !view.damage || view.damage.full) {
+      return this.#encodeRender(id, view, encoder);
+    }
     const rowCount = Math.max(view.rows.length, view.nativeRows.length, view.nativeStyleRows.length);
     const damage = rowsForDamage(rowCount, view.damage, surface2.sceneValid);
+    if (damage.rows.length === 0) return this.#encodeEffectsOnly(surface2, view, encoder);
     const monoUploadsBefore = this.#performanceMeasurementEnabled ? this.#monoAtlas.uploadMetrics() : void 0;
     const colorUploadsBefore = this.#performanceMeasurementEnabled ? this.#colorAtlas.uploadMetrics() : void 0;
     const fallbackUploadsBefore = this.#performanceMeasurementEnabled ? this.#fallbackAtlas.uploadMetrics() : void 0;
@@ -2187,6 +2491,7 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
         glyphBuffer: promote ? createCachedVertexBuffer(this.device, `cached glyphs ${id}`, cpu.glyphData) : surface2.glyphBuffer.write(cpu.glyphData),
         colorGlyphBuffer: promote ? createCachedVertexBuffer(this.device, `cached color glyphs ${id}`, cpu.colorGlyphData) : surface2.colorGlyphBuffer.write(cpu.colorGlyphData),
         fallbackGlyphBuffer: promote ? createCachedVertexBuffer(this.device, `cached fallback glyphs ${id}`, cpu.fallbackGlyphData) : surface2.fallbackGlyphBuffer.write(cpu.fallbackGlyphData),
+        rowResetInstanceCount: cpu.rowResetInstanceCount,
         backgroundInstanceCount: cpu.backgroundInstanceCount,
         selectionInstanceCount: cpu.selectionInstanceCount,
         decorationInstanceStart: cpu.decorationInstanceStart,
@@ -2228,21 +2533,26 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
       colorAttachments: [
         {
           view: surface2.sceneTexture.createView(),
-          clearValue: {
-            r: view.theme.background[0],
-            g: view.theme.background[1],
-            b: view.theme.background[2],
-            a: view.theme.background[3]
-          },
+          clearValue: premultipliedClear(view.theme.background),
           loadOp: "load",
           storeOp: "store"
         }
       ]
     });
-    if (geometry.rectangleBuffer && geometry.backgroundInstanceCount > 0) {
+    if (geometry.rectangleBuffer && geometry.rowResetInstanceCount > 0) {
+      pass.setPipeline(this.#rectangleOverwritePipeline);
+      pass.setVertexBuffer(0, geometry.rectangleBuffer);
+      pass.draw(6, geometry.rowResetInstanceCount);
+    }
+    if (geometry.rectangleBuffer && geometry.backgroundInstanceCount > geometry.rowResetInstanceCount) {
       pass.setPipeline(this.#rectanglePipeline);
       pass.setVertexBuffer(0, geometry.rectangleBuffer);
-      pass.draw(6, geometry.backgroundInstanceCount);
+      pass.draw(
+        6,
+        geometry.backgroundInstanceCount - geometry.rowResetInstanceCount,
+        0,
+        geometry.rowResetInstanceCount
+      );
     }
     if (geometry.rectangleBuffer && geometry.selectionInstanceCount > 0) {
       pass.setPipeline(this.#rectanglePipeline);
@@ -2278,26 +2588,7 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
       pass.draw(6, cursorInstanceCount, 0, cursorInstanceStart);
     }
     pass.end();
-    const postProcessPass = encoder.beginRenderPass({
-      label: `Ghostty custom shader pass ${id}`,
-      colorAttachments: [
-        {
-          view: surface2.context.getCurrentTexture().createView(),
-          clearValue: {
-            r: view.theme.background[0],
-            g: view.theme.background[1],
-            b: view.theme.background[2],
-            a: 1
-          },
-          loadOp: "clear",
-          storeOp: "store"
-        }
-      ]
-    });
-    postProcessPass.setPipeline(this.#postProcessPipeline);
-    postProcessPass.setBindGroup(0, surface2.postProcessBindGroup);
-    postProcessPass.draw(3);
-    postProcessPass.end();
+    const effectPassCount = this.#encodeEffectStack(surface2, view, encoder);
     surface2.sceneValid = true;
     if (!this.#performanceMeasurementEnabled) return void 0;
     const monoUploadsAfter = this.#monoAtlas.uploadMetrics();
@@ -2311,8 +2602,8 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
       geometryCacheHits: Number(cacheHit),
       geometryCacheMisses: Number(!cacheHit),
       canvasPixels: viewportWidth * viewportHeight,
-      renderPasses: 2,
-      drawCalls: Number(geometry.backgroundInstanceCount > 0) + Number(geometry.selectionInstanceCount > 0) + Number(geometry.glyphInstanceCount > 0) + Number(geometry.colorGlyphInstanceCount > 0) + Number(geometry.fallbackGlyphInstanceCount > 0) + Number(geometry.decorationInstanceCount > 0) + Number(cursorInstanceCount > 0) + 1,
+      renderPasses: 1 + effectPassCount,
+      drawCalls: Number(geometry.rowResetInstanceCount > 0) + Number(geometry.backgroundInstanceCount > geometry.rowResetInstanceCount) + Number(geometry.selectionInstanceCount > 0) + Number(geometry.glyphInstanceCount > 0) + Number(geometry.colorGlyphInstanceCount > 0) + Number(geometry.fallbackGlyphInstanceCount > 0) + Number(geometry.decorationInstanceCount > 0) + Number(cursorInstanceCount > 0) + effectPassCount,
       rectangleVertices: (geometry.rectangleInstanceCount + cursorInstanceCount) * 6,
       monoGlyphVertices: geometry.glyphInstanceCount * 6,
       colorGlyphVertices: geometry.colorGlyphInstanceCount * 6,
@@ -2438,6 +2729,7 @@ var forceCanvasFallback = false;
 var partialRenderingEnabled = true;
 var pendingFrameCreditBytes = 0;
 var frameCreditTimer;
+var shaderAnimationScheduled = false;
 var performanceMeasurement;
 function appendPerformanceSample(samples, value) {
   if (samples.length < MAX_PERFORMANCE_SAMPLES) samples.push(value);
@@ -2762,6 +3054,7 @@ async function recoverDevice(info) {
       next.resize(id, mount2.size);
       invalidateFull(id);
     }
+    scheduleShaderAnimation();
     postToRenderer({ type: "renderer-status", backend: next.kind, recovered: true });
   } catch (error) {
     console.error("[terminal-renderer] WebGPU recovery failed", error);
@@ -2785,6 +3078,23 @@ function scheduleFlush() {
   if (typeof self.requestAnimationFrame === "function") self.requestAnimationFrame(run);
   else setTimeout(run, 8);
 }
+function shaderAnimationActive(surfaceId, presentation) {
+  return renderer?.kind === "webgpu" && mounts.has(surfaceId) && !occluded.has(surfaceId) && presentation.focused && terminalEffectsNeedAnimation(presentation.effects);
+}
+function scheduleShaderAnimation() {
+  if (shaderAnimationScheduled || ![...surfaces].some(([surfaceId, presentation]) => shaderAnimationActive(surfaceId, presentation)))
+    return;
+  shaderAnimationScheduled = true;
+  const run = () => {
+    shaderAnimationScheduled = false;
+    for (const [surfaceId, presentation] of surfaces) {
+      if (shaderAnimationActive(surfaceId, presentation)) markDirty(surfaceId);
+    }
+    scheduleShaderAnimation();
+  };
+  if (typeof self.requestAnimationFrame === "function") self.requestAnimationFrame(run);
+  else setTimeout(run, 16);
+}
 async function flush() {
   const backend = await ensureRenderer();
   const ids = [...dirty].filter((id) => !occluded.has(id));
@@ -2888,6 +3198,7 @@ async function mount(surfaceId, sessionHandle, canvas) {
   backend.mount(surfaceId, canvas);
   backend.resize(surfaceId, entry.size);
   invalidateFull(surfaceId);
+  scheduleShaderAnimation();
 }
 function applyFrame(packet) {
   const active = performanceMeasurement;
@@ -3174,6 +3485,7 @@ self.onmessage = (event) => {
           invalidateFull(surfaceId);
         }
       }
+      scheduleShaderAnimation();
     } else if (message.type === "selection") {
       if (message.surfaceId) {
         surface(message.surfaceId, message.sessionHandle).selection = message.selection;
@@ -3201,11 +3513,13 @@ self.onmessage = (event) => {
           cursorBlinkTimers.delete(surfaceId);
         }
       }
+      scheduleShaderAnimation();
     } else if (message.type === "focus") {
       const value = surface(message.surfaceId, message.sessionHandle);
       value.focused = Boolean(message.focused);
       scheduleCursorBlink(message.surfaceId, value.focused);
       invalidateRows(message.surfaceId, [snapshot(message.sessionHandle).cursor.y]);
+      scheduleShaderAnimation();
     } else if (message.type === "cursor-frozen") {
       const value = surfaces.get(message.surfaceId);
       if (!value) return;