From 8ab45eb5eac09104b06f421d5fbec7f9a090e3db Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Mon, 6 Jul 2026 23:44:41 +0700
Subject: [PATCH] fix(renderer): correct pie slice angle conversion

---
 renderer/src/remotion/wheel-layout.js |  6 +++---
 renderer/test/wheel-layout.test.js    | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/renderer/src/remotion/wheel-layout.js b/renderer/src/remotion/wheel-layout.js
index f4b6b0d..d641bcf 100644
--- a/renderer/src/remotion/wheel-layout.js
+++ b/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;
diff --git a/renderer/test/wheel-layout.test.js b/renderer/test/wheel-layout.test.js
index 917e738..4f067d0 100644
--- a/renderer/test/wheel-layout.test.js
+++ b/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%)');
   });