fix: Refactor Arc component to use responsive dimensions

.gitignore

@@ -5,3 +5,4 @@ dist
 
 # Ignore the output video from Git but not videos you import into src/.
 out
+package-lock.json

src/HelloWorld/Arc.tsx

@@ -5,12 +5,9 @@ const getCircumferenceOfArc = (rx: number, ry: number) => {
 	return Math.PI * 2 * Math.sqrt((rx * rx + ry * ry) / 2);
 };
 
-const rx = 135;
-const ry = 300;
-const cx = 960;
-const cy = 540;
-const arcLength = getCircumferenceOfArc(rx, ry);
-const strokeWidth = 30;
+const rxRatio = 135 / 1920; // Ratio of rx to width
+const ryRatio = 300 / 1080; // Ratio of ry to height
+const strokeWidthRatio = 30 / 1920; // Ratio of strokeWidth to width
 
 export const Arc: React.FC<{
 	progress: number;
@@ -21,6 +18,13 @@ export const Arc: React.FC<{
 }> = ({progress, rotation, rotateProgress, color1, color2}) => {
 	const {width, height} = useVideoConfig();
 
+	const cx = width / 2; // Center X coordinate
+	const cy = height / 2; // Center Y coordinate
+	const rx = width * rxRatio;
+	const ry = height * ryRatio;
+	const strokeWidth = width * strokeWidthRatio;
+	const arcLength = getCircumferenceOfArc(rx, ry);
+
 	// Each svg Id must be unique to not conflict with each other
 	const [gradientId] = useState(() => String(random(null)));
 

src/Root.tsx

@@ -32,8 +32,8 @@ export const RemotionRoot: React.FC = () => {
 				component={Logo}
 				durationInFrames={150}
 				fps={30}
-				width={1920}
-				height={1080}
+				width={3840}
+				height={2160}
 				schema={myCompSchema2}
 				defaultProps={{
 					logoColor1: '#91dAE2' as const,