diff --git a/README.md b/README.md
index df26843..024c392 100644
--- a/README.md
+++ b/README.md
@@ -24,15 +24,19 @@ npm install --save cereb
 import { pinch } from "cereb";
 import { zoom } from "cereb/operators";
 
+let scale = 1.0;
+const MIN_SCALE = 0.5, MAX_SCALE = 3.0;
+
 // pipe creates a pipeline where signals flow through operators
 // Each operator extends the signal (signals are immutable)
 pinch(element)
-  // Operator: Determine scale value.
-  .pipe(zoom({ minScale: 0.5, maxScale: 3.0 })).on((signal) => {
-    // The scale property is extended from the value.
-    // - pinch emits distance → zoom calculates scale
-    // - zoom also works with other inputs (keyboard, wheel, etc.)
-    element.style.transform = `scale(${signal.value.scale})`;
+  // Operator: Convert ratio to scale delta
+  .pipe(zoom())
+  .on((signal) => {
+    // zoom outputs frame-by-frame delta, accumulate and clamp
+    scale += signal.value.scale;
+    scale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale));
+    element.style.transform = `scale(${scale})`;
   });
 ```
 
diff --git a/docs/public/llms-full.txt b/docs/public/llms-full.txt
index 9587574..6569cce 100644
--- a/docs/public/llms-full.txt
+++ b/docs/public/llms-full.txt
@@ -501,21 +501,78 @@ singlePointer(canvas)
 
 ### zoom
 
-Calculate bounded scale from ratio input.
+Convert ratio input to frame-by-frame scale delta. Consumer accumulates and clamps.
 
 ```typescript
-function zoom<T extends SignalWith<{ ratio: number }>>(options?: {
-  minScale?: number;
-  maxScale?: number;
-  baseScale?: number | (() => number);
-  mode?: "multiply" | "add";
-}): Operator<T, T & { scale: number; deltaScale: number }>
+function zoom<T extends SignalWith<{ ratio: number; phase?: string }>>(
+  options?: ZoomOptions
+): Operator<T, T & { scale: number; deltaScale: number }>
 ```
 
+**Output:**
+- `scale`: Frame-by-frame scale delta (not absolute scale)
+- `deltaScale`: Same as scale (deprecated)
+
 ```typescript
+let scale = 1.0;
+const MIN_SCALE = 0.5, MAX_SCALE = 3.0;
+
 pinch(element)
-  .pipe(zoom({ minScale: 0.5, maxScale: 3.0 }))
-  .on((s) => element.style.transform = `scale(${s.value.scale})`);
+  .pipe(zoom())
+  .on((s) => {
+    scale += s.value.scale;
+    scale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale));
+    element.style.transform = `scale(${scale})`;
+  });
+```
+
+### rotate3d
+
+Convert 2D pan to 3D rotation delta. Horizontal pan → Y-axis rotation, vertical pan → X-axis rotation.
+
+```typescript
+function rotate3d<T extends SignalWith<{ delta: Vector; phase?: string }>>(options?: {
+  sensitivityX?: number;  // default 1.0
+  sensitivityY?: number;  // default 1.0
+  invertX?: boolean;      // default false
+  invertY?: boolean;      // default false
+}): Operator<T, T & { rotation: Vector; deltaRotation: Vector }>
+```
+
+**Output:**
+- `rotation`: Frame-by-frame rotation delta in radians `[rx, ry, rz]`
+
+```typescript
+let rotation = [0, 0, 0];
+
+pan(element)
+  .pipe(rotate3d({ sensitivityX: 0.5, sensitivityY: 0.5 }))
+  .on((s) => {
+    const [drx, dry, drz] = s.value.rotation;
+    rotation[0] += drx;
+    rotation[1] += dry;
+    element.style.transform = `rotateX(${rotation[0]}rad) rotateY(${rotation[1]}rad)`;
+  });
+```
+
+### translate
+
+Convert pan delta to 2D translation coordinates.
+
+```typescript
+function translate<T extends SignalWith<{ delta: Vector }>>(options?: {
+  baseTranslate?: [number, number] | (() => [number, number]);  // default [0, 0]
+  sensitivity?: number;  // default 1.0
+}): Operator<T, T & { translate: [number, number] }>
+```
+
+```typescript
+pan(element)
+  .pipe(translate())
+  .on((s) => {
+    const [x, y] = s.value.translate;
+    element.style.transform = `translate(${x}px, ${y}px)`;
+  });
 ```
 
 ### when
@@ -650,38 +707,41 @@ singlePointer(element)
 import { wheel, keyheld, keydown, pinch } from "cereb";
 import { when, extend, spy, zoom } from "cereb/operators";
 
-let currentScale = 1;
-const zoomOp = () => zoom({ minScale: 0.5, maxScale: 3.0, baseScale: () => currentScale });
+let scale = 1;
+const MIN_SCALE = 0.5, MAX_SCALE = 3.0;
+const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
 
 const zoomMode$ = keyheld(window, { code: "KeyZ" })
   .pipe(extend((s) => ({ opened: s.value.held })));
 
-// Pinch zoom
-pinch(element).pipe(zoomOp()).on(apply);
+// Pinch zoom - uses delta-based zoom operator
+pinch(element)
+  .pipe(zoom())
+  .on((s) => {
+    scale = clamp(scale + s.value.scale, MIN_SCALE, MAX_SCALE);
+    element.style.transform = `scale(${scale})`;
+  });
 
-// Z + wheel zoom
+// Z + wheel zoom - compute scale directly
 wheel(element, { passive: false })
   .pipe(
     when(zoomMode$),
-    spy((s) => s.value.originalEvent.preventDefault()),
-    extend((s) => ({ ratio: Math.exp(-s.value.deltaY * 0.005) })),
-    zoomOp()
+    spy((s) => s.value.originalEvent.preventDefault())
   )
-  .on(apply);
+  .on((s) => {
+    const multiplier = Math.exp(-s.value.deltaY * 0.005);
+    scale = clamp(scale * multiplier, MIN_SCALE, MAX_SCALE);
+    element.style.transform = `scale(${scale})`;
+  });
 
-// Z + +/- keyboard zoom
+// Z + +/- keyboard zoom - compute scale directly
 keydown(window, { code: ["Equal", "Minus"] })
-  .pipe(
-    when(zoomMode$),
-    extend((s) => ({ ratio: s.value.code === "Equal" ? 1.2 : 1 / 1.2 })),
-    zoomOp()
-  )
-  .on(apply);
-
-function apply(signal) {
-  currentScale = signal.value.scale;
-  element.style.transform = `scale(${currentScale})`;
-}
+  .pipe(when(zoomMode$))
+  .on((s) => {
+    const multiplier = s.value.code === "Equal" ? 1.2 : 1 / 1.2;
+    scale = clamp(scale * multiplier, MIN_SCALE, MAX_SCALE);
+    element.style.transform = `scale(${scale})`;
+  });
 ```
 
 ### Drawing Application
