fix(renderer): correct pie slice angle conversion

renderer/src/remotion/wheel-layout.js

@@ -28,10 +28,10 @@ export const getFinalWheelRotationDegrees = (optionCount, winnerIndex, fullTurns
   fullTurns * fullTurnDegrees - getSliceCenterDegrees(optionCount, winnerIndex);
 
 /**
- * Converts CSS angle convention to @remotion/shapes Pie convention, where 0deg
- * starts at 12h.
+ * Converts CSS angle convention to @remotion/shapes Pie radians. Pie rotation
+ * 0 starts at 12h, so CSS 0deg at 3h needs a quarter-turn offset.
  *
  * @param {number} cssDegrees
  * @returns {number}
  */
-export const cssDegreesToPieRadians = (cssDegrees) => ((cssDegrees - 90) * Math.PI) / 180;
+export const cssDegreesToPieRadians = (cssDegrees) => ((cssDegrees - 270) * Math.PI) / 180;

renderer/test/wheel-layout.test.js

@@ -1,5 +1,6 @@
 import {describe, expect, test} from 'vitest';
 import {
+  cssDegreesToPieRadians,
   getFinalWheelRotationDegrees,
   getSliceCenterDegrees,
   getSliceDegrees,
@@ -26,6 +27,22 @@ describe('wheel layout', () => {
     expect(screenAngle).toBe(0);
   });
 
+  test('converts CSS slice starts to Remotion Pie rotation radians', () => {
+    /**
+     * @param {number} cssDegrees
+     */
+    const getRenderedStartDegrees = (cssDegrees) => {
+      const rotationDegrees = (cssDegreesToPieRadians(cssDegrees) * 180) / Math.PI;
+      return (270 + rotationDegrees + 360) % 360;
+    };
+
+    expect(getRenderedStartDegrees(0)).toBe(0);
+    expect(getRenderedStartDegrees(45)).toBe(45);
+    expect(getRenderedStartDegrees(90)).toBe(90);
+    expect(getRenderedStartDegrees(180)).toBe(180);
+    expect(getRenderedStartDegrees(270)).toBe(270);
+  });
+
   test('defines a right-side pointer that points into the wheel', () => {
     expect(rightPointerClipPath).toBe('polygon(0 50%, 100% 0, 100% 100%)');
   });