The reel learns to shine: gliding bodies, warp-threaded shots, a clip worth sharing

Three polishes aimed at the instant-replay dream. Other wizards and
creatures now GLIDE between steps in first person instead of blinking
cell to cell — a stride tweens, a teleport still simply arrives. A
projectile whose sight line runs through a warp now flies as two
simultaneous legs under the mouths' rigid motion, so the fireball
plunges into the opening on one side and bursts from the pair on the
other, whichever room the camera stands in. And the saved video is no
longer a bare canvas grab: it composites into a shareable 1280x720
frame with the step's caption burned in — gold actor name, the reel's
own words — and the game's name in the corner, so a clip passed along
explains itself.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

packages/web/src/fpv/raycast.ts

@@ -196,23 +196,52 @@ function mouthAnchor(m: { cell: Cell; side: Side }): { x: number; y: number } {
   return { x: c.x, y: c.y };
 }
 
-/** Everything standing in the maze that the reel should draw as a sprite. */
+/** The rigid motion one warp applies to sight: far-region points map into
+ * the near mouth's virtual space (where a straight ray would put them),
+ * and back again. Anchored and rotated exactly as castRay re-enters. */
+export function warpMotion(w: GameView["board"]["warps"][number]): {
+  toVirtual(p: { x: number; y: number }): { x: number; y: number };
+  toReal(p: { x: number; y: number }): { x: number; y: number };
+} {
+  const delta = SIDE_ANGLE[OPPOSITE[w.to.side]] - SIDE_ANGLE[w.from.side];
+  const a1 = mouthAnchor(w.from);
+  const a2 = mouthAnchor(w.to);
+  const c = Math.cos(delta), s = Math.sin(delta);
+  return {
+    toVirtual(p) {
+      const rx = p.x - a2.x, ry = p.y - a2.y;
+      return { x: a1.x + rx * c + ry * s, y: a1.y - rx * s + ry * c };
+    },
+    toReal(p) {
+      const rx = p.x - a1.x, ry = p.y - a1.y;
+      return { x: a2.x + rx * c - ry * s, y: a2.y + rx * s + ry * c };
+    },
+  };
+}
+
+/** Everything standing in the maze that the reel should draw as a sprite.
+ * `posOverride` maps a player or creature id to an in-flight world
+ * position — the reel glides bodies between steps instead of blinking
+ * them from cell to cell. */
 export function billboards(
   view: GameView,
   povId: string,
   art: (file: string, cat: "players" | "creatures" | "objects" | "terrain") => string,
+  posOverride?: Record<string, { x: number; y: number }>,
 ): Billboard[] {
   const out: Billboard[] = [];
   for (const p of view.players) {
     if (!p.alive || p.id === povId) continue;
+    const o = posOverride?.[p.id];
     out.push({
-      x: p.position.x + 0.5, y: p.position.y + 0.5,
+      x: o?.x ?? p.position.x + 0.5, y: o?.y ?? p.position.y + 0.5,
       src: art(`wizard-${p.colorIndex}`, "players"), scale: 0.85, rise: 0, label: p.id,
     });
   }
   for (const c of view.creatures) {
+    const o = posOverride?.[c.id];
     out.push({
-      x: c.position.x + 0.5, y: c.position.y + 0.5,
+      x: o?.x ?? c.position.x + 0.5, y: o?.y ?? c.position.y + 0.5,
       src: art(c.kind, "creatures"), scale: 0.75, rise: 0, label: c.kind,
     });
   }
@@ -250,21 +279,14 @@ export function billboards(
   // opening, since everything around the mouth is nearer wall.
   const real = out.slice();
   for (const w of view.board.warps) {
-    const delta = SIDE_ANGLE[OPPOSITE[w.to.side]] - SIDE_ANGLE[w.from.side];
-    const a1 = mouthAnchor(w.from);
+    const motion = warpMotion(w);
     const a2 = mouthAnchor(w.to);
-    const cosD = Math.cos(-delta), sinD = Math.sin(-delta);
     const inward = SIDE_ANGLE[OPPOSITE[w.to.side]];
     const inX = Math.cos(inward), inY = Math.sin(inward);
     for (const b of real) {
       const rx = b.x - a2.x, ry = b.y - a2.y;
       if (rx * inX + ry * inY < -0.2 || Math.hypot(rx, ry) > 8) continue;
-      out.push({
-        ...b,
-        x: a1.x + rx * cosD - ry * sinD,
-        y: a1.y + rx * sinD + ry * cosD,
-        warped: true,
-      });
+      out.push({ ...b, ...motion.toVirtual(b), warped: true });
     }
   }
   return out;