screengraft 0.53.0 → 0.54.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "screengraft",
-  "version": "0.53.0",
+  "version": "0.54.0",
   "description": "Put a UI screenshot or screen recording onto a photographed device screen with the perspective exactly right \u2014 a homography you confirm by hand, not a generative guess.",
   "keywords": [
     "mockup",

package/scripts/dof.py

@@ -90,10 +90,18 @@ def _blur(img: np.ndarray, sigma: float) -> np.ndarray:
     return cv2.GaussianBlur(img, (k, k), sigma, borderType=cv2.BORDER_REPLICATE)
 
 
-def screen_ramp(src_w: int, src_h: int, angle_deg: float, start: float, end: float) -> np.ndarray:
+def screen_ramp(src_w: int, src_h: int, angle_deg: float, start: float, end: float,
+                end2=None) -> np.ndarray:
     """The ramp in SCREENSHOT space: 0 up to `start`, 1 from `end`, linear
     between, along `angle` (0 = toward +x, 90 = toward +y of the screenshot),
-    both as fractions of the screenshot's extent along that direction."""
+    all as fractions of the screenshot's extent along that direction.
+
+    `end2`, when given, is the NEAR limit: a second ramp running the other way
+    from `start`, reaching 1 at `end2` (< start). The plane of focus then sits
+    inside the screen with blur growing on both sides of it — the depth of
+    field's near and far limits, Photoshop's tilt-shift band. None keeps the
+    one-sided ramp, which is the plane of focus at the screen's edge.
+    """
     a = math.radians(angle_deg)
     d = np.array([math.cos(a), math.sin(a)], dtype=np.float64)
     q = np.array([[0, 0], [src_w, 0], [src_w, src_h], [0, src_h]], dtype=np.float64)
@@ -104,7 +112,12 @@ def screen_ramp(src_w: int, src_h: int, angle_deg: float, start: float, end: flo
     s0, s1 = lo + start * (hi - lo), lo + end * (hi - lo)
     xs = np.arange(src_w, dtype=np.float64)[None, :] + 0.5
     ys = np.arange(src_h, dtype=np.float64)[:, None] + 0.5
-    t = (xs * d[0] + ys * d[1] - s0) / max(s1 - s0, 1e-6)
+    pr = xs * d[0] + ys * d[1]
+    t = (pr - s0) / max(s1 - s0, 1e-6)
+    if end2 is not None:
+        e2 = float(np.clip(end2, -0.5, start - 0.05))
+        s2 = lo + e2 * (hi - lo)
+        t = np.maximum(t, (s0 - pr) / max(s0 - s2, 1e-6))
     return np.clip(t, 0.0, 1.0).astype(np.float32)
 
 
@@ -114,14 +127,14 @@ class Field:
 
     def __init__(self, corners, angle_deg: float, strength: float, mask: np.ndarray,
                  x0: int, y0: int, start: float = 0.0, end: float = 1.0,
-                 space: str = "photo", H=None, src_size=None):
+                 space: str = "photo", H=None, src_size=None, end2=None):
         h, w = mask.shape[:2]
         self.x0, self.y0 = x0, y0
         self.smax = sigma_max(corners, strength)
         self.sigmas = [self.smax * k / (DOF_LEVELS - 1) for k in range(DOF_LEVELS)]
         if space == "screen" and H is not None and src_size is not None:
             sw, sh = src_size
-            src = screen_ramp(sw, sh, angle_deg, start, end)
+            src = screen_ramp(sw, sh, angle_deg, start, end, end2)
             T = np.array([[1, 0, -x0], [0, 1, -y0], [0, 0, 1]], dtype=np.float64)
             t = cv2.warpPerspective(src, T @ np.asarray(H, dtype=np.float64), (w, h),
                                     flags=cv2.INTER_LINEAR, borderMode=cv2.BORDER_REPLICATE)

package/scripts/ui.py

@@ -685,9 +685,15 @@ def _dof_args(b):
         strength, angle, start, end = 0.0, 0.0, 0.0, 1.0
     space = "screen" if b.get("dof_space") == "screen" else "photo"
     start = float(min(max(start, 0.0), 0.95))
+    # The near limit is optional: absent or null means one-sided.
+    end2 = b.get("dof_end2")
+    try:
+        end2 = None if end2 is None else float(min(max(float(end2), -0.5), start - 0.05))
+    except (TypeError, ValueError):
+        end2 = None
     return {"dof_angle": angle % 360.0, "dof_strength": float(min(max(strength, 0.0), 1.0)),
             "dof_start": start, "dof_end": float(min(max(end, start + 0.05), 1.5)),
-            "dof_space": space}
+            "dof_space": space, "dof_end2": end2}
 
 
 ROLES = ("photo", "screenshot")
@@ -1246,7 +1252,7 @@ class Handler(BaseHTTPRequestHandler):
                           "blend": blend, "reflection": reflection,
                           "dof_angle": dof["dof_angle"], "dof_strength": dof["dof_strength"],
                           "dof_start": dof["dof_start"], "dof_end": dof["dof_end"],
-                          "dof_space": dof["dof_space"],
+                          "dof_space": dof["dof_space"], "dof_end2": dof["dof_end2"],
                           # A render is always the whole clip; only the preview
                           # passes a segment. Recorded anyway, because the
                           # sidecar's promise is EVERY argument that changes the
@@ -1339,7 +1345,7 @@ class Handler(BaseHTTPRequestHandler):
                           "blend": blend, "reflection": reflection,
                           "dof_angle": dof["dof_angle"], "dof_strength": dof["dof_strength"],
                           "dof_start": dof["dof_start"], "dof_end": dof["dof_end"],
-                          "dof_space": dof["dof_space"],
+                          "dof_space": dof["dof_space"], "dof_end2": dof["dof_end2"],
                           "saved": time.time()}
                 # A fit is remembered when it PRODUCED something, not while it
                 # is being dragged: a quad on the canvas is a work in progress,

package/scripts/warp.py

@@ -270,7 +270,7 @@ class Plan:
                  blend: str = "replace", reflection: float = DEFAULT_REFLECTION,
                  corner_smoothing: float = 0.0,
                  dof_angle: float = 0.0, dof_strength: float = 0.0, dof_start: float = 0.0,
-                 dof_end: float = 1.0, dof_space: str = "photo"):
+                 dof_end: float = 1.0, dof_space: str = "photo", dof_end2=None):
         dst_quad = np.array(corners, dtype=np.float32)
         if shoelace_area(dst_quad) < 1.0:
             raise ValueError("degenerate quad (near-zero area) — check corner order TL,TR,BR,BL")
@@ -324,6 +324,7 @@ class Plan:
         self.dof_start = float(np.clip(dof_start, 0.0, 0.95))
         self.dof_end = float(np.clip(dof_end, self.dof_start + 0.05, 1.5))
         self.dof_space = "screen" if dof_space == "screen" else "photo"
+        self.dof_end2 = None if dof_end2 is None else float(np.clip(dof_end2, -0.5, self.dof_start - 0.05))
         reach = int(np.ceil(3 * _dof.sigma_max(dst_quad, self.dof_strength))) if self.dof_strength > 0 else 0
         bx0, by0 = max(0, int(np.floor(xs.min())) - 1 - reach), max(0, int(np.floor(ys.min())) - 1 - reach)
         bx1, by1 = min(pw, int(np.ceil(xs.max())) + 2 + reach), min(ph, int(np.ceil(ys.max())) + 2 + reach)
@@ -337,7 +338,7 @@ class Plan:
                                   self.warped_mask[by0:by1, bx0:bx1], bx0, by0,
                                   start=self.dof_start, end=self.dof_end,
                                   space=self.dof_space, H=self.H,
-                                  src_size=(self.new_w, self.new_h))
+                                  src_size=(self.new_w, self.new_h), end2=self.dof_end2)
 
     def _prep(self, frame: np.ndarray, bbox=None) -> np.ndarray:
         """Warp one frame. With `bbox`, warp only that window of the canvas.
@@ -443,7 +444,7 @@ def compose(photo: np.ndarray, screenshot: np.ndarray, corners, corner_radius: f
             reflection: float = DEFAULT_REFLECTION,
             dof_angle: float = 0.0, dof_strength: float = 0.0,
             dof_start: float = 0.0, dof_end: float = 1.0,
-            dof_space: str = "photo") -> np.ndarray:
+            dof_space: str = "photo", dof_end2=None) -> np.ndarray:
     """Warp `screenshot` into the quad `corners` (TL,TR,BR,BL, photo pixels) on `photo`.
 
     Single resampling pass at the photo's resolution; deterministic. This is the
@@ -458,7 +459,7 @@ def compose(photo: np.ndarray, screenshot: np.ndarray, corners, corner_radius: f
                 corner_smoothing=corner_smoothing,
                 blend=blend, reflection=reflection,
                 dof_angle=dof_angle, dof_strength=dof_strength, dof_start=dof_start,
-                dof_end=dof_end, dof_space=dof_space)
+                dof_end=dof_end, dof_space=dof_space, dof_end2=dof_end2)
     plan.bind_grade(screenshot, grade)
     return plan.render(screenshot, screen_off=screen_off, specular=specular)
 
@@ -548,7 +549,7 @@ def compose_video(photo: np.ndarray, video_path: str, corners, output: str,
                   start_frame: int = 0, max_frames: int = None,
                   dof_angle: float = 0.0, dof_strength: float = 0.0,
                   dof_start: float = 0.0, dof_end: float = 1.0,
-                  dof_space: str = "photo") -> dict:
+                  dof_space: str = "photo", dof_end2=None) -> dict:
     """Inject a VIDEO into a still photo. The photo does not move, so there is
     exactly one homography and the whole of Plan is computed once.
 
