diff --git a/apps/web/src/components/WorkplaneViewport.tsx b/apps/web/src/components/WorkplaneViewport.tsx
index 8226e0b..400d5b0 100644
--- a/apps/web/src/components/WorkplaneViewport.tsx
+++ b/apps/web/src/components/WorkplaneViewport.tsx
@@ -64,6 +64,19 @@ import {
 } from "@/components/workplane/TransformOverlay";
 import type { AlignAxis, AlignHandleStatus, AlignTarget, GridSize, MeasurementAccuracy, ShapeAsset, WorkplaneShape, WorkplaneWorkspaceSettings } from "@/types/sketchforge";
 import type { CadModifierEdge } from "@/lib/cadModifierTypes";
+import {
+  createRotationRingSet,
+  ROTATION_RING_AXES,
+  targetRingOpacities,
+  updateRotationRingSet,
+  type RotationRingAxis,
+  type RotationRingSet,
+} from "@/lib/rotationRings";
+import {
+  readPreferClassicRotateHandles,
+  setPreferClassicRotateHandles,
+  useRotationMode,
+} from "@/lib/useRotationMode";
 
 const WORKPLANE_WIDTH = 200;
 const WORKPLANE_DEPTH = 140;
@@ -273,6 +286,9 @@ type ThreeState = {
   lastOverlaySync: number;
   lastViewCubeSync: number;
   rotationHandleSides: RotationHandleSides | null;
+  rotationRingSet: RotationRingSet;
+  rotationRingsLastSync: number;
+  rotationRingsAnimating: boolean;
   disposeInteractionListeners: () => void;
   resize: () => void;
 };