diff --git a/docs/public/llms.txt b/docs/public/llms.txt
index 2193f9f..201fdca 100644
--- a/docs/public/llms.txt
+++ b/docs/public/llms.txt
@@ -37,7 +37,9 @@
 - [extend](https://cereb.dev/operator-api/extend): Add properties to signal value
 - [session](https://cereb.dev/operator-api/session): Group start-to-end as session
 - [offset](https://cereb.dev/operator-api/offset): Element-relative coordinates
-- [zoom](https://cereb.dev/operator-api/zoom): Bounded scale calculation
+- [zoom](https://cereb.dev/operator-api/zoom): Convert ratio to scale delta
+- [rotate3d](https://cereb.dev/operator-api/rotate3d): Convert pan to 3D rotation delta
+- [translate](https://cereb.dev/operator-api/translate): Convert pan to 2D translation
 - [when](https://cereb.dev/operator-api/when): Gate by another stream's state
 - [throttle](https://cereb.dev/operator-api/throttle): Rate limiting
 - [debounce](https://cereb.dev/operator-api/debounce): Wait for silence
diff --git a/docs/src/components/examples/space-adventure.astro b/docs/src/components/examples/space-adventure.astro
index 68d2b01..28cabf4 100644
--- a/docs/src/components/examples/space-adventure.astro
+++ b/docs/src/components/examples/space-adventure.astro
@@ -8,11 +8,13 @@ import "./space-adventure.css";
 
 <div class="space-adventure">
   <div class="_demo-box" id="space-box">
-    <canvas id="space-canvas"></canvas>
+    <div class="_canvas-wrapper" id="space-canvas-wrapper">
+      <canvas id="space-canvas"></canvas>
+    </div>
     <strong id="space-zoom-mode" class="_zoom-mode">Zoom Mode</strong>
     <div class="_tip">
       <strong class="_tip-title">Tip.</strong>
-      Pinch, double tap, or change slider to zoom.<br />
+      Drag to rotate. Pinch or double tap to zoom.<br />
       In Desktop, use 'z' + '+/-' or 'wheel' to zoom.
     </div>
   </div>
@@ -32,6 +34,10 @@ import "./space-adventure.css";
         <span class="_label">SCALE</span>
         <span class="_value" id="info-scale">1.00</span>
       </div>
+      <div class="_item">
+        <span class="_label">ROTATION</span>
+        <span class="_value" id="info-rotation">0, 0</span>
+      </div>
       <div class="_item">
         <span class="_label">INPUT</span>
         <span class="_value" id="info-source">-</span>
@@ -41,8 +47,8 @@ import "./space-adventure.css";
 </div>
 
 <script>
-import { wheel, keydown, keyheld, type KeyboardSignal, type WheelSignal, dom, type Signal, pinch, tap, type TapSignal, type SignalWith } from "cereb";
-import { zoom as createZoom, extend, when, spy, filter, type ZoomInput, type ZoomOptions, type ZoomValue } from "cereb/operators";
+import { wheel, keydown, keyheld, dom, pinch, tap, type SignalWith, pan } from "cereb";
+import { zoom as createZoom, extend, when, spy, filter, type ZoomValue, rotate3d } from "cereb/operators";
 
 interface Star {
   x: number;
@@ -115,6 +121,10 @@ class SpaceRenderer {
   private viewCenterX = 0.5; // 0~1 ratio within world
   private viewCenterY = 0.5;
 
+  // 3D rotation state (radians)
+  private rotationX = 0;  // pitch (vertical rotation)
+  private rotationY = 0;  // yaw (horizontal rotation)
+
   constructor(
     private canvas: HTMLCanvasElement,
     private container: HTMLElement
@@ -159,6 +169,58 @@ class SpaceRenderer {
     return this.viewScale;
   }
 
+  /**
+   * Sets 3D rotation angles for the space view.
+   */
+  setRotation(rx: number, ry: number) {
+    this.rotationX = rx;
+    this.rotationY = ry;
+  }
+
+  getRotation(): [number, number] {
+    return [this.rotationX, this.rotationY];
+  }
+
+  /**
+   * Projects a 3D world coordinate to 2D screen coordinates with rotation applied.
+   * Returns [screenX, screenY, depth] where depth can be used for z-sorting.
+   */
+  private project3D(wx: number, wy: number, wz: number): [number, number, number] {
+    // Center of the world
+    const centerX = this.worldWidth / 2;
+    const centerY = this.worldHeight / 2;
+
+    // Translate to origin
+    let x = wx - centerX;
+    let y = wy - centerY;
+    let z = wz;
+
+    // Apply Y-axis rotation (yaw - horizontal pan)
+    const cosY = Math.cos(this.rotationY);
+    const sinY = Math.sin(this.rotationY);
+    const x1 = x * cosY - z * sinY;
+    const z1 = x * sinY + z * cosY;
+
+    // Apply X-axis rotation (pitch - vertical pan)
+    const cosX = Math.cos(this.rotationX);
+    const sinX = Math.sin(this.rotationX);
+    const y1 = y * cosX - z1 * sinX;
+    const z2 = y * sinX + z1 * cosX;
+
+    // Translate back from origin
+    const rx = x1 + centerX;
+    const ry = y1 + centerY;
+
+    // Perspective projection
+    const focalLength = this.worldWidth * 0.8;
+    const projectionScale = focalLength / (focalLength + z2);
+
+    const screenX = centerX + (rx - centerX) * projectionScale;
+    const screenY = centerY + (ry - centerY) * projectionScale;
+
+    return [screenX, screenY, z2];
+  }
+
   /**
    * Transforms world coordinates to canvas coordinates based on current view.
    */
@@ -297,11 +359,16 @@ class SpaceRenderer {
     // Generate stars across the entire virtual world
     for (let layer = 0; layer < this.LAYER_COUNT; layer++) {
       const stars: Star[] = [];
-      const depth = (layer + 1) / this.LAYER_COUNT;
+      const layerDepth = (layer + 1) / this.LAYER_COUNT;
       // Increased star count (1.5x more stars)
-      const starCount = Math.floor((75 + (1 - depth) * 225) * this.WORLD_SCALE);
+      const starCount = Math.floor((75 + (1 - layerDepth) * 225) * this.WORLD_SCALE);
+
+      // Each layer covers a depth range for parallax effect
+      const depthMin = layer / this.LAYER_COUNT;
+      const depthMax = (layer + 1) / this.LAYER_COUNT;
 
       for (let i = 0; i < starCount; i++) {
+        const depth = depthMin + Math.random() * (depthMax - depthMin);
         const isBright = Math.random() < 0.05 + depth * 0.1;
         stars.push({
           x: Math.random() * this.worldWidth,
@@ -377,13 +444,25 @@ class SpaceRenderer {
       planet.rotationAngle += planet.rotationSpeed * delta;
     }
 
-    // Separate planets into behind and in front of sun (based on orbit position)
-    const behindSun = this.planets.filter(p => Math.sin(p.orbitAngle) > 0);
-    const inFrontOfSun = this.planets.filter(p => Math.sin(p.orbitAngle) <= 0);
+    // Calculate actual 3D depth for each planet after rotation
+    const getPlanetDepth = (p: Planet) => {
+      const wx = this.sun.x + Math.cos(p.orbitAngle) * p.orbitRadius;
+      const wy = this.sun.y;
+      const wz = Math.sin(p.orbitAngle) * p.orbitRadius;
+      const [, , depth] = this.project3D(wx, wy, wz);
+      return depth;
+    };
+
+    // Sun is at z=0, get its depth after rotation
+    const [, , sunDepth] = this.project3D(this.sun.x, this.sun.y, 0);
 
-    // Sort each group by depth
-    behindSun.sort((a, b) => Math.sin(a.orbitAngle) - Math.sin(b.orbitAngle));
-    inFrontOfSun.sort((a, b) => Math.sin(a.orbitAngle) - Math.sin(b.orbitAngle));
+    // Separate planets into behind and in front of sun
+    const behindSun = this.planets.filter(p => getPlanetDepth(p) > sunDepth);
+    const inFrontOfSun = this.planets.filter(p => getPlanetDepth(p) <= sunDepth);
+
+    // Sort each group by depth (far to near)
+    behindSun.sort((a, b) => getPlanetDepth(b) - getPlanetDepth(a));
+    inFrontOfSun.sort((a, b) => getPlanetDepth(b) - getPlanetDepth(a));
 
     // Draw: planets behind -> sun -> planets in front
     this.renderPlanetGroup(ctx, behindSun);
@@ -395,6 +474,15 @@ class SpaceRenderer {
     const canvasW = this.canvas.width;
     const canvasH = this.canvas.height;
 
+    // Collect all stars with their projected positions for depth sorting
+    const projectedStars: Array<{
+      star: Star;
+      x: number;
+      y: number;
+      depth: number;
+      brightness: number;
+    }> = [];
+
     for (let layerIdx = 0; layerIdx < this.starLayers.length; layerIdx++) {
       const layer = this.starLayers[layerIdx];
       const speed = this.LAYER_SPEEDS[layerIdx];
@@ -409,36 +497,52 @@ class SpaceRenderer {
         if (worldX < 0) worldX += this.worldWidth;
         if (worldY < 0) worldY += this.worldHeight;
 
-        // Transform to canvas coordinates
-        const [x, y] = this.worldToCanvas(worldX, worldY);
+        // Convert star.z (0~1) to actual 3D depth (-2000 to 2000)
+        const worldZ = (star.z - 0.5) * 4000;
+
+        // Apply 3D rotation and project to 2D
+        const [projX, projY, depth] = this.project3D(worldX, worldY, worldZ);
+
+        // Transform projected world coordinates to canvas coordinates
+        const [x, y] = this.worldToCanvas(projX, projY);
 
         // Cull if outside visible area
         if (x < -10 || x > canvasW + 10 || y < -10 || y > canvasH + 10) continue;
 
         const twinkle = Math.sin(time * 0.001 * star.twinkleSpeed + star.twinklePhase);
         const currentBrightness = star.brightness * (0.6 + twinkle * 0.4);
-        const depthScale = 0.5 + star.z * 0.5;
-        const worldRadius = star.baseRadius * depthScale;
-        // Ensure minimum visible size even when zoomed out
-        const radius = Math.max(0.4, this.worldRadiusToCanvas(worldRadius));
 
-        ctx.globalAlpha = currentBrightness * depthScale;
-        ctx.fillStyle = star.color;
+        projectedStars.push({ star, x, y, depth, brightness: currentBrightness });
+      }
+    }
+
+    // Sort by depth (far to near) for proper rendering order
+    projectedStars.sort((a, b) => b.depth - a.depth);
+
+    // Render sorted stars
+    for (const { star, x, y, depth, brightness } of projectedStars) {
+      // Depth-based scaling (closer = larger, farther = smaller)
+      const depthFactor = 1 - depth / 8000; // Normalize depth to 0~1 range
+      const depthScale = Math.max(0.3, Math.min(1.5, 0.5 + depthFactor));
+      const worldRadius = star.baseRadius * depthScale;
+      const radius = Math.max(0.4, this.worldRadiusToCanvas(worldRadius));
+
+      ctx.globalAlpha = brightness * depthScale;
+      ctx.fillStyle = star.color;
+      ctx.beginPath();
+      ctx.arc(x, y, radius, 0, Math.PI * 2);
+      ctx.fill();
+
+      if (radius > 1.5 && brightness > 0.7) {
+        const glowGradient = ctx.createRadialGradient(x, y, 0, x, y, radius * 5);
+        glowGradient.addColorStop(0, star.color);
+        glowGradient.addColorStop(0.3, star.color.replace(")", ", 0.3)").replace("rgb", "rgba"));
+        glowGradient.addColorStop(1, "transparent");
+        ctx.fillStyle = glowGradient;
+        ctx.globalAlpha = brightness * 0.25;
         ctx.beginPath();
-        ctx.arc(x, y, radius, 0, Math.PI * 2);
+        ctx.arc(x, y, radius * 5, 0, Math.PI * 2);
         ctx.fill();
-
-        if (radius > 1.5 && currentBrightness > 0.7) {
-          const glowGradient = ctx.createRadialGradient(x, y, 0, x, y, radius * 5);
-          glowGradient.addColorStop(0, star.color);
-          glowGradient.addColorStop(0.3, star.color.replace(")", ", 0.3)").replace("rgb", "rgba"));
-          glowGradient.addColorStop(1, "transparent");
-          ctx.fillStyle = glowGradient;
-          ctx.globalAlpha = currentBrightness * 0.25;
-          ctx.beginPath();
-          ctx.arc(x, y, radius * 5, 0, Math.PI * 2);
-          ctx.fill();
-        }
       }
     }
     ctx.globalAlpha = 1;
@@ -496,26 +600,37 @@ class SpaceRenderer {
     }
   }
 
-  // Tilt factor for 3D perspective (0 = top-down, 1 = side view)
-  private readonly ORBIT_TILT = 0.3;
-
   private renderOrbitPaths(ctx: CanvasRenderingContext2D) {
-    const [sunX, sunY] = this.worldToCanvas(this.sun.x, this.sun.y);
-
-    ctx.strokeStyle = "rgba(255, 255, 255, 0.12)";
-    ctx.lineWidth = 1;
+    ctx.strokeStyle = "rgba(255, 255, 255, 0.3)";
+    ctx.lineWidth = 1.5;
 
+    // Draw orbits as 3D circles by sampling points
+    const ORBIT_SEGMENTS = 64;
     for (const planet of this.planets) {
-      const orbitRadiusX = this.worldRadiusToCanvas(planet.orbitRadius);
-      const orbitRadiusY = orbitRadiusX * this.ORBIT_TILT;
       ctx.beginPath();
-      ctx.ellipse(sunX, sunY, orbitRadiusX, orbitRadiusY, 0, 0, Math.PI * 2);
+      for (let i = 0; i <= ORBIT_SEGMENTS; i++) {
+        const angle = (i / ORBIT_SEGMENTS) * Math.PI * 2;
+        const wx = this.sun.x + Math.cos(angle) * planet.orbitRadius;
+        const wy = this.sun.y;
+        const wz = Math.sin(angle) * planet.orbitRadius;
+
+        const [px, py] = this.project3D(wx, wy, wz);
+        const [cx, cy] = this.worldToCanvas(px, py);
+
+        if (i === 0) {
+          ctx.moveTo(cx, cy);
+        } else {
+          ctx.lineTo(cx, cy);
+        }
+      }
       ctx.stroke();
     }
   }
 
   private renderSun(ctx: CanvasRenderingContext2D, _time: number) {
-    const [x, y] = this.worldToCanvas(this.sun.x, this.sun.y);
+    // Sun is at center (z=0)
+    const [px, py] = this.project3D(this.sun.x, this.sun.y, 0);
+    const [x, y] = this.worldToCanvas(px, py);
     const radius = this.worldRadiusToCanvas(this.sun.radius);
 
     // Cull if outside visible area
@@ -555,12 +670,19 @@ class SpaceRenderer {
 
   private renderPlanetGroup(ctx: CanvasRenderingContext2D, planets: Planet[]) {
     for (const planet of planets) {
-      // Calculate planet's world position with tilted orbit
+      // Calculate planet's 3D world position (orbit in xz plane)
       const planetWorldX = this.sun.x + Math.cos(planet.orbitAngle) * planet.orbitRadius;
-      const planetWorldY = this.sun.y + Math.sin(planet.orbitAngle) * planet.orbitRadius * this.ORBIT_TILT;
+      const planetWorldY = this.sun.y;
+      const planetWorldZ = Math.sin(planet.orbitAngle) * planet.orbitRadius;
+
+      // Project to 2D with rotation
+      const [px, py, depth] = this.project3D(planetWorldX, planetWorldY, planetWorldZ);
+      const [x, y] = this.worldToCanvas(px, py);
 
-      const [x, y] = this.worldToCanvas(planetWorldX, planetWorldY);
-      const radius = this.worldRadiusToCanvas(planet.radius);
+      // Scale radius based on depth (perspective)
+      const focalLength = this.worldWidth * 0.8;
+      const perspectiveScale = focalLength / (focalLength + depth);
+      const radius = this.worldRadiusToCanvas(planet.radius) * perspectiveScale;
 
       // Cull if outside visible area
       const cullRadius = planet.hasRings ? radius * 2.5 : radius;
@@ -643,8 +765,10 @@ class SpaceRenderer {
         ctx.fillRect(x - radius, y - radius, radius * 2, radius * 2);
       }
 
-      // Day/night shadow
-      const sunAngle = Math.atan2(this.sun.y - planetWorldY, this.sun.x - planetWorldX);
+      // Day/night shadow (direction from planet to sun in screen space)
+      const [sunPx, sunPy] = this.project3D(this.sun.x, this.sun.y, 0);
+      const [sunX, sunY] = this.worldToCanvas(sunPx, sunPy);
+      const sunAngle = Math.atan2(sunY - y, sunX - x);
       const shadowGradient = ctx.createRadialGradient(
         x + Math.cos(sunAngle) * radius * 0.5,
         y + Math.sin(sunAngle) * radius * 0.5,
@@ -696,6 +820,8 @@ class SpaceRenderer {
     this.viewScale = 1;
     this.viewCenterX = 0.5;
     this.viewCenterY = 0.5;
+    this.rotationX = 0;
+    this.rotationY = 0;
     this.generateSpace();
   }
 
@@ -749,15 +875,54 @@ class ZoomManager {
   }
 }
 
+/**
+ * Manages 3D rotation state and applies to SpaceRenderer.
+ */
+class RotationManager {
+  // Initial tilt of ~25° on X-axis for better 3D perspective
+  private static readonly INITIAL_ROTATION: [number, number, number] = [0.45, 0, 0];
+  private rotation: [number, number, number] = [...RotationManager.INITIAL_ROTATION];
+
+  constructor(private renderer: SpaceRenderer) {
+    this.applyRotation();
+  }
+
+  private applyRotation() {
+    this.renderer.setRotation(this.rotation[0], this.rotation[1]);
+  }
+
+  getRotation(): [number, number, number] {
+    return [...this.rotation];
+  }
+
+  setRotation(x: number, y: number, z: number) {
+    this.rotation = [x, y, z];
+    this.applyRotation();
+  }
+
+  addDelta(dx: number, dy: number, dz: number) {
+    this.rotation[0] += dx;
+    this.rotation[1] += dy;
+    this.rotation[2] += dz;
+    this.applyRotation();
+  }
+
+  reset() {
+    this.rotation = [...RotationManager.INITIAL_ROTATION];
+    this.applyRotation();
+  }
+}
+
 function initSpacePinchZoom() {
   const box = document.getElementById("space-box");
   const canvas = document.getElementById("space-canvas") as HTMLCanvasElement;
   const resetBtn = document.getElementById("reset-space");
   const slider = document.getElementById("zoom-slider") as HTMLInputElement;
   const infoScale = document.getElementById("info-scale");
+  const infoRotation = document.getElementById("info-rotation");
   const infoSource = document.getElementById("info-source");
 
-  if (!box || !canvas || !resetBtn || !slider || !infoScale || !infoSource) {
+  if (!box || !canvas || !resetBtn || !slider || !infoScale || !infoRotation || !infoSource) {
     return;
   }
 
@@ -768,6 +933,7 @@ function initSpacePinchZoom() {
 
   const spaceRenderer = new SpaceRenderer(canvas, box);
   const zoomManager = new ZoomManager(box, spaceRenderer);
+  const rotationManager = new RotationManager(spaceRenderer);
 
   const syncSlider = (scale: number) => {
     const logScale = Math.log(scale);
@@ -775,102 +941,124 @@ function initSpacePinchZoom() {
     slider.value = String(value);
   };
 
-  const updateInfo = (source: string) => {
+  const updateZoomInfo = (source: string) => {
     infoScale.textContent = zoomManager.getScale().toFixed(2);
     infoSource.textContent = source;
     syncSlider(zoomManager.getScale());
   };
 
+  const updateRotationInfo = (source?: string) => {
+    const [rx, ry] = rotationManager.getRotation();
+    infoRotation.textContent = `${(rx * 180 / Math.PI).toFixed(0)}°, ${(ry * 180 / Math.PI).toFixed(0)}°`;
+    if (source) infoSource.textContent = source;
+  };
+
   syncSlider(zoomManager.getScale());
 
+  // Show initial rotation
+  updateRotationInfo();
+
   resetBtn.addEventListener("click", () => {
     zoomManager.reset();
+    rotationManager.reset();
     spaceRenderer.regenerate();
     box.classList.remove("active");
     syncSlider(1);
     infoScale.textContent = "1.00";
+    updateRotationInfo();
     infoSource.textContent = "-";
   });
 
-  const render = (signal: SignalWith<ZoomValue>) => {
-    zoomManager.setScale(signal.value.scale);
-    updateInfo(signal.kind);
-  }
+  // Helper to apply scale delta with clamping
+  const applyZoomDelta = (delta: number, source: string) => {
+    const newScale = clamp(zoomManager.getScale() + delta, MIN_SCALE, MAX_SCALE);
+    zoomManager.setScale(newScale);
+    updateZoomInfo(source);
+  };
 
   const zoomMode$ = keyheld(window, { code: "KeyZ" }).pipe(extend((signal) => ({ opened: signal.value.held })));
   const zoomModeIndicator = document.getElementById("space-zoom-mode");
-  const zoom = (options: ZoomOptions = {}) => createZoom({ minScale: MIN_SCALE, maxScale: MAX_SCALE, baseScale: () => zoomManager.getScale(), ...options });
 
   zoomMode$.on((signal) => {
     zoomModeIndicator?.classList.toggle("active", signal.value.held);
   });
 
-  // Pinch Zoom (dampened for smoother experience)
+  // Pinch Zoom (continuous gesture - uses zoom operator for delta)
   const PINCH_SENSITIVITY = 0.4; // 0~1, lower = less sensitive
   pinch(box, { threshold: 10 })
     .pipe(
       extend((signal) => ({
         ratio: 1 + (signal.value.ratio - 1) * PINCH_SENSITIVITY,
       })),
-      zoom(),
+      createZoom(),
     )
-    .on(render);
+    .on((signal) => {
+      applyZoomDelta(signal.value.scale, signal.kind);
+    });
 
-  // Double Tap Zoom
+  // Double Tap Zoom (discrete - set absolute scale directly)
   const DOUBLE_TAP_ZOOM_MULTIPLIER = 2.5;
   tap(box, { chainIntervalThreshold: 300 })
-    .pipe(
-      filter((signal) => signal.value.tapCount === 2),
-      extend<TapSignal, ZoomInput>(() => {
-        const currentScale = zoomManager.getScale();
-        const isNearMax = currentScale >= MAX_SCALE * 0.9;
-        return {
-          ratio: isNearMax ? 1 : Math.min(currentScale * DOUBLE_TAP_ZOOM_MULTIPLIER, MAX_SCALE),
-        };
-      }),
-      zoom({ baseScale: 1.0 }),
-    )
-    .on(render);
+    .pipe(filter((signal) => signal.value.tapCount === 2))
+    .on(() => {
+      const currentScale = zoomManager.getScale();
+      const isNearMax = currentScale >= MAX_SCALE * 0.9;
+      const targetScale = isNearMax ? 1 : Math.min(currentScale * DOUBLE_TAP_ZOOM_MULTIPLIER, MAX_SCALE);
+      zoomManager.setScale(targetScale);
+      updateZoomInfo("tap");
+    });
 
-  // 'z' + '+/-' (logarithmic zoom: multiply by 1.2 or 1/1.2)
+  // 'z' + '+/-' (discrete - compute delta directly)
   keydown(window, { code: ["Equal", "Minus"] })
     .pipe(
       when(zoomMode$),
       spy((signal) => signal.value.originalEvent.preventDefault()),
-      extend<KeyboardSignal, ZoomInput>((signal) => ({
-        ratio: zoomManager.getScale() * (signal.value.code === "Equal" ? 1.2 : 1 / 1.2),
-      })),
-      zoom({ baseScale: 1.0 }),
     )
-    .on(render);
+    .on((signal) => {
+      const currentScale = zoomManager.getScale();
+      const multiplier = signal.value.code === "Equal" ? 1.2 : 1 / 1.2;
+      const targetScale = clamp(currentScale * multiplier, MIN_SCALE, MAX_SCALE);
+      zoomManager.setScale(targetScale);
+      updateZoomInfo("keydown");
+    });
 
-  // 'z' + 'wheel'
+  // 'z' + 'wheel' (discrete per event - compute delta directly)
   wheel(box, { passive: false })
     .pipe(
       when(zoomMode$),
       spy((signal) => signal.value.originalEvent.preventDefault()),
-      extend<WheelSignal, ZoomInput>((signal) => ({
-        ratio: zoomManager.getScale() * Math.exp(-signal.value.deltaY * 0.005),
-      })),
-      zoom({ baseScale: 1.0 }),
     )
-    .on(render);
+    .on((signal) => {
+      const currentScale = zoomManager.getScale();
+      const multiplier = Math.exp(-signal.value.deltaY * 0.005);
+      const targetScale = clamp(currentScale * multiplier, MIN_SCALE, MAX_SCALE);
+      zoomManager.setScale(targetScale);
+      updateZoomInfo("wheel");
+    });
+
+  // Slider - sets absolute scale directly
+  dom(slider, "input").on((signal) => {
+    const inputElement = signal.value.target as HTMLInputElement;
+    const value = Number(inputElement.value);
+    const logScale = logMin + (value / 100) * (logMax - logMin);
+    const scale = clamp(Math.exp(logScale), MIN_SCALE, MAX_SCALE);
+    zoomManager.setScale(scale);
+    updateZoomInfo("dom");
+  });
 
-  // 'Progress' - slider sets absolute scale (baseScale=1 so ratio becomes the scale directly)
-  dom(slider, "input")
+  // Pan -> 3D Rotation
+  pan(box, { threshold: 5 })
     .pipe(
-      extend<Signal<"dom", Event>, ZoomInput>((signal) => {
-        const inputElement = signal.value.target as HTMLInputElement;
-        const value = Number(inputElement.value);
-        const logScale = logMin + (value / 100) * (logMax - logMin);
-        const scale = Math.exp(logScale);
-        return {
-          ratio: clamp(scale, MIN_SCALE, MAX_SCALE),
-        };
+      rotate3d({
+        sensitivityX: 0.5,
+        sensitivityY: 0.5,
       }),
-      zoom({ baseScale: 1.0 }),
     )
-    .on(render);
+    .on((signal) => {
+      const [drx, dry, drz] = signal.value.rotation;
+      rotationManager.addDelta(drx, dry, drz);
+      updateRotationInfo("pan");
+    });
 }
 
 if (document.readyState === "loading") {
diff --git a/docs/src/components/examples/space-adventure.css b/docs/src/components/examples/space-adventure.css
index 26dd5ec..e5fa114 100644
--- a/docs/src/components/examples/space-adventure.css
+++ b/docs/src/components/examples/space-adventure.css
@@ -4,6 +4,11 @@
   touch-action: none;
 }
 
+.space-adventure ._canvas-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
 /* Grid: 2 columns */
 .space-adventure ._signal-snapshot-grid ._grid {
   grid-template-columns: repeat(2, 1fr);
diff --git a/docs/src/config/sidebar.json b/docs/src/config/sidebar.json
index 65d55c3..da649ca 100644
--- a/docs/src/config/sidebar.json
+++ b/docs/src/config/sidebar.json
@@ -143,6 +143,10 @@
           "label": "reduce",
           "slug": "operator-api/reduce"
         },
+        {
+          "label": "rotate3d",
+          "slug": "operator-api/rotate3d"
+        },
         {
           "label": "session",
           "slug": "operator-api/session"
@@ -163,6 +167,10 @@
           "label": "throttle",
           "slug": "operator-api/throttle"
         },
+        {
+          "label": "translate",
+          "slug": "operator-api/translate"
+        },
         {
           "label": "when",
           "slug": "operator-api/when"
diff --git a/docs/src/content/examples/space-adventure.mdx b/docs/src/content/examples/space-adventure.mdx
index 35a5b5a..2f361a5 100644
--- a/docs/src/content/examples/space-adventure.mdx
+++ b/docs/src/content/examples/space-adventure.mdx
@@ -3,58 +3,93 @@ import SpaceAdventure from "@/components/examples/space-adventure.astro";
 
 # Space Adventure
 
-An interactive space canvas where you can zoom in and out using pinch gestures, keyboard, or mouse wheel.
+An interactive 3D space canvas with drag-to-rotate and multi-input zoom controls.
 
-> **Note:** Multiple input sources are orchestrated into a consistent zoom behavior.
+> **Features:** Drag to rotate the solar system in 3D. Pinch, double tap, or use keyboard/wheel to zoom.
 
 <SpaceAdventure />
 
 ## Code
 
+### 3D Rotation with Pan
+
 ```typescript
-import { wheel, keydown, keyheld, dom, pinch } from "cereb";
-import { zoom as createZoom, extend, when, spy } from "cereb/operators";
+import { pan } from "cereb";
+import { rotate3d } from "cereb/operators";
 
-const zoomMode$ = keyheld(window, { code: "KeyZ" })
-  .pipe(extend((signal) => ({ opened: signal.value.held })));
+// Pan gesture -> 3D rotation
+pan(box, { threshold: 5 })
+  .pipe(
+    rotate3d({
+      sensitivityX: 0.5,
+      sensitivityY: 0.5,
+    }),
+  )
+  .on((signal) => {
+    const [drx, dry, drz] = signal.value.rotation;
+    rotationManager.addDelta(drx, dry, drz);
+  });
+```
 
-const zoom = (options = {}) => createZoom({
-  minScale: MIN_SCALE,
-  maxScale: MAX_SCALE,
-  baseScale: () => zoomManager.getScale(),
-  ...options
-});
+### Pinch Zoom with Delta
 
-// Pinch Zoom - phase-based session management (baseScale captured at start)
+```typescript
+import { pinch } from "cereb";
+import { zoom as createZoom, extend } from "cereb/operators";
+
+const PINCH_SENSITIVITY = 0.4;
+
+// Pinch zoom - uses delta-based zoom operator
 pinch(box, { threshold: 10 })
   .pipe(
     extend((signal) => ({
       ratio: 1 + (signal.value.ratio - 1) * PINCH_SENSITIVITY,
     })),
-    zoom(),
+    createZoom(),
   )
-  .on(render);
+  .on((signal) => {
+    // Accumulate delta and clamp
+    const newScale = clamp(
+      zoomManager.getScale() + signal.value.scale,
+      MIN_SCALE,
+      MAX_SCALE
+    );
+    zoomManager.setScale(newScale);
+  });
+```
+
+### Keyboard & Wheel Zoom
 
-// 'z' + '+/-' - ratio as absolute scale (current × factor)
+```typescript
+import { wheel, keydown, keyheld } from "cereb";
+import { when, spy } from "cereb/operators";
+
+const zoomMode$ = keyheld(window, { code: "KeyZ" })
+  .pipe(extend((signal) => ({ opened: signal.value.held })));
+
+// 'z' + '+/-' keyboard zoom
 keydown(window, { code: ["Equal", "Minus"] })
   .pipe(
     when(zoomMode$),
-    extend((signal) => ({
-      ratio: zoomManager.getScale() * (signal.value.code === "Equal" ? 1.2 : 1 / 1.2),
-    })),
-    zoom({ baseScale: 1.0 }),
+    spy((signal) => signal.value.originalEvent.preventDefault()),
   )
-  .on(render);
+  .on((signal) => {
+    const currentScale = zoomManager.getScale();
+    const multiplier = signal.value.code === "Equal" ? 1.2 : 1 / 1.2;
+    const targetScale = clamp(currentScale * multiplier, MIN_SCALE, MAX_SCALE);
+    zoomManager.setScale(targetScale);
+  });
 
-// 'z' + 'wheel' - ratio as absolute scale (current × factor)
+// 'z' + wheel zoom
 wheel(box, { passive: false })
   .pipe(
     when(zoomMode$),
     spy((signal) => signal.value.originalEvent.preventDefault()),
-    extend((signal) => ({
-      ratio: zoomManager.getScale() * Math.exp(-signal.value.deltaY * 0.005),
-    })),
-    zoom({ baseScale: 1.0 }),
   )
-  .on(render);
+  .on((signal) => {
+    const currentScale = zoomManager.getScale();
+    const multiplier = Math.exp(-signal.value.deltaY * 0.005);
+    const targetScale = clamp(currentScale * multiplier, MIN_SCALE, MAX_SCALE);
+    zoomManager.setScale(targetScale);
+  });
 ```
diff --git a/docs/src/content/operator-api/rotate3d.mdx b/docs/src/content/operator-api/rotate3d.mdx
new file mode 100644
index 0000000..d2117e0
--- /dev/null
+++ b/docs/src/content/operator-api/rotate3d.mdx
@@ -0,0 +1,73 @@
+# `rotate3d`
+
+Converts 2D pan movement to 3D rotation delta. Maps horizontal pan to Y-axis rotation (yaw) and vertical pan to X-axis rotation (pitch).
+
+## Signature
+
+```typescript
+function rotate3d<T extends SignalWith<{ delta: Vector; phase?: string }>>(
+  options?: Rotate3DOptions
+): Operator<T, T & { rotation: Vector; deltaRotation: Vector }>
+```
+
+## Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `sensitivityX` | `number` | `1.0` | Multiplier for X-axis rotation (from vertical pan) |
+| `sensitivityY` | `number` | `1.0` | Multiplier for Y-axis rotation (from horizontal pan) |
+| `invertX` | `boolean` | `false` | Invert X-axis rotation direction |
+| `invertY` | `boolean` | `false` | Invert Y-axis rotation direction |
+
+## Output Value
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `rotation` | `[number, number, number]` | Frame-by-frame rotation delta in radians `[rx, ry, rz]` |
+| `deltaRotation` | `[number, number, number]` | Same as `rotation` (deprecated) |
+
+## Design Philosophy
+
+The `rotate3d` operator outputs **delta values** rather than absolute rotation. The consumer accumulates these deltas to track absolute rotation state.
+
+Base sensitivity is ~0.5 degrees per pixel (`Math.PI / 360` rad/px).
+
+## Examples
+
+### Basic 3D Rotation
+
+```typescript
+import { pan } from "cereb";
+import { rotate3d } from "cereb/operators";
+
+let rotation = [0, 0, 0];
+
+pan(element)
+  .pipe(rotate3d())
+  .on((signal) => {
+    const [drx, dry, drz] = signal.value.rotation;
+    rotation[0] += drx;
+    rotation[1] += dry;
+    rotation[2] += drz;
+    element.style.transform = `rotateX(${rotation[0]}rad) rotateY(${rotation[1]}rad)`;
+  });
+```
+
+### Adjusted Sensitivity
+
+```typescript
+pan(canvas)
+  .pipe(
+    rotate3d({
+      sensitivityX: 0.5,  // Less sensitive for pitch
+      sensitivityY: 0.8,  // Slightly less sensitive for yaw
+    })
+  )
+  .on((signal) => {
+    rotationManager.addDelta(...signal.value.rotation);
+  });
+```
+
+## Session Handling
+
+The operator resets its internal state when `phase` is `"end"` or `"cancel"`, making it ready for the next gesture session.
diff --git a/docs/src/content/operator-api/translate.mdx b/docs/src/content/operator-api/translate.mdx
new file mode 100644
index 0000000..78ed86e
--- /dev/null
+++ b/docs/src/content/operator-api/translate.mdx
@@ -0,0 +1,94 @@
+# `translate`
+
+Converts pan delta to 2D translation coordinates. Useful for drag-to-move interactions.
+
+## Signature
+
+```typescript
+function translate<T extends SignalWith<{ delta: Vector }>>(
+  options?: TranslateOptions
+): Operator<T, T & { translate: [number, number] }>
+```
+
+## Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `baseTranslate` | `[number, number] \| () => [number, number]` | `[0, 0]` | Base position or getter function |
+| `sensitivity` | `number` | `1.0` | Multiplier applied to delta values |
+
+## Output Value
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `translate` | `[number, number]` | Current translation position `[x, y]` |
+
+## Examples
+
+### Basic Drag
+
+```typescript
+import { pan } from "cereb";
+import { translate } from "cereb/operators";
+
+pan(element)
+  .pipe(translate())
+  .on((signal) => {
+    const [x, y] = signal.value.translate;
+    element.style.transform = `translate(${x}px, ${y}px)`;
+  });
+```
+
+### With Base Position
+
+Sync with external position state:
+
+```typescript
+let position = [100, 50];
+
+pan(element)
+  .pipe(
+    translate({
+      baseTranslate: () => position,  // Start from current position
+    })
+  )
+  .on((signal) => {
+    const [x, y] = signal.value.translate;
+    element.style.transform = `translate(${x}px, ${y}px)`;
+
+    // Update position on gesture end
+    if (signal.value.phase === "end") {
+      position = [x, y];
+    }
+  });
+```
+
+### Adjusted Sensitivity
+
+```typescript
+pan(element)
+  .pipe(
+    translate({
+      sensitivity: 1.5,  // Move 50% faster than finger
+    })
+  )
+  .on((signal) => {
+    const [x, y] = signal.value.translate;
+    element.style.transform = `translate(${x}px, ${y}px)`;
+  });
+```
+
+### Bounded Movement
+
+```typescript
+const BOUNDS = { minX: 0, maxX: 500, minY: 0, maxY: 300 };
+
+pan(element)
+  .pipe(translate())
+  .on((signal) => {
+    let [x, y] = signal.value.translate;
+    x = Math.max(BOUNDS.minX, Math.min(BOUNDS.maxX, x));
+    y = Math.max(BOUNDS.minY, Math.min(BOUNDS.maxY, y));
+    element.style.transform = `translate(${x}px, ${y}px)`;
+  });
+```
diff --git a/docs/src/content/operator-api/zoom.mdx b/docs/src/content/operator-api/zoom.mdx
index 70412e0..b81d5c0 100644
--- a/docs/src/content/operator-api/zoom.mdx
+++ b/docs/src/content/operator-api/zoom.mdx
@@ -1,6 +1,6 @@
 # `zoom`
 
-Calculates bounded scale values from ratio-based inputs. Works with pinch, wheel, and keyboard zoom sources.
+Converts ratio input to frame-by-frame scale delta. Works with pinch gestures and other ratio-based inputs.
 
 ## Signature
 
@@ -10,76 +10,85 @@ function zoom<T extends SignalWith<{ ratio: number; phase?: string }>>(
 ): Operator<T, T & { scale: number; deltaScale: number }>
 ```
 
-## Options
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `minScale` | `number` | `0.1` | Minimum allowed scale |
-| `maxScale` | `number` | `10.0` | Maximum allowed scale |
-| `baseScale` | `number \| () => number` | `1.0` | Base scale or getter function |
-| `mode` | `"multiply" \| "add"` | `"multiply"` | How ratio is applied |
-
 ## Output Value
 
 | Property | Type | Description |
 |----------|------|-------------|
-| `scale` | `number` | Current scale (clamped to min/max) |
-| `deltaScale` | `number` | Scale change since last signal |
+| `scale` | `number` | Frame-by-frame scale delta (not absolute scale) |
+| `deltaScale` | `number` | Same as `scale` (deprecated, use `scale`) |
+
+## Design Philosophy
+
+The `zoom` operator outputs **delta values** rather than absolute scale. This design:
+
+- Keeps the operator stateless and simple
+- Lets consumers control clamping and accumulation
+- Makes it easier to combine with other transforms
 
 ## Examples
 
-### Pinch Zoom
+### Basic Pinch Zoom
 
 ```typescript
 import { pinch } from "cereb";
 import { zoom } from "cereb/operators";
 
+let scale = 1.0;
+const MIN_SCALE = 0.5;
+const MAX_SCALE = 3.0;
+
 pinch(element)
-  .pipe(zoom({ minScale: 0.5, maxScale: 3.0 }))
+  .pipe(zoom())
   .on((signal) => {
-    element.style.transform = `scale(${signal.value.scale})`;
+    // Accumulate delta and clamp
+    scale += signal.value.scale;
+    scale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale));
+    element.style.transform = `scale(${scale})`;
   });
 ```
 
-### Wheel Zoom
+### With Sensitivity Control
 
 ```typescript
-import { wheel } from "cereb";
-import { extend, zoom } from "cereb/operators";
+const PINCH_SENSITIVITY = 0.4;
 
-wheel(element, { passive: false })
+pinch(element)
   .pipe(
-    extend((s) => ({ ratio: Math.exp(-s.value.deltaY * 0.005) })),
-    zoom({ minScale: 0.5, maxScale: 3.0 })
+    extend((signal) => ({
+      ratio: 1 + (signal.value.ratio - 1) * PINCH_SENSITIVITY,
+    })),
+    zoom()
   )
   .on((signal) => {
-    element.style.transform = `scale(${signal.value.scale})`;
+    scale += signal.value.scale;
+    scale = clamp(scale, MIN_SCALE, MAX_SCALE);
+    element.style.transform = `scale(${scale})`;
   });
 ```
 
-### Dynamic Base Scale
+### Multiple Input Sources
 
-When multiple inputs control zoom, use a function to sync with external state:
+For keyboard or wheel zoom, compute the target scale directly instead of using `zoom`:
 
 ```typescript
-let currentScale = 1;
-
-const zoomOp = () => zoom({
-  minScale: 0.5,
-  maxScale: 3.0,
-  baseScale: () => currentScale  // Always use current scale
-});
-
-pinch(element).pipe(zoomOp()).on(apply);
-wheel(element).pipe(extend(...), zoomOp()).on(apply);
+// Keyboard zoom - discrete steps
+keydown(window, { code: ["Equal", "Minus"] })
+  .on((signal) => {
+    const multiplier = signal.value.code === "Equal" ? 1.2 : 1 / 1.2;
+    scale = clamp(scale * multiplier, MIN_SCALE, MAX_SCALE);
+    element.style.transform = `scale(${scale})`;
+  });
 
-function apply(signal) {
-  currentScale = signal.value.scale;
-  element.style.transform = `scale(${currentScale})`;
-}
+// Wheel zoom - continuous
+wheel(element, { passive: false })
+  .on((signal) => {
+    signal.value.originalEvent.preventDefault();
+    const multiplier = Math.exp(-signal.value.deltaY * 0.005);
+    scale = clamp(scale * multiplier, MIN_SCALE, MAX_SCALE);
+    element.style.transform = `scale(${scale})`;
+  });
 ```
 
-## Mode
+## Session Handling
 
-- `multiply` (default): `scale = baseScale × ratio` - For pinch gestures
-- `add`: `scale = baseScale + ratio` - For delta-based inputs
+The operator resets its internal state when `phase` is `"end"` or `"cancel"`, making it ready for the next gesture session.
diff --git a/docs/src/pages/operator-api/rotate3d.astro b/docs/src/pages/operator-api/rotate3d.astro
new file mode 100644
index 0000000..d1f3cc1
--- /dev/null
+++ b/docs/src/pages/operator-api/rotate3d.astro
@@ -0,0 +1,17 @@
+---
+import DocsLayout from "@/layouts/docs-layout.astro";
+import Content from "@/content/operator-api/rotate3d.mdx";
+
+const headings = [
+  { depth: 2, slug: "signature", text: "Signature" },
+  { depth: 2, slug: "options", text: "Options" },
+  { depth: 2, slug: "output-value", text: "Output Value" },
+  { depth: 2, slug: "design-philosophy", text: "Design Philosophy" },
+  { depth: 2, slug: "examples", text: "Examples" },
+  { depth: 2, slug: "session-handling", text: "Session Handling" },
+];
+---
+
+<DocsLayout title="rotate3d" description="Convert pan to 3D rotation" headings={headings}>
+  <Content />
+</DocsLayout>
diff --git a/docs/src/pages/operator-api/translate.astro b/docs/src/pages/operator-api/translate.astro
new file mode 100644
index 0000000..3c0f7cf
--- /dev/null
+++ b/docs/src/pages/operator-api/translate.astro
@@ -0,0 +1,15 @@
+---
+import DocsLayout from "@/layouts/docs-layout.astro";
+import Content from "@/content/operator-api/translate.mdx";
+
+const headings = [
+  { depth: 2, slug: "signature", text: "Signature" },
+  { depth: 2, slug: "options", text: "Options" },
+  { depth: 2, slug: "output-value", text: "Output Value" },
+  { depth: 2, slug: "examples", text: "Examples" },
+];
+---
+
+<DocsLayout title="translate" description="Convert pan to 2D translation" headings={headings}>
+  <Content />
+</DocsLayout>
diff --git a/docs/src/pages/operator-api/zoom.astro b/docs/src/pages/operator-api/zoom.astro
index a822b13..ca353a8 100644
--- a/docs/src/pages/operator-api/zoom.astro
+++ b/docs/src/pages/operator-api/zoom.astro
@@ -4,10 +4,10 @@ import Content from "@/content/operator-api/zoom.mdx";
 
 const headings = [
   { depth: 2, slug: "signature", text: "Signature" },
-  { depth: 2, slug: "options", text: "Options" },
   { depth: 2, slug: "output-value", text: "Output Value" },
+  { depth: 2, slug: "design-philosophy", text: "Design Philosophy" },
   { depth: 2, slug: "examples", text: "Examples" },
-  { depth: 2, slug: "mode", text: "Mode" },
+  { depth: 2, slug: "session-handling", text: "Session Handling" },
 ];
 ---
 
diff --git a/packages/cereb/package.json b/packages/cereb/package.json
index eae444b..599f80e 100644
--- a/packages/cereb/package.json
+++ b/packages/cereb/package.json
@@ -1,7 +1,7 @@
 {
   "name": "cereb",
   "description": "User input modeling and orchestration with a lightweight reactive stream library.",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "license": "MIT",
   "author": "devphilip21 <philip21.dev@gmail.com>",
   "repository": {
diff --git a/packages/cereb/src/features/dom/mouse.ts b/packages/cereb/src/features/dom/mouse.ts
index 9c30b82..679ec43 100644
--- a/packages/cereb/src/features/dom/mouse.ts
+++ b/packages/cereb/src/features/dom/mouse.ts
@@ -1,7 +1,7 @@
 import { createStream, type Stream } from "../../core/stream.js";
 import { createDomSignal, type DomSignal } from "./dom-signal.js";
 
-const MOUSE_EVENTS = ["mousedown", "mousemove", "mouseup"] as const;
+const MOUSE_EVENTS = ["mousedown", "mousemove", "mouseup", "mouseleave"] as const;
 
 export function mouse(
   target: EventTarget,
diff --git a/packages/cereb/src/features/dom/pointer.ts b/packages/cereb/src/features/dom/pointer.ts
index e50d78d..1a6167b 100644
--- a/packages/cereb/src/features/dom/pointer.ts
+++ b/packages/cereb/src/features/dom/pointer.ts
@@ -1,7 +1,13 @@
 import { createStream, type Stream } from "../../core/stream.js";
 import { createDomSignal, type DomSignal } from "./dom-signal.js";
 
-const POINTER_EVENTS = ["pointerdown", "pointermove", "pointerup", "pointercancel"] as const;
+const POINTER_EVENTS = [
+  "pointerdown",
+  "pointermove",
+  "pointerup",
+  "pointercancel",
+  "pointerleave",
+] as const;
 
 export function pointer(
   target: EventTarget,
diff --git a/packages/cereb/src/features/single-pointer/recognizer-from-mouse.ts b/packages/cereb/src/features/single-pointer/recognizer-from-mouse.ts
index 26ef3b2..7536968 100644
--- a/packages/cereb/src/features/single-pointer/recognizer-from-mouse.ts
+++ b/packages/cereb/src/features/single-pointer/recognizer-from-mouse.ts
@@ -14,20 +14,33 @@ import {
 export function createMouseRecognizer(
   options: SinglePointerOptions = {},
 ): SinglePointerRecognizer<DomSignal<MouseEvent>> {
+  let isMouseDown = false;
+
   function processer(domSignal: DomSignal<MouseEvent>, signal: SinglePointerSignal): boolean {
     const e = domSignal.value;
     let phase: SinglePointerPhase;
     let button: SinglePointerButton;
     switch (e.type) {
       case "mousedown":
+        isMouseDown = true;
         phase = "start";
         button = toSinglePointerButton(e.button);
         break;
       case "mouseup":
+        isMouseDown = false;
         phase = "end";
         button = toSinglePointerButton(e.button);
         break;
+      case "mouseleave":
+        isMouseDown = false;
+        phase = "cancel";
+        button = "none";
+        break;
       default:
+        // mousemove: ignore if mouse is not pressed
+        if (!isMouseDown) {
+          return false;
+        }
         phase = "move";
         button = "none";
     }
diff --git a/packages/cereb/src/features/single-pointer/recognizer-from-pointer.ts b/packages/cereb/src/features/single-pointer/recognizer-from-pointer.ts
index ce0c987..a1f217c 100644
--- a/packages/cereb/src/features/single-pointer/recognizer-from-pointer.ts
+++ b/packages/cereb/src/features/single-pointer/recognizer-from-pointer.ts
@@ -15,6 +15,8 @@ import {
 export function createPointerRecognizer(
   options: SinglePointerOptions = {},
 ): SinglePointerRecognizer<DomSignal<PointerEvent>> {
+  let isPointerDown = false;
+
   function processer(domSignal: DomSignal<PointerEvent>, signal: SinglePointerSignal): boolean {
     const e = domSignal.value;
 
@@ -26,18 +28,26 @@ export function createPointerRecognizer(
     let button: SinglePointerButton;
     switch (e.type) {
       case "pointerdown":
+        isPointerDown = true;
         phase = "start";
         button = toSinglePointerButton(e.button);
         break;
       case "pointerup":
+        isPointerDown = false;
         phase = "end";
         button = toSinglePointerButton(e.button);
         break;
       case "pointercancel":
+      case "pointerleave":
+        isPointerDown = false;
         phase = "cancel";
         button = "none";
         break;
       default:
+        // pointermove: ignore if pointer is not pressed
+        if (!isPointerDown) {
+          return false;
+        }
         phase = "move";
         button = "none";
     }
diff --git a/packages/cereb/src/operators/index.ts b/packages/cereb/src/operators/index.ts
index 58adf3b..59ec326 100644
--- a/packages/cereb/src/operators/index.ts
+++ b/packages/cereb/src/operators/index.ts
@@ -11,11 +11,15 @@ export { merge, mergeWith } from "./merge.js";
 export type { OffsetOptions, OffsetValue, PointerValue } from "./offset.js";
 export { offset } from "./offset.js";
 export { reduce } from "./reduce.js";
+export type { Rotate3DInput, Rotate3DOptions, Rotate3DValue } from "./rotate3d.js";
+export { rotate3d } from "./rotate3d.js";
 export { multiPointersSession, session, singlePointerSession } from "./session.js";
 export { share, shareReplay } from "./share.js";
 export { spy, tap } from "./spy.js";
 export { switchMap } from "./switch-map.js";
 export { throttle, throttleLast } from "./throttle.js";
+export type { TranslateInput, TranslateOptions, TranslateValue } from "./translate.js";
+export { translate } from "./translate.js";
 export { when } from "./when.js";
 export type { ZoomInput, ZoomOptions, ZoomValue } from "./zoom.js";
 export { zoom } from "./zoom.js";
diff --git a/packages/cereb/src/operators/rotate3d.ts b/packages/cereb/src/operators/rotate3d.ts
new file mode 100644
index 0000000..731f3f8
--- /dev/null
+++ b/packages/cereb/src/operators/rotate3d.ts
@@ -0,0 +1,152 @@
+import type { ExtendSignalValue, SignalWith } from "../core/signal.js";
+import type { Operator } from "../core/stream.js";
+import { createStream } from "../core/stream.js";
+import type { Vector } from "../geometry/types.js";
+
+/**
+ * Required value properties for rotate3d operator input.
+ * Typically provided by pan signals.
+ */
+export interface Rotate3DInput {
+  delta: Vector;
+  phase?: "start" | "move" | "end" | "cancel" | string;
+}
+
+/**
+ * Configuration options for rotate3d operator.
+ */
+export interface Rotate3DOptions {
+  /**
+   * Sensitivity multiplier for X-axis rotation (from vertical pan movement).
+   * 1.0 = default sensitivity (~0.5° per pixel)
+   * @default 1.0
+   */
+  sensitivityX?: number;
+
+  /**
+   * Sensitivity multiplier for Y-axis rotation (from horizontal pan movement).
+   * 1.0 = default sensitivity (~0.5° per pixel)
+   * @default 1.0
+   */
+  sensitivityY?: number;
+
+  /**
+   * Invert X-axis rotation direction.
+   * @default false
+   */
+  invertX?: boolean;
+
+  /**
+   * Invert Y-axis rotation direction.
+   * @default false
+   */
+  invertY?: boolean;
+}
+
+/**
+ * Values added by rotate3d operator.
+ */
+export interface Rotate3DValue {
+  /**
+   * Frame-by-frame rotation delta in radians [deltaRx, deltaRy, deltaRz].
+   * Consumer should accumulate this value to get absolute rotation.
+   */
+  rotation: Vector;
+
+  /**
+   * Same as rotation. Provided for backward compatibility.
+   * @deprecated Use `rotation` instead
+   */
+  deltaRotation: Vector;
+}
+
+/**
+ * Converts pan delta to 3D rotation delta.
+ *
+ * Outputs frame-by-frame rotation change (delta), not absolute rotation.
+ * Consumer is responsible for accumulating the rotation values.
+ *
+ * Maps 2D pan movement to 3D rotation:
+ * - Horizontal pan (deltaX) -> Y-axis rotation (yaw)
+ * - Vertical pan (deltaY) -> X-axis rotation (pitch)
+ *
+ * @example
+ * ```typescript
+ * let rotation = [0, 0, 0];
+ *
+ * pan(element)
+ *   .pipe(rotate3d({ sensitivityX: 1.0 }))
+ *   .on(signal => {
+ *     const [drx, dry, drz] = signal.value.rotation;
+ *     rotation[0] += drx;
+ *     rotation[1] += dry;
+ *     rotation[2] += drz;
+ *     element.style.transform = `rotateX(${rotation[0]}rad) rotateY(${rotation[1]}rad)`;
+ *   });
+ * ```
+ */
+export function rotate3d<T extends SignalWith<Rotate3DInput>>(
+  options: Rotate3DOptions = {},
+): Operator<T, ExtendSignalValue<T, Rotate3DValue>> {
+  const { sensitivityX = 1.0, sensitivityY = 1.0, invertX = false, invertY = false } = options;
+
+  // Base rate: ~0.5° per pixel (π/360 ≈ 0.00873 rad/px)
+  const BASE_SENSITIVITY = Math.PI / 360;
+
+  const xRate = BASE_SENSITIVITY * sensitivityX * (invertX ? -1 : 1);
+  const yRate = BASE_SENSITIVITY * sensitivityY * (invertY ? -1 : 1);
+
+  type OutputSignal = ExtendSignalValue<T, Rotate3DValue>;
+
+  return (source) =>
+    createStream<OutputSignal>((observer) => {
+      // Track previous cumulative rotation to compute frame delta
+      let prevRaw: Vector | null = null;
+
+      const unsub = source.on({
+        next(signal) {
+          try {
+            const { delta, phase } = signal.value;
+
+            const deltaX = delta[0] ?? 0;
+            const deltaY = delta[1] ?? 0;
+
+            // Compute raw rotation from cumulative pan delta (no base)
+            const rawRx = deltaY * xRate;
+            const rawRy = deltaX * yRate;
+            const rawRz = 0;
+
+            // Frame delta = current raw - previous raw
+            const rotation: Vector = prevRaw
+              ? [rawRx - prevRaw[0], rawRy - prevRaw[1], rawRz - prevRaw[2]]
+              : [rawRx, rawRy, rawRz];
+
+            prevRaw = [rawRx, rawRy, rawRz];
+
+            const value = signal.value as Rotate3DInput & Rotate3DValue;
+            value.rotation = rotation;
+            value.deltaRotation = rotation;
+
+            observer.next(signal as unknown as OutputSignal);
+
+            // Reset on session end for next gesture
+            if (phase === "end" || phase === "cancel") {
+              prevRaw = null;
+            }
+          } catch (err) {
+            observer.error?.(err);
+          }
+        },
+        error: observer.error?.bind(observer),
+        complete() {
+          prevRaw = null;
+          observer.complete?.();
+        },
+      });
+
+      return () => {
+        prevRaw = null;
+        unsub();
+      };
+    });
+}
diff --git a/packages/cereb/src/operators/translate.ts b/packages/cereb/src/operators/translate.ts
new file mode 100644
index 0000000..031e1de
--- /dev/null
+++ b/packages/cereb/src/operators/translate.ts
@@ -0,0 +1,95 @@
+import type { ExtendSignalValue, SignalWith } from "../core/signal.js";
+import type { Operator } from "../core/stream.js";
+import { createStream } from "../core/stream.js";
+import type { Point, Vector } from "../geometry/types.js";
+
+/**
+ * Required value properties for translate operator input.
+ * Typically provided by pan signals.
+ */
+export interface TranslateInput {
+  delta: Vector;
+}
+
+/**
+ * Configuration options for translate operator.
+ */
+export interface TranslateOptions {
+  /**
+   * Base translation [x, y] or a function that returns the current position.
+   * @default [0, 0]
+   */
+  baseTranslate?: Point | (() => Point);
+
+  /**
+   * Sensitivity multiplier applied to delta values.
+   * @default 1.0
+   */
+  sensitivity?: number;
+}
+
+/**
+ * Values added by translate operator.
+ */
+export interface TranslateValue {
+  /** Current translation position [x, y] */
+  translate: Point;
+}
+
+/**
+ * Creates an operator that converts pan delta to 2D translation coordinates.
+ *
+ * @example
+ * ```typescript
+ * pan(element)
+ *   .pipe(translate({
+ *     baseTranslate: () => getCurrentPosition(),
+ *     sensitivity: 1.5,
+ *   }))
+ *   .on(signal => {
+ *     const [x, y] = signal.value.translate;
+ *     element.style.transform = `translate(${x}px, ${y}px)`;
+ *   });
+ * ```
+ */
+export function translate<T extends SignalWith<TranslateInput>>(
+  options: TranslateOptions = {},
+): Operator<T, ExtendSignalValue<T, TranslateValue>> {
+  const { baseTranslate = [0, 0], sensitivity = 1.0 } = options;
+  const resolveBaseTranslate =
+    typeof baseTranslate === "function" ? baseTranslate : () => baseTranslate;
+
+  type OutputSignal = ExtendSignalValue<T, TranslateValue>;
+
+  return (source) =>
+    createStream<OutputSignal>((observer) => {
+      const unsub = source.on({
+        next(signal) {
+          try {
+            const { delta } = signal.value;
+
+            const base = resolveBaseTranslate();
+            const baseX = base[0] ?? 0;
+            const baseY = base[1] ?? 0;
+
+            const deltaX = delta[0] ?? 0;
+            const deltaY = delta[1] ?? 0;
+
+            const x = baseX + deltaX * sensitivity;
+            const y = baseY + deltaY * sensitivity;
+
+            const value = signal.value as TranslateInput & TranslateValue;
+            value.translate = [x, y];
+
+            observer.next(signal as unknown as OutputSignal);
+          } catch (err) {
+            observer.error?.(err);
+          }
+        },
+        error: observer.error?.bind(observer),
+        complete: observer.complete?.bind(observer),
+      });
+
+      return unsub;
+    });
+}
diff --git a/packages/cereb/src/operators/zoom.ts b/packages/cereb/src/operators/zoom.ts
index 330b45a..a04efbd 100644
--- a/packages/cereb/src/operators/zoom.ts
+++ b/packages/cereb/src/operators/zoom.ts
@@ -8,160 +8,85 @@ import { createStream } from "../core/stream.js";
  */
 export interface ZoomInput {
   ratio: number;
-
-  /**
-   * Optional phase for session-based zoom (e.g., pinch gestures).
-   *
-   * When provided:
-   * - 'start': Captures baseScale at session start
-   * - 'end' or 'cancel': Resets session state for next gesture
-   *
-   * When not provided, falls back to prevScale-based detection.
-   */
-  phase?: "start" | "change" | "end" | "cancel" | string;
+  phase?: "start" | "move" | "end" | "cancel" | string;
 }
 
-export interface ZoomOptions {
-  /**
-   * Minimum allowed scale value.
-   * Scale below this will be clamped.
-   * @default 0.1
-   */
-  minScale?: number;
-
-  /**
-   * Maximum allowed scale value.
-   * Scale above this will be clamped.
-   * @default 10.0
-   */
-  maxScale?: number;
-
-  /**
-   * Base scale value or a function that returns the current scale.
-   *
-   * When a function is provided, it is called once at the start of each session
-   * (first event after stream creation or after complete). This enables proper
-   * synchronization with external state when multiple input sources control zoom.
-   *
-   * @example
-   * ```typescript
-   * // Static value (default behavior)
-   * zoom({ baseScale: 1.0 })
-   *
-   * // Dynamic reference to external state
-   * zoom({ baseScale: () => zoomManager.getScale() })
-   * ```
-   *
-   * @default 1.0
-   */
-  baseScale?: number | (() => number);
-
-  /**
-   * How ratio is applied to baseScale.
-   *
-   * - `'multiply'`: scale = baseScale × ratio (default)
-   *   Use for pinch gestures where ratio represents a scale factor (1.0 = no change)
-   *
-   * - `'add'`: scale = baseScale + ratio
-   *   Use for delta-based inputs where ratio represents a change amount
-   *
-   * @example
-   * ```typescript
-   * // Pinch: ratio is 1.2 means "120% of base" → multiply
-   * pinch(el).pipe(zoom({ mode: 'multiply', baseScale: getScale }))
-   *
-   * // Keyboard: ratio is 0.1 means "+0.1 to base" → add
-   * keyboard(el).pipe(
-   *   extend(() => ({ ratio: 0.1 })),
-   *   zoom({ mode: 'add', baseScale: getScale })
-   * )
-   * ```
-   *
-   * @default 'multiply'
-   */
-  mode?: "multiply" | "add";
-}
+/**
+ * Configuration options for zoom operator.
+ * Note: minScale/maxScale are not enforced by the operator.
+ * Consumer is responsible for clamping after accumulating delta.
+ */
+export type ZoomOptions = {};
 
 /**
- * Zoom values added by zoom() operator.
+ * Values added by zoom() operator.
  */
 export interface ZoomValue {
-  /** Current scale factor (1.0 = initial, >1 = zoom in, <1 = zoom out) */
+  /**
+   * Frame-by-frame scale delta.
+   * Consumer should accumulate this value to get absolute scale.
+   */
   scale: number;
 
-  /** Scale change since last event */
+  /**
+   * Same as scale. Provided for backward compatibility.
+   * @deprecated Use `scale` instead
+   */
   deltaScale: number;
 }
 
-function clamp(value: number, min: number, max: number): number {
-  return Math.max(min, Math.min(max, value));
-}
-
 /**
- * Creates an operator that adds scale/zoom calculations to distance-based signals.
+ * Converts ratio input to scale delta.
  *
- * This operator transforms raw distance data into scale values, handling:
- * - Scale calculation from distance ratio
- * - Min/max scale clamping
- * - Delta scale computation
- * - Scale velocity computation
+ * Outputs frame-by-frame scale change (delta), not absolute scale.
+ * Consumer is responsible for accumulating the scale values.
  *
  * @example
  * ```typescript
- * pipe(
- *   pinch(element),
- *   zoom({ minScale: 0.5, maxScale: 3.0 })
- * ).on(event => {
- *   console.log(event.value.scale);         // 0.5 ~ 3.0
- *   console.log(event.value.scaleVelocity); // scale change per ms
- * });
+ * let scale = 1.0;
+ * const MIN_SCALE = 0.5, MAX_SCALE = 3.0;
+ *
+ * pinch(element)
+ *   .pipe(zoom())
+ *   .on(signal => {
+ *     scale += signal.value.scale;
+ *     scale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale));
+ *     element.style.transform = `scale(${scale})`;
+ *   });
  * ```
  */
 export function zoom<T extends SignalWith<ZoomInput>>(
-  options: ZoomOptions = {},
+  _options: ZoomOptions = {},
 ): Operator<T, ExtendSignalValue<T, ZoomValue>> {
-  const { minScale = 0.1, maxScale = 10.0, baseScale = 1.0, mode = "multiply" } = options;
-  const resolveBaseScale = typeof baseScale === "function" ? baseScale : () => baseScale;
-  const applyRatio =
-    mode === "add"
-      ? (base: number, ratio: number) => base + ratio
-      : (base: number, ratio: number) => base * ratio;
-
   type OutputSignal = ExtendSignalValue<T, ZoomValue>;
 
   return (source) =>
     createStream<OutputSignal>((observer) => {
-      let prevScale: number | null = null;
-      let sessionBaseScale = 1.0;
+      // Track previous ratio to compute frame delta
+      let prevRaw: number | null = null;
 
       const unsub = source.on({
         next(signal) {
           try {
             const { ratio, phase } = signal.value;
 
-            // Capture baseScale at session start
-            // - If phase is provided: capture on 'start'
-            // - If phase is not provided: capture on first event (prevScale === null)
-            if (phase === "start" || prevScale === null) {
-              sessionBaseScale = resolveBaseScale();
-              prevScale = sessionBaseScale;
-            }
+            // Use ratio directly as raw scale (no base transformation)
+            const rawScale = ratio;
 
-            const rawScale = applyRatio(sessionBaseScale, ratio);
-            const scale = clamp(rawScale, minScale, maxScale);
-            const deltaScale = scale - prevScale;
+            // Frame delta = current raw - previous raw
+            const deltaScale = prevRaw !== null ? rawScale - prevRaw : 0;
 
-            prevScale = scale;
+            prevRaw = rawScale;
 
             const value = signal.value as ZoomInput & ZoomValue;
-            value.scale = scale;
+            value.scale = deltaScale;
             value.deltaScale = deltaScale;
 
             observer.next(signal as unknown as OutputSignal);
 
-            // Reset session on end/cancel for next gesture
+            // Reset on session end for next gesture
             if (phase === "end" || phase === "cancel") {
-              prevScale = null;
+              prevRaw = null;
             }
           } catch (err) {
             observer.error?.(err);
@@ -169,13 +94,13 @@ export function zoom<T extends SignalWith<ZoomInput>>(
         },
         error: observer.error?.bind(observer),
         complete() {
-          prevScale = null;
+          prevRaw = null;
           observer.complete?.();
         },
       });
 
       return () => {
-        prevScale = null;
+        prevRaw = null;
         unsub();
       };
     });