@@ -577,7 +578,7 @@ def compose_video(photo: np.ndarray, video_path: str, corners, output: str,
                 corner_smoothing=corner_smoothing,
                 blend=blend, reflection=reflection,
                 dof_angle=dof_angle, dof_strength=dof_strength, dof_start=dof_start,
-                dof_end=dof_end, dof_space=dof_space)
+                dof_end=dof_end, dof_space=dof_space, dof_end2=dof_end2)
     plan.bind_grade(first, grade)
 
     ph, pw = photo.shape[:2]

package/skills/inject-screenshot/SKILL.md

@@ -5,7 +5,7 @@ description: Injects a UI screenshot OR a screen recording onto a photographed d
 
 # Inject a screenshot onto a photographed device
 
-**What ships (v0.53):** a local browser UI (`scripts/ui.py`) that walks the designer through the whole job — pick the photo and the screen source, which may be an image **or a video** (recent Desktop/Downloads images, drag-drop, browse, path, or a **Figma frame link**), auto-detect the screen as a starting position — and when detection cannot tell which region is a screen, **Point at screen**: one click inside it and the detector uses that point — or, if this photograph has been fitted before, **the fit it was saved with comes back** as the starting position instead of a detection, recognised by the photo's own pixels so a rename or a drag-drop still match — and every save also writes a **portable `.fit.json` beside the mockup** that can be dropped back onto the page later, which is how a fit survives a re-export, another machine, or someone else's hands — then **match the four edges** (drag an edge's middle to slide it, near an end to pivot; corners still draggable) with canvas navigation that follows the usual conventions — **hold ⌘ and scroll to zoom to the pointer, hold space and drag to pan** — and a rectified strip loupe. The fit and the composite sit **side by side and always have** — the result pane re-renders as you drag, which is how a corner gets judged, so it is the layout rather than a mode you can switch off. Then an on-by-default realism pass that colour-matches the source to the photo's light, **Save** (or **Render**, for a video) into the project folder (`--out-dir`), and a **Send to Claude** button that reaches you through the plugin's own MCP server. The UI is a hand port of the project's Figma design file — dark only.
+**What ships (v0.54):** a local browser UI (`scripts/ui.py`) that walks the designer through the whole job — pick the photo and the screen source, which may be an image **or a video** (recent Desktop/Downloads images, drag-drop, browse, path, or a **Figma frame link**), auto-detect the screen as a starting position — and when detection cannot tell which region is a screen, **Point at screen**: one click inside it and the detector uses that point — or, if this photograph has been fitted before, **the fit it was saved with comes back** as the starting position instead of a detection, recognised by the photo's own pixels so a rename or a drag-drop still match — and every save also writes a **portable `.fit.json` beside the mockup** that can be dropped back onto the page later, which is how a fit survives a re-export, another machine, or someone else's hands — then **match the four edges** (drag an edge's middle to slide it, near an end to pivot; corners still draggable) with canvas navigation that follows the usual conventions — **hold ⌘ and scroll to zoom to the pointer, hold space and drag to pan** — and a rectified strip loupe. The fit and the composite sit **side by side and always have** — the result pane re-renders as you drag, which is how a corner gets judged, so it is the layout rather than a mode you can switch off. Then an on-by-default realism pass that colour-matches the source to the photo's light, **Save** (or **Render**, for a video) into the project folder (`--out-dir`), and a **Send to Claude** button that reaches you through the plugin's own MCP server. The UI is a hand port of the project's Figma design file — dark only.
 
 The geometry is exact (`warp.py`); the detection is advisory (`detect.py`) and the human corrects it. **When a detection is wrong and you want to know why**, ask for the candidate list: `POST /api/detect {"trace": true}` writes `<session>/candidates.json`, or run `python3 scripts/detect.py --photo P --out-corners /tmp/c.json --trace /tmp/t.json` (add `--click X,Y`). Every candidate quad is in there with its score and whether it was accepted, rejected, never reached, or filtered out by the click — which is what separates "the screen was never proposed" from "it was proposed and something else won".
 
@@ -13,7 +13,7 @@ The geometry is exact (`warp.py`); the detection is advisory (`detect.py`) and t
 
 **The realism pass ships and is ON by default** (`grade.py`): it matches the injected screen's white balance and grain to the light around it, at a strength the designer sets in the rail. It can also lift the device's real specular highlights from a screen-off reference frame, though the UI cannot supply one yet. Off is a first-class choice and keeps the screenshot's colour exactly — say so if the user is reviewing brand colour.
 
-**Depth of field** *(off by default)*: a phone shot at an angle is a plane receding from the camera, so its far end is softer than its near end, and a screenshot pasted pin-sharp across all of it gives the fake away. On, the screenshot blurs across the screen in one direction — **direction** (where the blur grows toward) and **strength** — and the glass edge softens with it. **Measure from photo** reads both off the photograph's own screen boundary; on a real photograph that works, on a *mockup template* the device is usually rendered sharp with the blur only on the background, so it answers "flat" and the designer sets it by eye. The measured strength is a floor (the estimator saturates around 5px of blur), never a ceiling. **The gizmo on the result** is the primary control, defined in the screen's own plane and projected through the fit (so the two lines converge with the phone's edges on a steep shot, as real iso-blur lines do): a solid line where focus ends (drag its centre), a dashed line where the blur reaches its full amount (drag its centre to move it, its end pips to turn both, and slide the diamond along it for how much blur). It fades when the pointer leaves the pane. The sliders and the gizmo are one model. Suggest it when the photo has visible bokeh — a blurred hand, table edge or background — and the composite's screen looks pasted on. The live in-place playback cannot show it; the composite and Render preview do.
+**Depth of field** *(off by default)*: a phone shot at an angle is a plane receding from the camera, so its far end is softer than its near end, and a screenshot pasted pin-sharp across all of it gives the fake away. On, the screenshot blurs across the screen in one direction — **direction** (where the blur grows toward) and **strength** — and the glass edge softens with it. **Measure from photo** reads both off the photograph's own screen boundary; on a real photograph that works, on a *mockup template* the device is usually rendered sharp with the blur only on the background, so it answers "flat" and the designer sets it by eye. The measured strength is a floor (the estimator saturates around 5px of blur), never a ceiling. **The gizmo on the result** is the primary control, defined in the screen's own plane and projected through the fit (so the two lines converge with the phone's edges on a steep shot, as real iso-blur lines do): a solid line where focus ends (drag its centre), a dashed line where the blur reaches its full amount (drag its centre to move it, its end pips to turn both, and slide the diamond along it for how much blur). **Both sides** adds a near limit — a second dashed line behind the focus line — for a phone whose middle is sharp and both ends soft (the depth of field's near and far limits). It fades when the pointer leaves the pane. The sliders and the gizmo are one model. Suggest it when the photo has visible bokeh — a blurred hand, table edge or background — and the composite's screen looks pasted on. The live in-place playback cannot show it; the composite and Render preview do.
 
 **Video ships too.** The screen source can be a video (mp4/mov/webm) as well as a still — pick it exactly like a screenshot, choose which frame to match the edges on, **press Play and the clip runs on the photo immediately** — the browser warps it onto the same four corners with the same corner radius and approximates the emissive blend, so placement and motion can be judged with no wait; **Render preview** composites a few seconds through the real pipeline when the grade, grain and true blend are what you need to see — and the primary button becomes **Render**. The photo does not move, so there is one homography and every frame gets the same geometry; the light match is measured once from the frame you fitted on, so the screen cannot pulse as the UI scrolls. Output is H.264 at CRF 16 (near-visually-lossless) or ProRes 422 HQ. This is what pairs with a prototype recording: record the prototype, then inject the recording into a real photograph.
 

package/ui/index.html

@@ -386,9 +386,9 @@
   .seg button.sel:active{background:var(--raise-low);transform:none}
   /* A toggle in the strip head. On = the raised surface every selected thing
      on this page has (the segmented thumb, the device chip), off = a label. */
-  .striphead button[aria-pressed]{background:transparent;border-color:transparent;box-shadow:none;color:var(--mute)}
-  .striphead button[aria-pressed]:hover{color:var(--ink)}
-  .striphead button[aria-pressed="true"]{background:var(--raise);border-color:var(--edge);color:var(--ink);font-weight:600}
+  .striphead button[aria-pressed],#dofBoth[aria-pressed]{background:transparent;border-color:transparent;box-shadow:none;color:var(--mute)}
+  .striphead button[aria-pressed]:hover,#dofBoth[aria-pressed]:hover{color:var(--ink)}
+  .striphead button[aria-pressed="true"],#dofBoth[aria-pressed="true"]{background:var(--raise);border-color:var(--edge);color:var(--ink);font-weight:600}
   /* Input chip (Figma 5:14 / 5:20). Surface and shadow are declared here rather
    than inherited from the base button rule, so the filled state is explicit and
    the .is-empty override below has something definite to override.
@@ -1153,6 +1153,7 @@
             </div>
             <input type="range" id="dofStr" min="0" max="1" step="0.05" value="0.3" aria-label="Blur strength at the far edge">
             <div style="display:flex;align-items:center;gap:var(--s2)">
+              <button class="sm" id="dofBoth" aria-pressed="false" title="Blur on both sides of the focus line — the depth of field's near and far limits, for a phone whose middle is sharp and both ends soft. Off, the plane of focus is at the screen's edge and blur grows one way.">Both sides</button>
               <button class="sm" id="dofMeasure" title="Read the direction and a starting strength off the photo's own bezel">Measure from photo</button>
               <span class="status sm" id="dofSt" style="min-width:0"></span>
             </div>
@@ -2577,9 +2578,10 @@ function setDof(on, ang, str){
   dofOn = on;
   if (ang !== undefined) dofAng = ((ang % 360) + 360) % 360;
   if (str !== undefined) dofStr = Math.max(0, Math.min(1, str));
-  remember('dof', on ? '1' : '0'); remember('dofAng', String(dofAng)); remember('dofStr', String(dofStr)); remember('dofStart', String(dofStart)); remember('dofEnd', String(dofEnd));
+  remember('dof', on ? '1' : '0'); remember('dofAng', String(dofAng)); remember('dofStr', String(dofStr)); remember('dofStart', String(dofStart)); remember('dofEnd', String(dofEnd)); remember('dofEnd2', dofEnd2 === null ? '' : String(dofEnd2));
   setSectionOpen($('#secDof'), on);
   paintDof();
+  paintBoth();
   paintGizmo();
 }
 let dofMeasuredFor = null;   // photo path the last measurement was for
@@ -2610,7 +2612,7 @@ async function measureDof(){
         ang = (Math.atan2(p1[1]-p0[1], p1[0]-p0[0]) * 180 / Math.PI + 360) % 360;
       }
     }
-    dofStart = 0; dofEnd = 1; setDof(true, ang, Math.max(r.strength, 0.05));
+    dofStart = 0; dofEnd = 1; dofEnd2 = null; setDof(true, ang, Math.max(r.strength, 0.05));
 
     s.className = 'status sm ok';
     s.textContent = `Measured: grows toward ${dofWord(r.angle)}. Strength is a floor — raise it if the far end looks softer.`;
@@ -2642,14 +2644,30 @@ $('#dofMeasure').onclick = measureDof;
    sit anywhere on the screen or a little past it. Handles:
      solid line centre  -- move focus (start)
      dashed line centre -- move where the ramp ends (end); spacing = ramp length
-     dashed line pips   -- turn both lines (direction), ⇧ snaps to 15°
+     sharp line pips    -- turn all lines about the focus line (direction), ⇧ snaps to 15°
+     second dashed line -- the NEAR limit, when "Both sides" is on: blur grows
+                           the other way from the focus line too
      diamond on the dashed line -- slide along it for how much blur (strength)
    Everything is computed in screenshot pixels and mapped to the photo with H;
    the SVG's viewBox is the photo so it stays aligned at every zoom for free. */
 const gz = $('#dofGizmo');
 const SIGMA_FULL_FRAC = 0.02;   // mirrors dof.DOF_MAX_FRAC -- keep in step
 let dofEnd = parseFloat(recall('dofEnd','1')); if (!(dofEnd > 0)) dofEnd = 1;
+// The near limit. null = one-sided (the plane of focus at the screen's edge).
+let dofEnd2 = recall('dofEnd2','') === '' ? null : parseFloat(recall('dofEnd2','')); if (dofEnd2 !== null && !(dofEnd2 < 1)) dofEnd2 = null;
 function dofEndV(){ return dofOn ? dofEnd : 1; }
+function dofEnd2V(){ return dofOn ? dofEnd2 : null; }
+function paintBoth(){ $('#dofBoth').setAttribute('aria-pressed', dofEnd2 !== null ? 'true' : 'false'); }
+$('#dofBoth').onclick = () => {
+  if (dofEnd2 === null){
+    // Turning it on: the focus line is probably at the edge, where a near
+    // limit has nowhere to go. Put the sharp band across the middle with both
+    // limits at the screen's edges -- the "middle sharp, both ends soft" case.
+    if (dofStart < 0.15){ dofStart = 0.5; dofEnd = 1.0; dofEnd2 = 0.0; }
+    else dofEnd2 = Math.max(-0.5, dofStart - (dofEnd - dofStart));
+  } else dofEnd2 = null;
+  setDof(true); autoPreview();
+};
 function applyH(Hm, p){ const w = Hm[6]*p[0] + Hm[7]*p[1] + Hm[8]; return [(Hm[0]*p[0] + Hm[1]*p[1] + Hm[2]) / w, (Hm[3]*p[0] + Hm[4]*p[1] + Hm[5]) / w]; }
 function gizmoGeom(){
   const [sw, sh] = st.shotSize, a = dofAng * Math.PI / 180;
@@ -2677,6 +2695,8 @@ function paintGizmo(){
   const P = (f, q) => applyH(g.H, gzPt(g, f, q));
   const a0 = P(dofStart, -0.06), a1 = P(dofStart, 1.06), ac = P(dofStart, 0.5);
   const b0 = P(dofEnd, -0.06), b1 = P(dofEnd, 1.06), bc = P(dofEnd, 0.5);
+  const two = dofEnd2 !== null;
+  const c0 = two ? P(dofEnd2, -0.06) : null, c1 = two ? P(dofEnd2, 1.06) : null, cc = two ? P(dofEnd2, 0.5) : null;
   const th = P(dofEnd, 0.08 + 0.84 * dofStr);           // the strength thumb slides along the dashed line
   const sigma = dofStr * SIGMA_FULL_FRAC * g.side;
   const r = 6 * k, rp = 4 * k, fs11 = 11 * k, off = 14 * k;
@@ -2684,16 +2704,20 @@ function paintGizmo(){
   const T = (p, txt, dy) => `<text x="${p[0]}" y="${p[1] + dy}" text-anchor="middle" font-size="${fs11}">${txt}</text>`;
   const away = unit(sub(bc, ac));                        // label offsets: away from the other line
   const beyond = dofEnd > 1.0001;
+  const beyond2 = two && dofEnd2 < -0.0001;
   gz.innerHTML =
     L(a0, a1, 'case', 'stroke-width="4"') + L(a0, a1, 'focus') +
     L(b0, b1, 'case', 'stroke-width="3.5"') + L(b0, b1, 'far' + (beyond ? ' out' : '')) +
+    (two ? L(c0, c1, 'case', 'stroke-width="3.5"') + L(c0, c1, 'far' + (beyond2 ? ' out' : '')) : '') +
+    `<circle cx="${a0[0]}" cy="${a0[1]}" r="${rp}" class="h pip" data-h="rotA"/>` +
+    `<circle cx="${a1[0]}" cy="${a1[1]}" r="${rp}" class="h pip" data-h="rotB"/>` +
     `<circle cx="${ac[0]}" cy="${ac[1]}" r="${r}" class="h" data-h="start"/>` +
-    `<circle cx="${b0[0]}" cy="${b0[1]}" r="${rp}" class="h pip" data-h="rotA"/>` +
-    `<circle cx="${b1[0]}" cy="${b1[1]}" r="${rp}" class="h pip" data-h="rotB"/>` +
     `<circle cx="${bc[0]}" cy="${bc[1]}" r="${r}" class="h hollow" data-h="end"/>` +
+    (two ? `<circle cx="${cc[0]}" cy="${cc[1]}" r="${r}" class="h hollow" data-h="end2"/>` : '') +
     `<rect x="${th[0]-r}" y="${th[1]-r}" width="${2*r}" height="${2*r}" transform="rotate(45 ${th[0]} ${th[1]})" class="h thumb" data-h="str"/>` +
-    T([ac[0] - away[0]*off, ac[1] - away[1]*off], 'sharp', 4*k) +
+    T([ac[0] - away[0]*off*(two ? 0 : 1), ac[1] - away[1]*off*(two ? 0 : 1) + (two ? -off : 0)], 'sharp', 4*k) +
     T([bc[0] + away[0]*off, bc[1] + away[1]*off], `σ ${sigma.toFixed(0)}px from here${beyond ? ' · past the screen' : ''}`, 4*k) +
+    (two ? T([cc[0] - away[0]*off, cc[1] - away[1]*off], `σ ${sigma.toFixed(0)}px from here${beyond2 ? ' · past the screen' : ''}`, 4*k) : '') +
     T([th[0] + away[0]*off*1.6, th[1] + away[1]*off*1.6], `${Math.round(dofStr*100)}%`, 4*k);
 }
 // pointer position in SCREENSHOT pixels
@@ -2716,14 +2740,17 @@ gz.addEventListener('pointermove', e => {
   const f = (p[0]*g.d[0] + p[1]*g.d[1] - g.lo) / (g.hi - g.lo);
   const q = (p[0]*g.u[0] + p[1]*g.u[1] - g.ulo) / (g.uhi - g.ulo);
   if (gzDrag.h === 'start'){
-    dofStart = Math.max(0, Math.min(0.95, Math.min(f, dofEnd - 0.05)));
+    dofStart = Math.max(dofEnd2 === null ? 0 : dofEnd2 + 0.05, Math.min(0.95, Math.min(f, dofEnd - 0.05)));
   } else if (gzDrag.h === 'end'){
     dofEnd = Math.max(dofStart + 0.05, Math.min(1.5, f));
+  } else if (gzDrag.h === 'end2'){
+    dofEnd2 = Math.max(-0.5, Math.min(dofStart - 0.05, f));
   } else if (gzDrag.h === 'str'){
     dofStr = Math.max(0.05, Math.min(1, (q - 0.08) / 0.84));
   } else {
-    // Turn about the dashed line's centre; the pip under the pointer follows.
-    const c = gzPt(g, dofEnd, 0.5);
+    // Turn about the SHARP line's centre -- the plane of focus is what turns;
+    // the pip under the pointer follows.
+    const c = gzPt(g, dofStart, 0.5);
     const v = [p[0]-c[0], p[1]-c[1]];
     const sign = gzDrag.h === 'rotB' ? 1 : -1;      // rotB sits at +u, rotA at -u
     dofAng = ((Math.atan2(v[1]*sign, v[0]*sign) * 180 / Math.PI - 90) % 360 + 360) % 360;
@@ -3131,7 +3158,7 @@ async function playClip(){
   // a preview the user did not ask for, and the wait goes silent again.
   building = true;
   try{
-    await api('/api/preview_video', {corners: st.corners, radius_frac: radiusValue(), smoothing: smoothingValue(), dof_angle: dofAngle(), dof_strength: dofStrength(), dof_start: dofStartV(), dof_end: dofEndV(), dof_space: 'screen',
+    await api('/api/preview_video', {corners: st.corners, radius_frac: radiusValue(), smoothing: smoothingValue(), dof_angle: dofAngle(), dof_strength: dofStrength(), dof_start: dofStartV(), dof_end: dofEndV(), dof_end2: dofEnd2V(), dof_space: 'screen',
                                      device: st.type, grade: gradeValue(),
                                      reflection: emisValue(), fit_frame: +$('#vframe').value});
   }catch(e){
@@ -3190,7 +3217,7 @@ async function renderPreview(){
   const say = t => { if (!building && $('#liveWrap').hidden) s.textContent = t; };
   say('Rendering…');
   try{
-    const r = await api('/api/preview', {corners: st.corners, radius_frac: radiusValue(), smoothing: smoothingValue(), dof_angle: dofAngle(), dof_strength: dofStrength(), dof_start: dofStartV(), dof_end: dofEndV(), dof_space: 'screen', device: st.type, grade: gradeValue(), reflection: emisValue()});
+    const r = await api('/api/preview', {corners: st.corners, radius_frac: radiusValue(), smoothing: smoothingValue(), dof_angle: dofAngle(), dof_strength: dofStrength(), dof_start: dofStartV(), dof_end: dofEndV(), dof_end2: dofEnd2V(), dof_space: 'screen', device: st.type, grade: gradeValue(), reflection: emisValue()});
     const im = $('#outImg');
     im.onload = () => {
       outNat = im.naturalWidth;
@@ -3320,7 +3347,7 @@ async function renderVideo(){
   b.disabled = true;
   setRenderProgress(0);
   try{
-    await api('/api/render', {corners: st.corners, radius_frac: radiusValue(), smoothing: smoothingValue(), dof_angle: dofAngle(), dof_strength: dofStrength(), dof_start: dofStartV(), dof_end: dofEndV(), dof_space: 'screen', device: st.type,
+    await api('/api/render', {corners: st.corners, radius_frac: radiusValue(), smoothing: smoothingValue(), dof_angle: dofAngle(), dof_strength: dofStrength(), dof_start: dofStartV(), dof_end: dofEndV(), dof_end2: dofEnd2V(), dof_space: 'screen', device: st.type,
                               grade: gradeValue(), reflection: emisValue(), preset, fit_frame: +$('#vframe').value});
   }catch(e){
     setRenderProgress(null);
@@ -3366,7 +3393,7 @@ $('#save').onclick = async () => {
   if (st.video) return renderVideo();
   const b = $('#save'); b.textContent = 'Saving…'; b.disabled = true;
   try{
-    const r = await api('/api/save', {corners: st.corners, radius_frac: radiusValue(), smoothing: smoothingValue(), dof_angle: dofAngle(), dof_strength: dofStrength(), dof_start: dofStartV(), dof_end: dofEndV(), dof_space: 'screen', device: st.type, grade: gradeValue(), reflection: emisValue()});
+    const r = await api('/api/save', {corners: st.corners, radius_frac: radiusValue(), smoothing: smoothingValue(), dof_angle: dofAngle(), dof_strength: dofStrength(), dof_start: dofStartV(), dof_end: dofEndV(), dof_end2: dofEnd2V(), dof_space: 'screen', device: st.type, grade: gradeValue(), reflection: emisValue()});
     b.textContent = saveLabel();
     // The real destination, not a hardcoded one: --out-dir means saves usually
     // land in the project folder now, and telling the user "~/Desktop" when