@@ -2262,6 +2278,22 @@ export function WorkplaneViewport({
   const [moveDimensionOverlay, setMoveDimensionOverlay] = useState<MoveDimensionOverlayState | null>(null);
   const [moveDimensionsEnabled, setMoveDimensionsEnabled] = useState(true);
   const [challengeTutorialCollapsed, setChallengeTutorialCollapsed] = useState(false);
+  const rotationMode = useRotationMode();
+  const rotationModeRef = useRef(rotationMode);
+  useEffect(() => {
+    rotationModeRef.current = rotationMode;
+    if (threeRef.current) {
+      threeRef.current.needsRender = true;
+    }
+  }, [rotationMode]);
+  const [preferClassicRotateHandles, setPreferClassicRotateHandlesState] = useState(() =>
+    readPreferClassicRotateHandles(),
+  );
+  const changePreferClassicRotateHandles = useCallback((preferClassic: boolean) => {
+    setPreferClassicRotateHandlesState(preferClassic);
+    setPreferClassicRotateHandles(preferClassic);
+  }, []);
+  const hoveredRingAxisRef = useRef<RotationRingAxis | null>(null);
 
   useEffect(() => {
     setChallengeTutorialCollapsed(false);
@@ -2779,7 +2811,7 @@ export function WorkplaneViewport({
       const now = performance.now();
       const controlsChanged = state.controls.update();
       const cameraSettled = state.wasCameraMoving && !controlsChanged;
-      if (!controlsChanged && !state.needsRender && !cameraSettled) {
+      if (!controlsChanged && !state.needsRender && !cameraSettled && !state.rotationRingsAnimating) {
         return;
       }
       constrainCamera(state, workspaceRef.current);
@@ -2792,7 +2824,7 @@ export function WorkplaneViewport({
         syncViewCube(state, viewCubeRef.current);
         state.lastViewCubeSync = now;
       }
-      if (controlsChanged || cameraSettled || state.needsRender || now - state.lastOverlaySync > 96) {
+      if (controlsChanged || cameraSettled || state.needsRender || state.rotationRingsAnimating || now - state.lastOverlaySync > 96) {
         const previewShapes = previewShapesForDrag(shapesRef.current, dragRef.current);
         syncTransformOverlay(
           state,
@@ -2805,6 +2837,21 @@ export function WorkplaneViewport({
           false,
           placementWorkplaneRef.current,
         );
+        const activeTransform = transformRef.current;
+        const activeRingAxis: RotationRingAxis | null =
+          activeTransform && activeTransform.kind === "rotate" && activeTransform.handleKey.startsWith("rotate-ring-")
+            ? (activeTransform.rotationAxis as RotationRingAxis)
+            : null;
+        syncRotationRings(
+          state,
+          previewShapes,
+          renderSelectionIds(),
+          rotationModeRef.current === "rings" && !workplaneModeRef.current,
+          controlsChanged,
+          hoveredRingAxisRef.current,
+          activeRingAxis,
+          placementWorkplaneRef.current,
+        );
         syncAlignOverlay(state, alignReferenceShapesRef.current, selectedIdsRef.current, alignModeRef.current, alignAnchorIdRef.current, alignHandlesRef.current, alignOverlayRef, setAlignOverlay);
         syncMirrorOverlay(state, mirrorReferenceShapesRef.current, selectedIdsRef.current, mirrorModeRef.current, mirrorOverlayRef, setMirrorOverlay);
         syncRulerOverlay(state, rulerModelRef.current, rulerOverlayRef, setRulerOverlay, workspaceRef.current.accuracy);
@@ -2849,6 +2896,7 @@ export function WorkplaneViewport({
       }
       disposeChildren(state.shapeLayer);
       state.shapeRecords.clear();
+      state.rotationRingSet.dispose();
       disposeChildren(state.helperLayer);
       disposeChildren(state.moveDimensionLayer);
       disposeChildren(state.modifierLayer);
@@ -3899,7 +3947,7 @@ export function WorkplaneViewport({
 
   const pickTransformHandle = useCallback((clientX: number, clientY: number) => {
     const state = threeRef.current;
-    if (!state || selectedIdsRef.current.length !== 1) {
+    if (!state || selectedIdsRef.current.length === 0) {
       return null;
     }
 
@@ -3915,8 +3963,16 @@ export function WorkplaneViewport({
       return null;
     }
 
+    // Rotation rings work for any selection size (single or multi). Every other
+    // transform-handle mesh requires a single-shape selection because its
+    // hit-test object is bound to a specific shape id.
+    const isRotationRing = typeof hit.object.userData.rotationRingAxis === "string";
+    if (!isRotationRing && selectedIdsRef.current.length !== 1) {
+      return null;
+    }
+
     return {
-      id: hit.object.userData.shapeId as string,
+      id: (hit.object.userData.shapeId as string | undefined) ?? selectedIdsRef.current[0],
       kind: hit.object.userData.transformHandle as TransformHandleKind,
       handleKey: (hit.object.userData.transformHandleKey as string | undefined) ?? (hit.object.userData.transformHandle as string),
       planeY: typeof hit.object.userData.transformPlaneY === "number" ? (hit.object.userData.transformPlaneY as number) : 0,
@@ -4290,6 +4346,25 @@ export function WorkplaneViewport({
         return;
       }
 
+      if (
+        rotationModeRef.current === "rings" &&
+        !dragRef.current &&
+        !marqueeRef.current &&
+        selectedIdsRef.current.length > 0
+      ) {
+        const hit = pickTransformHandle(event.clientX, event.clientY);
+        const nextHover: RotationRingAxis | null =
+          hit && hit.kind === "rotate" && hit.handleKey.startsWith("rotate-ring-")
+            ? (rotationAxisForHandle(hit.handleKey) as RotationRingAxis)
+            : null;
+        if (nextHover !== hoveredRingAxisRef.current) {
+          hoveredRingAxisRef.current = nextHover;
+          if (threeRef.current) {
+            threeRef.current.needsRender = true;
+          }
+        }
+      }
+
       const marquee = marqueeRef.current;
       if (marquee) {
         const state = threeRef.current;
@@ -4357,7 +4432,7 @@ export function WorkplaneViewport({
         threeRef.current.needsRender = true;
       }
     },
-    [pickPlacementSurface, setMarqueeFromState, toPlacementWorkplanePoint, toRawPlanePoint, updateModifierEdgeHover, updateRulerHover, updateTransform],
+    [pickPlacementSurface, pickTransformHandle, setMarqueeFromState, toPlacementWorkplanePoint, toRawPlanePoint, updateModifierEdgeHover, updateRulerHover, updateTransform],
   );
 
   const handlePointerLeave = useCallback(() => {
@@ -4365,6 +4440,12 @@ export function WorkplaneViewport({
       syncWorkplaneHoverPreview(threeRef.current, null, workspaceRef.current, resolvedThemeRef.current);
     }
     if (modifierActiveRef.current) clearModifierEdgeHover();
+    if (hoveredRingAxisRef.current !== null) {
+      hoveredRingAxisRef.current = null;
+      if (threeRef.current) {
+        threeRef.current.needsRender = true;
+      }
+    }
   }, [clearModifierEdgeHover]);
 
   const finishDrag = useCallback(
@@ -4882,6 +4963,7 @@ export function WorkplaneViewport({
               showRotationWheel={activeRotationWheel}
               hideSelectionChrome={activeTransformKind === "rotate"}
               hideDimensionMarks={false}
+              hideCornerRotateHandles={rotationMode === "rings"}
               rotationWheelAxis={rotationWheelAxis}
               pinnedRotationWheelView={pinnedRotationWheelView}
               onBeginCameraDrag={beginCameraDragFromOverlay}
@@ -4951,10 +5033,12 @@ export function WorkplaneViewport({
           snap={snap}
           themePreference={themePreference}
           moveDimensionsEnabled={moveDimensionsEnabled}
+          preferClassicRotateHandles={preferClassicRotateHandles}
           onWorkspaceChange={setWorkspace}
           onSnapChange={setSnap}
           onThemePreferenceChange={onThemePreferenceChange}
           onMoveDimensionsEnabledChange={changeMoveDimensionsEnabled}
+          onPreferClassicRotateHandlesChange={changePreferClassicRotateHandles}
           onMakeDefault={makeWorkspaceDefault}
           onClose={() => setSettingsOpen(false)}
         />
@@ -5053,6 +5137,18 @@ function createThreeScene(host: HTMLDivElement): ThreeState {
   const modifierLayer = new THREE.Group();
   modifierLayer.name = "EdgeModifier";
   modifierLayer.layers.set(RENDER_LAYER_MODIFIERS);
+  const rotationRingSet = createRotationRingSet();
+  rotationRingSet.group.layers.set(RENDER_LAYER_HELPERS);
+  for (const axis of ROTATION_RING_AXES) {
+    const mesh = rotationRingSet.rings[axis].mesh;
+    mesh.layers.set(RENDER_LAYER_HELPERS);
+    // Tag as a transform handle so pickTransformHandle raycast can find it —
+    // shapeId is written per selection in syncRotationRings.
+    mesh.userData.transformHandle = "rotate";
+    mesh.userData.transformHandleKey = `rotate-ring-${axis}`;
+    mesh.userData.rotationRingAxis = axis;
+  }
+  helperLayer.add(rotationRingSet.group);
   scene.add(workplaneLayer, workplanePreviewLayer, shapeLayer, helperLayer, moveDimensionLayer, modifierLayer);
 
   const raycaster = new THREE.Raycaster();
@@ -5100,6 +5196,9 @@ function createThreeScene(host: HTMLDivElement): ThreeState {
     lastOverlaySync: 0,
     lastViewCubeSync: 0,
     rotationHandleSides: null,
+    rotationRingSet,
+    rotationRingsLastSync: 0,
+    rotationRingsAnimating: false,
     disposeInteractionListeners: () => {},
     resize,
   };
@@ -6119,6 +6218,83 @@ function updateTransformOverlayDom(state: ThreeState, next: TransformOverlayStat
   });
 }
 
+function syncRotationRings(
+  state: ThreeState,
+  shapes: WorkplaneShape[],
+  selectedIds: string[],
+  ringsEnabled: boolean,
+  cameraMoving: boolean,
+  hoveredAxis: RotationRingAxis | null,
+  activeAxis: RotationRingAxis | null,
+  workplane: PlacementWorkplane = horizontalPlacementWorkplane(),
+) {
+  const now = performance.now();
+  const deltaMs = state.rotationRingsLastSync === 0 ? 0 : now - state.rotationRingsLastSync;
+  state.rotationRingsLastSync = now;
+
+  const setRingsHidden = () => {
+    if (!state.rotationRingSet.group.visible) return;
+    state.rotationRingSet.group.visible = false;
+    for (const axis of ROTATION_RING_AXES) {
+      state.rotationRingSet.rings[axis].mesh.visible = false;
+    }
+    state.needsRender = true;
+  };
+  if (!ringsEnabled || selectedIds.length < 1) {
+    setRingsHidden();
+    state.rotationRingsAnimating = false;
+    return;
+  }
+  const frame = selectionFrameForShapes(shapes, selectedIds, workplane);
+  if (!frame) {
+    setRingsHidden();
+    state.rotationRingsAnimating = false;
+    return;
+  }
+
+  // Bind ring meshes to the first selected shape id so pickTransformHandle's
+  // synthesized handle points at a real shape.
+  const primaryId = selectedIds[0];
+  for (const axis of ROTATION_RING_AXES) {
+    state.rotationRingSet.rings[axis].mesh.userData.shapeId = primaryId;
+  }
+
+  const boundingSphereRadius = 0.5 * Math.hypot(frame.width, frame.height, frame.depth);
+  const canvas = state.renderer.domElement;
+  const viewportHeightPx = Math.max(1, canvas.clientHeight);
+  const wasVisible = state.rotationRingSet.group.visible;
+  state.rotationRingSet.group.visible = true;
+  for (const axis of ROTATION_RING_AXES) {
+    state.rotationRingSet.rings[axis].mesh.visible = true;
+  }
+  updateRotationRingSet(state.rotationRingSet, {
+    frameCenter: frame.center,
+    frameXAxis: frame.xAxis,
+    frameYAxis: frame.yAxis,
+    frameZAxis: frame.zAxis,
+    boundingSphereRadius,
+    camera: state.camera,
+    viewportHeightPx,
+    activeAxis,
+    hoveredAxis,
+    cameraMoving,
+    deltaMs,
+  });
+  // Track whether opacities are still easing toward their targets so the
+  // animate loop keeps ticking until convergence — otherwise the ease stalls
+  // between the 96 ms overlay-sync interval.
+  const targets = targetRingOpacities({ activeAxis, hoveredAxis, cameraMoving });
+  state.rotationRingsAnimating = false;
+  for (const axis of ROTATION_RING_AXES) {
+    const opacity = state.rotationRingSet.rings[axis].mesh.material.opacity;
+    if (Math.abs(opacity - targets[axis]) > 0.005) {
+      state.rotationRingsAnimating = true;
+      break;
+    }
+  }
+  if (!wasVisible) state.needsRender = true;
+}
+
 function syncTransformOverlay(
   state: ThreeState,
   shapes: WorkplaneShape[],
diff --git a/apps/web/src/components/workplane/TransformOverlay.tsx b/apps/web/src/components/workplane/TransformOverlay.tsx
index bccf294..4123ae0 100644
--- a/apps/web/src/components/workplane/TransformOverlay.tsx
+++ b/apps/web/src/components/workplane/TransformOverlay.tsx
@@ -30,6 +30,7 @@ export function TransformOverlay({
   showRotationWheel,
   hideSelectionChrome,
   hideDimensionMarks,
+  hideCornerRotateHandles,
   rotationWheelAxis,
   pinnedRotationWheelView,
   onBeginCameraDrag,
@@ -236,7 +237,7 @@ export function TransformOverlay({
           }}
         />
       ))}
-      {box.rotateHandles.map((handle) => (
+      {hideCornerRotateHandles ? null : box.rotateHandles.map((handle) => (
         <button
           key={handle.key}
           className={`rotate-handle ${handle.className}`}
diff --git a/apps/web/src/components/workplane/WorkspaceSettingsModal.tsx b/apps/web/src/components/workplane/WorkspaceSettingsModal.tsx
index 8d07122..3c4a036 100644
--- a/apps/web/src/components/workplane/WorkspaceSettingsModal.tsx
+++ b/apps/web/src/components/workplane/WorkspaceSettingsModal.tsx
@@ -49,10 +49,12 @@ export function WorkspaceSettingsModal({
   snap,
   themePreference,
   moveDimensionsEnabled,
+  preferClassicRotateHandles,
   onWorkspaceChange,
   onSnapChange,
   onThemePreferenceChange,
   onMoveDimensionsEnabledChange,
+  onPreferClassicRotateHandlesChange,
   onMakeDefault,
   onClose,
 }: {
@@ -60,10 +62,12 @@ export function WorkspaceSettingsModal({
   snap: GridSize;
   themePreference: AppThemePreference;
   moveDimensionsEnabled: boolean;
+  preferClassicRotateHandles: boolean;
   onWorkspaceChange: (next: WorkspaceSettings) => void;
   onSnapChange: (next: GridSize) => void;
   onThemePreferenceChange?: (preference: AppThemePreference) => void;
   onMoveDimensionsEnabledChange: (enabled: boolean) => void;
+  onPreferClassicRotateHandlesChange: (preferClassic: boolean) => void;
   onMakeDefault: () => void;
   onClose: () => void;
 }) {
@@ -202,6 +206,11 @@ export function WorkspaceSettingsModal({
                     checked={moveDimensionsEnabled}
                     onChange={onMoveDimensionsEnabledChange}
                   />
+                  <WorkspaceToggle
+                    label="Use classic rotate handles"
+                    checked={preferClassicRotateHandles}
+                    onChange={onPreferClassicRotateHandlesChange}
+                  />
                   <WorkspaceToggle label="Show shadows" checked={workspace.showShadows} onChange={(showShadows) => patchWorkspace({ showShadows })} />
                   <WorkspaceToggle
                     label="Cruise when adding new shapes"
diff --git a/apps/web/src/components/workplane/transformOverlayTypes.ts b/apps/web/src/components/workplane/transformOverlayTypes.ts
index 3b786dc..c132745 100644
--- a/apps/web/src/components/workplane/transformOverlayTypes.ts
+++ b/apps/web/src/components/workplane/transformOverlayTypes.ts
@@ -87,6 +87,7 @@ export type TransformOverlayProps = {
   showRotationWheel: boolean;
   hideSelectionChrome: boolean;
   hideDimensionMarks: boolean;
+  hideCornerRotateHandles: boolean;
   rotationWheelAxis: RotationAxis;
   pinnedRotationWheelView: PinnedRotationWheelView | null;
   onBeginCameraDrag: (event: ReactPointerEvent<Element>) => void;
diff --git a/apps/web/src/lib/rotationMode.ts b/apps/web/src/lib/rotationMode.ts
new file mode 100644
index 0000000..2343372
--- /dev/null
+++ b/apps/web/src/lib/rotationMode.ts
@@ -0,0 +1,32 @@
+export type RotationMode = "rings" | "classic";
+
+export const ROTATION_MODE_URL_PARAM = "rotationMode";
+export const ROTATION_MODE_MEDIA_QUERY = "(pointer: coarse), (max-width: 768px)";
+export const ROTATION_MODE_STORAGE_KEY = "sketchForge.editor.useClassicRotateHandles";
+
+/**
+ * Parse a query string for the developer/E2E override. Returns null if the
+ * param is absent or the value doesn't match a known mode.
+ */
+export function parseRotationModeParam(search: string): RotationMode | null {
+  if (!search) return null;
+  const params = new URLSearchParams(search.startsWith("?") ? search : `?${search}`);
+  const raw = params.get(ROTATION_MODE_URL_PARAM);
+  if (raw === "rings" || raw === "classic") return raw;
+  return null;
+}
+
+/**
+ * Precedence (highest to lowest): URL override → user preference → media
+ * query. When nothing overrides, `mediaMatches === true` selects classic
+ * (touch or narrow viewport); otherwise rings.
+ */
+export function deriveRotationMode(input: {
+  urlOverride: RotationMode | null;
+  preferClassic: boolean;
+  mediaMatches: boolean;
+}): RotationMode {
+  if (input.urlOverride) return input.urlOverride;
+  if (input.preferClassic) return "classic";
+  return input.mediaMatches ? "classic" : "rings";
+}
diff --git a/apps/web/src/lib/rotationRings.ts b/apps/web/src/lib/rotationRings.ts
new file mode 100644
index 0000000..7c99f72
--- /dev/null
+++ b/apps/web/src/lib/rotationRings.ts
@@ -0,0 +1,306 @@
+import * as THREE from "three";
+
+export type RotationRingAxis = "x" | "y" | "z";
+
+export const ROTATION_RING_AXES: readonly RotationRingAxis[] = ["x", "y", "z"] as const;
+
+export const ROTATION_RING_COLORS: Record<RotationRingAxis, number> = {
+  x: 0xe5484d,
+  y: 0x46a758,
+  z: 0x3e63dd,
+};
+
+// Ring geometry / behavior tuning. Locked by the rotation-handle-visibility wayfinder map.
+export const RING_SCREEN_MIN_PX = 40;
+export const RING_SCREEN_MAX_PX = 160;
+export const RING_TUBE_TO_RADIUS = 0.03;
+export const RING_TUBE_MIN = 0.5;
+
+// Camera-facing bias — ticket 04.
+export const RING_BIAS_THRESHOLD_DEG = 15;
+export const RING_BIAS_MAX_TILT_DEG = 10;
+
+// Camera-motion fade — ticket 03.
+export const RING_FADE_ACTIVE_OPACITY = 0.2;
+export const RING_FADE_IDLE_OPACITY = 0.85;
+export const RING_FADE_DIM_OPACITY = 0.28;
+export const RING_FADE_HOVER_OPACITY = 1;
+export const RING_FADE_EASE_MS = 200;
+
+/**
+ * Return a world-space ring radius such that the ring renders at a screen size
+ * that falls inside [RING_SCREEN_MIN_PX, RING_SCREEN_MAX_PX].
+ *
+ * Given a desired radius derived from the selection's bounding sphere, we
+ * project it to screen space at the ring's center, then rescale if it lands
+ * outside the target range.
+ */
+export function computeRingRadius(
+  boundingSphereRadius: number,
+  worldPerScreenPixel: number,
+): number {
+  if (!Number.isFinite(boundingSphereRadius) || boundingSphereRadius <= 0) {
+    boundingSphereRadius = 1;
+  }
+  const desiredWorld = boundingSphereRadius * 1.35;
+  const desiredScreenPx = desiredWorld / Math.max(1e-6, worldPerScreenPixel);
+  if (desiredScreenPx < RING_SCREEN_MIN_PX) {
+    return RING_SCREEN_MIN_PX * worldPerScreenPixel;
+  }
+  if (desiredScreenPx > RING_SCREEN_MAX_PX) {
+    return RING_SCREEN_MAX_PX * worldPerScreenPixel;
+  }
+  return desiredWorld;
+}
+
+/**
+ * The world distance that corresponds to one pixel of screen height at the
+ * given center point, given the camera's projection.
+ *
+ * For a perspective camera the mapping depends on distance-along-view.
+ * For an orthographic camera it's a fixed ratio derived from the frustum.
+ */
+export function worldUnitsPerScreenPixel(
+  camera: THREE.PerspectiveCamera | THREE.OrthographicCamera,
+  worldPoint: THREE.Vector3,
+  viewportHeightPx: number,
+): number {
+  const height = Math.max(1, viewportHeightPx);
+  if (camera instanceof THREE.OrthographicCamera) {
+    const worldViewHeight = Math.abs(camera.top - camera.bottom) / Math.max(0.0001, camera.zoom);
+    return worldViewHeight / height;
+  }
+  const forward = new THREE.Vector3();
+  camera.getWorldDirection(forward);
+  const toPoint = worldPoint.clone().sub(camera.position);
+  const depth = Math.max(0.001, toPoint.dot(forward));
+  const worldViewHeight = 2 * depth * Math.tan(THREE.MathUtils.degToRad(camera.fov / 2));
+  return worldViewHeight / height;
+}
+
+/**
+ * How much visual tilt the ring should get so its plane presents a thicker
+ * profile toward the camera. Returns the tilt angle in radians, plus the axis
+ * to rotate around. Applied to the ring's *visual* quaternion only; the actual
+ * rotation axis stays fixed to the object's local axis.
+ *
+ * Zero result outside the threshold. Eases from 0 at the threshold to
+ * RING_BIAS_MAX_TILT_DEG when the ring is exactly edge-on.
+ */
+export function computeCameraFacingBias(
+  ringPlaneNormalWorld: THREE.Vector3,
+  cameraForwardWorld: THREE.Vector3,
+): { axis: THREE.Vector3; angleRad: number } {
+  const normal = ringPlaneNormalWorld.clone().normalize();
+  const forward = cameraForwardWorld.clone().normalize();
+  // alignment: 1 = ring face-on to camera, 0 = ring edge-on to camera.
+  const alignment = Math.abs(normal.dot(forward));
+  // fromEdgeDeg: 0 at exact edge-on, 90 at exact face-on.
+  const fromEdgeDeg = THREE.MathUtils.radToDeg(Math.asin(THREE.MathUtils.clamp(alignment, 0, 1)));
+  if (fromEdgeDeg >= RING_BIAS_THRESHOLD_DEG) {
+    return { axis: new THREE.Vector3(1, 0, 0), angleRad: 0 };
+  }
+  // t: 0 at the threshold, 1 at exact edge-on.
+  const t = 1 - fromEdgeDeg / RING_BIAS_THRESHOLD_DEG;
+  const eased = t * t * (3 - 2 * t);
+  const angleDeg = eased * RING_BIAS_MAX_TILT_DEG;
+  const axis = new THREE.Vector3().crossVectors(normal, forward);
+  if (axis.lengthSq() < 1e-8) {
+    axis.set(1, 0, 0);
+  }
+  axis.normalize();
+  return { axis, angleRad: THREE.MathUtils.degToRad(angleDeg) };
+}
+
+/**
+ * Ease an opacity toward a target with a fixed time constant (RING_FADE_EASE_MS).
+ * Frame-rate-independent within reason.
+ */
+export function easeOpacity(current: number, target: number, deltaMs: number): number {
+  if (!Number.isFinite(current)) current = target;
+  if (deltaMs <= 0) return current;
+  const t = 1 - Math.exp(-deltaMs / RING_FADE_EASE_MS);
+  return current + (target - current) * t;
+}
+
+/**
+ * Given interaction + camera-motion state, return the target opacity for each
+ * of the three rings. Precedence: active drag > hover > camera motion > idle.
+ */
+export function targetRingOpacities(input: {
+  activeAxis: RotationRingAxis | null;
+  hoveredAxis: RotationRingAxis | null;
+  cameraMoving: boolean;
+}): Record<RotationRingAxis, number> {
+  const { activeAxis, hoveredAxis, cameraMoving } = input;
+  const base = cameraMoving ? RING_FADE_ACTIVE_OPACITY : RING_FADE_IDLE_OPACITY;
+  const result: Record<RotationRingAxis, number> = {
+    x: base,
+    y: base,
+    z: base,
+  };
+  if (activeAxis) {
+    for (const axis of ROTATION_RING_AXES) {
+      result[axis] = axis === activeAxis ? RING_FADE_HOVER_OPACITY : RING_FADE_DIM_OPACITY;
+    }
+    return result;
+  }
+  if (hoveredAxis) {
+    result[hoveredAxis] = RING_FADE_HOVER_OPACITY;
+  }
+  return result;
+}
+
+export type RotationRing = {
+  axis: RotationRingAxis;
+  mesh: THREE.Mesh<THREE.TorusGeometry, THREE.MeshBasicMaterial>;
+  planeNormalLocal: THREE.Vector3; // axis in ring's local space that is normal to its plane
+};
+
+export type RotationRingSet = {
+  group: THREE.Group;
+  rings: Record<RotationRingAxis, RotationRing>;
+  dispose: () => void;
+};
+
+/**
+ * Create the three axis rings as a group of Torus meshes. The group's transform
+ * is used to orient the whole set to match the selection frame; each ring's
+ * local transform is set so its plane normal aligns with the corresponding
+ * axis of the group's local space.
+ */
+export function createRotationRingSet(): RotationRingSet {
+  const group = new THREE.Group();
+  group.name = "RotationRings";
+  group.visible = false;
+  group.renderOrder = 999; // draw over shape geometry so rings are never fully hidden by opaque solids
+
+  const build = (axis: RotationRingAxis): RotationRing => {
+    // TorusGeometry lies in the local XY plane (normal = +Z). Reorient so its
+    // normal matches the requested axis in group-local space.
+    const geometry = new THREE.TorusGeometry(1, RING_TUBE_TO_RADIUS, 12, 96);
+    const material = new THREE.MeshBasicMaterial({
+      color: ROTATION_RING_COLORS[axis],
+      transparent: true,
+      opacity: RING_FADE_IDLE_OPACITY,
+      depthTest: false,
+      depthWrite: false,
+      toneMapped: false,
+    });
+    const mesh = new THREE.Mesh(geometry, material);
+    mesh.name = `RotationRing-${axis}`;
+    mesh.renderOrder = 999;
+    // Torus geometry normal = +Z of its local space. Rotate so it faces the
+    // requested axis of the *group* local space.
+    if (axis === "x") {
+      mesh.rotation.y = Math.PI / 2;
+    } else if (axis === "y") {
+      mesh.rotation.x = Math.PI / 2;
+    }
+    group.add(mesh);
+    const normalLocal =
+      axis === "x" ? new THREE.Vector3(1, 0, 0)
+      : axis === "y" ? new THREE.Vector3(0, 1, 0)
+      : new THREE.Vector3(0, 0, 1);
+    return { axis, mesh, planeNormalLocal: normalLocal };
+  };
+
+  const rings: Record<RotationRingAxis, RotationRing> = {
+    x: build("x"),
+    y: build("y"),
+    z: build("z"),
+  };
+
+  const dispose = () => {
+    for (const axis of ROTATION_RING_AXES) {
+      const ring = rings[axis];
+      ring.mesh.geometry.dispose();
+      ring.mesh.material.dispose();
+      group.remove(ring.mesh);
+    }
+  };
+
+  return { group, rings, dispose };
+}
+
+/**
+ * Update the ring set to match the current selection frame + camera state.
+ * Positions the group at the frame's center, orients its axes to the frame's
+ * local axes, sizes each ring by the shared world radius, applies per-ring
+ * camera-facing bias, and eases opacities toward the current targets.
+ */
+export function updateRotationRingSet(
+  set: RotationRingSet,
+  params: {
+    frameCenter: THREE.Vector3;
+    frameXAxis: THREE.Vector3;
+    frameYAxis: THREE.Vector3;
+    frameZAxis: THREE.Vector3;
+    boundingSphereRadius: number;
+    camera: THREE.PerspectiveCamera | THREE.OrthographicCamera;
+    viewportHeightPx: number;
+    activeAxis: RotationRingAxis | null;
+    hoveredAxis: RotationRingAxis | null;
+    cameraMoving: boolean;
+    deltaMs: number;
+  },
+): void {
+  const {
+    frameCenter,
+    frameXAxis,
+    frameYAxis,
+    frameZAxis,
+    boundingSphereRadius,
+    camera,
+    viewportHeightPx,
+    activeAxis,
+    hoveredAxis,
+    cameraMoving,
+    deltaMs,
+  } = params;
+
+  set.group.position.copy(frameCenter);
+  set.group.quaternion.setFromRotationMatrix(
+    new THREE.Matrix4().makeBasis(frameXAxis, frameYAxis, frameZAxis),
+  );
+
+  const worldPerPx = worldUnitsPerScreenPixel(camera, frameCenter, viewportHeightPx);
+  const radius = computeRingRadius(boundingSphereRadius, worldPerPx);
+
+  const cameraForward = new THREE.Vector3();
+  camera.getWorldDirection(cameraForward);
+
+  const opacityTargets = targetRingOpacities({ activeAxis, hoveredAxis, cameraMoving });
+
+  for (const axis of ROTATION_RING_AXES) {
+    const ring = set.rings[axis];
+    ring.mesh.scale.setScalar(radius);
+    const tube = Math.max(RING_TUBE_MIN, radius * RING_TUBE_TO_RADIUS);
+    // TorusGeometry(1, radius) already sets tube by geometry; scaling scales both.
+    // To keep the tube from ballooning at large radii, adjust it via extra scaling
+    // on the mesh's normal axis is complex — instead we accept proportional tubes.
+    // The RING_TUBE_TO_RADIUS constant is picked so the ring reads as a fine line
+    // at all sizes. `tube` unused here but kept for callers that want it.
+    void tube;
+
+    // Camera-facing bias in world space, projected back into group-local space.
+    const normalWorld = ring.planeNormalLocal.clone().applyQuaternion(set.group.quaternion);
+    const bias = computeCameraFacingBias(normalWorld, cameraForward);
+    const localBiasAxis = bias.axis.clone().applyQuaternion(set.group.quaternion.clone().invert());
+    // Reset to the axis-aligned base orientation, then apply the bias delta.
+    if (axis === "x") {
+      ring.mesh.quaternion.setFromEuler(new THREE.Euler(0, Math.PI / 2, 0));
+    } else if (axis === "y") {
+      ring.mesh.quaternion.setFromEuler(new THREE.Euler(Math.PI / 2, 0, 0));
+    } else {
+      ring.mesh.quaternion.identity();
+    }
+    if (bias.angleRad > 0) {
+      const biasQuat = new THREE.Quaternion().setFromAxisAngle(localBiasAxis, bias.angleRad);
+      ring.mesh.quaternion.premultiply(biasQuat);
+    }
+
+    const target = opacityTargets[axis];
+    ring.mesh.material.opacity = easeOpacity(ring.mesh.material.opacity, target, deltaMs);
+  }
+}
diff --git a/apps/web/src/lib/useRotationMode.ts b/apps/web/src/lib/useRotationMode.ts
new file mode 100644
index 0000000..e3f869b
--- /dev/null
+++ b/apps/web/src/lib/useRotationMode.ts
@@ -0,0 +1,91 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  deriveRotationMode,
+  parseRotationModeParam,
+  ROTATION_MODE_MEDIA_QUERY,
+  ROTATION_MODE_STORAGE_KEY,
+  type RotationMode,
+} from "@/lib/rotationMode";
+
+function readPreferClassic() {
+  if (typeof window === "undefined") return false;
+  try {
+    return window.localStorage.getItem(ROTATION_MODE_STORAGE_KEY) === "true";
+  } catch {
+    return false;
+  }
+}
+
+function readUrlOverride(): RotationMode | null {
+  if (typeof window === "undefined") return null;
+  return parseRotationModeParam(window.location.search);
+}
+
+function readMediaMatches() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  try {
+    return window.matchMedia(ROTATION_MODE_MEDIA_QUERY).matches;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Reactive rotation mode. Reads media query, preference, and URL override,
+ * and updates when the media query state changes (window resize, mouse
+ * plug-in, etc.) or another tab writes the preference.
+ *
+ * URL overrides are read once on mount — changing the URL without a full
+ * navigation is not supported.
+ */
+export function useRotationMode(): RotationMode {
+  const [urlOverride] = useState<RotationMode | null>(() => readUrlOverride());
+  const [preferClassic, setPreferClassic] = useState<boolean>(() => readPreferClassic());
+  const [mediaMatches, setMediaMatches] = useState<boolean>(() => readMediaMatches());
+
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mql = window.matchMedia(ROTATION_MODE_MEDIA_QUERY);
+    const listener = (event: MediaQueryListEvent) => setMediaMatches(event.matches);
+    mql.addEventListener("change", listener);
+    return () => mql.removeEventListener("change", listener);
+  }, []);
+
+  useEffect(() => {
+    const handleStorage = (event: StorageEvent) => {
+      if (event.key === ROTATION_MODE_STORAGE_KEY) {
+        setPreferClassic(readPreferClassic());
+      }
+    };
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
+  }, []);
+
+  return deriveRotationMode({ urlOverride, preferClassic, mediaMatches });
+}
+
+/**
+ * Write the "prefer classic rotate handles" preference to localStorage and
+ * dispatch a fake `storage` event so listeners in the same tab pick it up
+ * (StorageEvent normally only fires cross-tab).
+ */
+export function setPreferClassicRotateHandles(preferClassic: boolean): void {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(ROTATION_MODE_STORAGE_KEY, String(preferClassic));
+    window.dispatchEvent(
+      new StorageEvent("storage", {
+        key: ROTATION_MODE_STORAGE_KEY,
+        newValue: String(preferClassic),
+      }),
+    );
+  } catch {
+    // Ignore; the change only lives in the current session.
+  }
+}
+
+export function readPreferClassicRotateHandles(): boolean {
+  return readPreferClassic();
+}
diff --git a/tests/unit/rotationMode.test.ts b/tests/unit/rotationMode.test.ts
new file mode 100644
index 0000000..7fdeb85
--- /dev/null
+++ b/tests/unit/rotationMode.test.ts
@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+import { deriveRotationMode, parseRotationModeParam } from "@/lib/rotationMode";
+
+describe("parseRotationModeParam", () => {
+  it("returns 'rings' or 'classic' when the param is present", () => {
+    expect(parseRotationModeParam("?rotationMode=rings")).toBe("rings");
+    expect(parseRotationModeParam("?rotationMode=classic")).toBe("classic");
+  });
+
+  it("tolerates a query string without a leading ?", () => {
+    expect(parseRotationModeParam("rotationMode=rings")).toBe("rings");
+  });
+
+  it("returns null when the param is missing", () => {
+    expect(parseRotationModeParam("?foo=bar")).toBeNull();
+    expect(parseRotationModeParam("")).toBeNull();
+  });
+
+  it("returns null when the value is unknown", () => {
+    expect(parseRotationModeParam("?rotationMode=purple")).toBeNull();
+    expect(parseRotationModeParam("?rotationMode=")).toBeNull();
+  });
+});
+
+describe("deriveRotationMode", () => {
+  it("URL override wins over everything", () => {
+    expect(
+      deriveRotationMode({ urlOverride: "rings", preferClassic: true, mediaMatches: true }),
+    ).toBe("rings");
+    expect(
+      deriveRotationMode({ urlOverride: "classic", preferClassic: false, mediaMatches: false }),
+    ).toBe("classic");
+  });
+
+  it("preference forces classic when set (and no URL override)", () => {
+    expect(
+      deriveRotationMode({ urlOverride: null, preferClassic: true, mediaMatches: false }),
+    ).toBe("classic");
+  });
+
+  it("media match selects classic when nothing overrides", () => {
+    expect(
+      deriveRotationMode({ urlOverride: null, preferClassic: false, mediaMatches: true }),
+    ).toBe("classic");
+  });
+
+  it("defaults to rings on desktop with no preference and no override", () => {
+    expect(
+      deriveRotationMode({ urlOverride: null, preferClassic: false, mediaMatches: false }),
+    ).toBe("rings");
+  });
+});
diff --git a/tests/unit/rotationRings.test.ts b/tests/unit/rotationRings.test.ts
new file mode 100644
index 0000000..725bb4f
--- /dev/null
+++ b/tests/unit/rotationRings.test.ts
@@ -0,0 +1,166 @@
+import { describe, expect, it } from "vitest";
+import * as THREE from "three";
+import {
+  computeCameraFacingBias,
+  computeRingRadius,
+  easeOpacity,
+  RING_BIAS_MAX_TILT_DEG,
+  RING_BIAS_THRESHOLD_DEG,
+  RING_FADE_ACTIVE_OPACITY,
+  RING_FADE_DIM_OPACITY,
+  RING_FADE_HOVER_OPACITY,
+  RING_FADE_IDLE_OPACITY,
+  RING_SCREEN_MAX_PX,
+  RING_SCREEN_MIN_PX,
+  targetRingOpacities,
+  worldUnitsPerScreenPixel,
+} from "@/lib/rotationRings";
+
+const EPS = 1e-6;
+
+describe("computeRingRadius", () => {
+  it("returns the desired radius when it lands inside the screen-size clamp", () => {
+    // worldPerPx = 0.1 → 1 world unit = 10 px. boundingSphere 10 → desired 13.5 world = 135 px. Inside 40-160.
+    const radius = computeRingRadius(10, 0.1);
+    expect(radius).toBeCloseTo(13.5, 6);
+  });
+
+  it("clamps upward when the desired size is below the minimum", () => {
+    // boundingSphere 0.1 → desired 0.135 world → 1.35 px. Should clamp to 40 px.
+    const radius = computeRingRadius(0.1, 0.1);
+    expect(radius).toBeCloseTo(RING_SCREEN_MIN_PX * 0.1, 6);
+  });
+
+  it("clamps downward when the desired size is above the maximum", () => {
+    // boundingSphere 1000 → desired 1350 world → 13500 px. Should clamp to 160 px.
+    const radius = computeRingRadius(1000, 0.1);
+    expect(radius).toBeCloseTo(RING_SCREEN_MAX_PX * 0.1, 6);
+  });
+
+  it("handles zero or negative bounding sphere by treating it as 1", () => {
+    const radius = computeRingRadius(0, 0.1);
+    // Falls back to 1 * 1.35 = 0.135 world = 1.35 px → clamps to 40 px.
+    expect(radius).toBeCloseTo(RING_SCREEN_MIN_PX * 0.1, 6);
+  });
+});
+
+describe("worldUnitsPerScreenPixel", () => {
+  it("uses the frustum height for orthographic cameras", () => {
+    const camera = new THREE.OrthographicCamera(-10, 10, 5, -5, 0.1, 100);
+    camera.zoom = 1;
+    camera.updateProjectionMatrix();
+    const wp = worldUnitsPerScreenPixel(camera, new THREE.Vector3(), 100);
+    // frustum height = 10; over 100 px = 0.1 world/px.
+    expect(wp).toBeCloseTo(0.1, 6);
+  });
+
+  it("scales with depth for perspective cameras", () => {
+    const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 1000);
+    camera.position.set(0, 0, 10);
+    camera.lookAt(0, 0, 0);
+    camera.updateMatrixWorld();
+    const wpNear = worldUnitsPerScreenPixel(camera, new THREE.Vector3(0, 0, 5), 100);
+    const wpFar = worldUnitsPerScreenPixel(camera, new THREE.Vector3(0, 0, -5), 100);
+    // Farther point → larger world/px.
+    expect(wpFar).toBeGreaterThan(wpNear);
+    // Depth 5 vs depth 15 → 3x.
+    expect(wpFar / wpNear).toBeCloseTo(3, 3);
+  });
+});
+
+describe("computeCameraFacingBias", () => {
+  it("returns zero tilt when the ring is face-on to the camera", () => {
+    // Ring normal parallel to view direction → face-on → no bias.
+    const result = computeCameraFacingBias(
+      new THREE.Vector3(0, 0, 1),
+      new THREE.Vector3(0, 0, -1),
+    );
+    expect(result.angleRad).toBe(0);
+  });
+
+  it("returns zero tilt just outside the edge-on threshold", () => {
+    // 20° from edge-on is outside the 15° threshold → no bias.
+    const fromEdgeDeg = RING_BIAS_THRESHOLD_DEG + 5;
+    const alignment = Math.sin(THREE.MathUtils.degToRad(fromEdgeDeg));
+    const normal = new THREE.Vector3(Math.sqrt(1 - alignment * alignment), 0, alignment);
+    const result = computeCameraFacingBias(normal, new THREE.Vector3(0, 0, -1));
+    expect(result.angleRad).toBe(0);
+  });
+
+  it("returns positive tilt just inside the edge-on threshold", () => {
+    // 10° from edge-on is inside the 15° threshold → some bias, less than max.
+    const fromEdgeDeg = RING_BIAS_THRESHOLD_DEG - 5;
+    const alignment = Math.sin(THREE.MathUtils.degToRad(fromEdgeDeg));
+    const normal = new THREE.Vector3(Math.sqrt(1 - alignment * alignment), 0, alignment);
+    const result = computeCameraFacingBias(normal, new THREE.Vector3(0, 0, -1));
+    expect(result.angleRad).toBeGreaterThan(0);
+    expect(THREE.MathUtils.radToDeg(result.angleRad)).toBeLessThan(RING_BIAS_MAX_TILT_DEG);
+  });
+
+  it("returns the max tilt at exact edge-on", () => {
+    const normal = new THREE.Vector3(1, 0, 0);
+    const result = computeCameraFacingBias(normal, new THREE.Vector3(0, 0, -1));
+    expect(THREE.MathUtils.radToDeg(result.angleRad)).toBeCloseTo(RING_BIAS_MAX_TILT_DEG, 4);
+  });
+
+  it("bias axis is perpendicular to both the ring normal and the view direction", () => {
+    const normal = new THREE.Vector3(1, 0, 0);
+    const forward = new THREE.Vector3(0, 0, -1);
+    const result = computeCameraFacingBias(normal, forward);
+    expect(Math.abs(result.axis.dot(normal))).toBeLessThan(EPS);
+    expect(Math.abs(result.axis.dot(forward))).toBeLessThan(EPS);
+  });
+});
+
+describe("easeOpacity", () => {
+  it("returns current when delta is zero", () => {
+    expect(easeOpacity(0.3, 1, 0)).toBe(0.3);
+  });
+
+  it("moves toward the target monotonically", () => {
+    const step1 = easeOpacity(0, 1, 50);
+    const step2 = easeOpacity(step1, 1, 50);
+    expect(step1).toBeGreaterThan(0);
+    expect(step2).toBeGreaterThan(step1);
+    expect(step2).toBeLessThan(1);
+  });
+
+  it("converges to target for a very large delta", () => {
+    const result = easeOpacity(0, 1, 10000);
+    expect(result).toBeGreaterThan(0.99);
+  });
+
+  it("passes target through unchanged when current is NaN", () => {
+    expect(easeOpacity(Number.NaN, 0.5, 100)).toBe(0.5);
+  });
+});
+
+describe("targetRingOpacities", () => {
+  it("idle: all rings at the idle opacity", () => {
+    const opacities = targetRingOpacities({ activeAxis: null, hoveredAxis: null, cameraMoving: false });
+    expect(opacities.x).toBe(RING_FADE_IDLE_OPACITY);
+    expect(opacities.y).toBe(RING_FADE_IDLE_OPACITY);
+    expect(opacities.z).toBe(RING_FADE_IDLE_OPACITY);
+  });
+
+  it("camera moving: all rings dim (unless hovered/active)", () => {
+    const opacities = targetRingOpacities({ activeAxis: null, hoveredAxis: null, cameraMoving: true });
+    expect(opacities.x).toBe(RING_FADE_ACTIVE_OPACITY);
+    expect(opacities.y).toBe(RING_FADE_ACTIVE_OPACITY);
+    expect(opacities.z).toBe(RING_FADE_ACTIVE_OPACITY);
+  });
+
+  it("hover: only the hovered ring is highlighted", () => {
+    const opacities = targetRingOpacities({ activeAxis: null, hoveredAxis: "y", cameraMoving: false });
+    expect(opacities.y).toBe(RING_FADE_HOVER_OPACITY);
+    expect(opacities.x).toBe(RING_FADE_IDLE_OPACITY);
+    expect(opacities.z).toBe(RING_FADE_IDLE_OPACITY);
+  });
+
+  it("active drag beats hover and camera motion", () => {
+    const opacities = targetRingOpacities({ activeAxis: "z", hoveredAxis: "y", cameraMoving: true });
+    expect(opacities.z).toBe(RING_FADE_HOVER_OPACITY);
+    expect(opacities.x).toBe(RING_FADE_DIM_OPACITY);
+    expect(opacities.y).toBe(RING_FADE_DIM_OPACITY);
+  });
+});