feat: Add circle cursor option and improve cursor rendering

cursoragent · richiemcilroy · cursoragent · commit cba5cb360784 · 2025-12-01T06:41:34.000Z
This commit introduces a new "Circle" cursor type, providing an alternative to the default "Auto" cursor. It also refactors cursor rendering logic to better handle different cursor types and improve performance.

Co-authored-by: richiemcilroy1 &lt;richiemcilroy1@gmail.com&gt;
diff --git a/apps/desktop/src/routes/editor/ConfigSidebar.tsx b/apps/desktop/src/routes/editor/ConfigSidebar.tsx
@@ -46,6 +46,7 @@ import {
 	type CameraShape,
 	type ClipOffsets,
 	type CursorAnimationStyle,
+	type CursorType,
 	commands,
 	type SceneSegment,
 	type StereoMode,
@@ -238,6 +239,19 @@ type CursorPresetValues = {
 
 const DEFAULT_CURSOR_MOTION_BLUR = 0.5;
 
+const CURSOR_TYPE_OPTIONS = [
+	{
+		value: "auto" as CursorType,
+		label: "Auto",
+		description: "Uses the actual cursor from your recording.",
+	},
+	{
+		value: "circle" as CursorType,
+		label: "Circle",
+		description: "A touch-style circle cursor like mobile simulators.",
+	},
+];
+
 const CURSOR_ANIMATION_STYLE_OPTIONS = [
 	{
 		value: "slow",
@@ -580,6 +594,35 @@ export function ConfigSidebar() {
 						}
 					/>
 					<Show when={!project.cursor.hide}>
+						<Field name="Cursor Type" icon={<IconCapCursor />}>
+							<RadioGroup
+								class="flex flex-col gap-2"
+								value={project.cursor.type}
+								onChange={(value) =>
+									setProject("cursor", "type", value as CursorType)
+								}
+							>
+								{CURSOR_TYPE_OPTIONS.map((option) => (
+									<RadioGroup.Item
+										value={option.value}
+										class="rounded-lg border border-gray-3 transition-colors ui-checked:border-blue-8 ui-checked:bg-blue-3/40"
+									>
+										<RadioGroup.ItemInput class="sr-only" />
+										<RadioGroup.ItemLabel class="flex cursor-pointer items-start gap-3 p-3">
+											<RadioGroup.ItemControl class="mt-1 size-4 rounded-full border border-gray-7 ui-checked:border-blue-9 ui-checked:bg-blue-9" />
+											<div class="flex flex-col text-left">
+												<span class="text-sm font-medium text-gray-12">
+													{option.label}
+												</span>
+												<span class="text-xs text-gray-11">
+													{option.description}
+												</span>
+											</div>
+										</RadioGroup.ItemLabel>
+									</RadioGroup.Item>
+								))}
+							</RadioGroup>
+						</Field>
 						<Field name="Size" icon={<IconCapEnlarge />}>
 							<Slider
 								value={[project.cursor.size]}
diff --git a/apps/desktop/src/routes/screenshot-editor/context.tsx b/apps/desktop/src/routes/screenshot-editor/context.tsx
@@ -54,7 +54,7 @@ const DEFAULT_CURSOR: CursorConfiguration = {
 	hideWhenIdle: false,
 	hideWhenIdleDelay: 2,
 	size: 100,
-	type: "pointer",
+	type: "auto",
 	animationStyle: "mellow",
 	tension: 120,
 	mass: 1.1,
diff --git a/crates/project/src/configuration.rs b/crates/project/src/configuration.rs
@@ -394,10 +394,11 @@ impl Default for AudioConfiguration {
     }
 }
 
-#[derive(Type, Serialize, Deserialize, Clone, Debug, Default)]
+#[derive(Type, Serialize, Deserialize, Clone, Debug, Default, PartialEq, Eq)]
 #[serde(rename_all = "camelCase")]
 pub enum CursorType {
     #[default]
+    Auto,
     Pointer,
     Circle,
 }
diff --git a/crates/project/src/meta.rs b/crates/project/src/meta.rs
@@ -55,7 +55,7 @@ impl Default for Platform {
         #[cfg(windows)]
         return Self::Windows;
 
-        #[cfg(target_os = "macos")]
+        #[cfg(not(windows))]
         return Self::MacOS;
     }
 }
diff --git a/crates/rendering/src/layers/cursor.rs b/crates/rendering/src/layers/cursor.rs
@@ -26,11 +26,15 @@ const CURSOR_MAX_STRENGTH: f32 = 5.0;
 /// The size to render the svg to.
 static SVG_CURSOR_RASTERIZED_HEIGHT: u32 = 200;
 
+const CIRCLE_CURSOR_SIZE: u32 = 64;
+
 pub struct CursorLayer {
     statics: Statics,
     bind_group: Option<BindGroup>,
     cursors: HashMap<String, CursorTexture>,
+    circle_cursor: Option<CursorTexture>,
     prev_is_svg_assets_enabled: Option<bool>,
+    prev_cursor_type: Option<CursorType>,
 }
 
 struct Statics {
@@ -187,8 +191,51 @@ impl CursorLayer {
             statics,
             bind_group: None,
             cursors: Default::default(),
+            circle_cursor: None,
             prev_is_svg_assets_enabled: None,
+            prev_cursor_type: None,
+        }
+    }
+
+    fn create_circle_cursor(constants: &RenderVideoConstants) -> CursorTexture {
+        let size = CIRCLE_CURSOR_SIZE;
+        let mut rgba = vec![0u8; (size * size * 4) as usize];
+        let center = size as f32 / 2.0;
+        let outer_radius = center - 2.0;
+        let inner_radius = outer_radius - 4.0;
+
+        for y in 0..size {
+            for x in 0..size {
+                let dx = x as f32 - center;
+                let dy = y as f32 - center;
+                let dist = (dx * dx + dy * dy).sqrt();
+                let idx = ((y * size + x) * 4) as usize;
+
+                if dist <= outer_radius && dist >= inner_radius {
+                    let edge_softness = 1.5;
+                    let outer_alpha = 1.0
+                        - ((dist - outer_radius + edge_softness) / edge_softness).clamp(0.0, 1.0);
+                    let inner_alpha = ((dist - inner_radius) / edge_softness).clamp(0.0, 1.0);
+                    let alpha = (outer_alpha * inner_alpha * 255.0) as u8;
+
+                    rgba[idx] = 80;
+                    rgba[idx + 1] = 80;
+                    rgba[idx + 2] = 80;
+                    rgba[idx + 3] = alpha;
+                } else if dist < inner_radius {
+                    let fill_alpha = 0.15;
+                    let edge_alpha = ((inner_radius - dist) / 2.0).clamp(0.0, 1.0);
+                    let alpha = (fill_alpha * edge_alpha * 255.0) as u8;
+
+                    rgba[idx] = 128;
+                    rgba[idx + 1] = 128;
+                    rgba[idx + 2] = 128;
+                    rgba[idx + 3] = alpha;
+                }
+            }
         }
+
+        CursorTexture::prepare(constants, &rgba, (size, size), XY::new(0.5, 0.5))
     }
 
     pub fn prepare(
@@ -270,71 +317,81 @@ impl CursorLayer {
             }
         }
 
-        // Remove all cursor assets if the svg configuration changes.
-        // it might change the texture.
-        //
-        // This would be better if it only invalidated the required assets but that would be more complicated.
+        let cursor_type = uniforms.project.cursor.r#type.clone();
+
+        if self.prev_cursor_type.as_ref() != Some(&cursor_type) {
+            self.prev_cursor_type = Some(cursor_type.clone());
+            self.circle_cursor = None;
+        }
+
         if self.prev_is_svg_assets_enabled != Some(uniforms.project.cursor.use_svg) {
             self.prev_is_svg_assets_enabled = Some(uniforms.project.cursor.use_svg);
             self.cursors.drain();
         }
 
-        if !self.cursors.contains_key(&interpolated_cursor.cursor_id) {
-            let mut cursor = None;
-
-            let cursor_shape = match &constants.recording_meta.inner {
-                RecordingMetaInner::Studio(StudioRecordingMeta::MultipleSegments {
-                    inner:
-                        MultipleSegments {
-                            cursors: Cursors::Correct(cursors),
-                            ..
-                        },
-                }) => cursors
-                    .get(&interpolated_cursor.cursor_id)
-                    .and_then(|v| v.shape),
-                _ => None,
-            };
-
-            // Attempt to find and load a higher-quality SVG cursor included in Cap.
-            // These are used instead of the OS provided cursor images when possible as the quality is better.
-            if let Some(cursor_shape) = cursor_shape
-                && uniforms.project.cursor.use_svg
-                && let Some(info) = cursor_shape.resolve()
-            {
-                cursor = CursorTexture::prepare_svg(constants, info.raw, info.hotspot.into())
-                    .map_err(|err| {
-                        error!(
-                            "Error loading SVG cursor {:?}: {err}",
-                            interpolated_cursor.cursor_id
-                        )
-                    })
-                    .ok();
+        let cursor_texture = if cursor_type == CursorType::Circle {
+            if self.circle_cursor.is_none() {
+                self.circle_cursor = Some(Self::create_circle_cursor(constants));
             }
-
-            // If not we attempt to load the low-quality image cursor
-            if let StudioRecordingMeta::MultipleSegments { inner, .. } = &constants.meta
-                && cursor.is_none()
-                && let Some(c) = inner
-                    .get_cursor_image(&constants.recording_meta, &interpolated_cursor.cursor_id)
-                && let Ok(img) = image::open(&c.path)
-                    .map_err(|err| error!("Failed to load cursor image from {:?}: {err}", c.path))
-            {
-                cursor = Some(CursorTexture::prepare(
-                    constants,
-                    &img.to_rgba8(),
-                    img.dimensions(),
-                    c.hotspot,
-                ));
-            }
-
-            if let Some(cursor) = cursor {
-                self.cursors
-                    .insert(interpolated_cursor.cursor_id.clone(), cursor);
+            self.circle_cursor.as_ref().unwrap()
+        } else {
+            if !self.cursors.contains_key(&interpolated_cursor.cursor_id) {
+                let mut loaded_cursor = None;
+
+                let cursor_shape = match &constants.recording_meta.inner {
+                    RecordingMetaInner::Studio(StudioRecordingMeta::MultipleSegments {
+                        inner:
+                            MultipleSegments {
+                                cursors: Cursors::Correct(cursors),
+                                ..
+                            },
+                    }) => cursors
+                        .get(&interpolated_cursor.cursor_id)
+                        .and_then(|v| v.shape),
+                    _ => None,
+                };
+
+                if let Some(cursor_shape) = cursor_shape
+                    && uniforms.project.cursor.use_svg
+                    && let Some(info) = cursor_shape.resolve()
+                {
+                    loaded_cursor =
+                        CursorTexture::prepare_svg(constants, info.raw, info.hotspot.into())
+                            .map_err(|err| {
+                                error!(
+                                    "Error loading SVG cursor {:?}: {err}",
+                                    interpolated_cursor.cursor_id
+                                )
+                            })
+                            .ok();
+                }
+
+                if let StudioRecordingMeta::MultipleSegments { inner, .. } = &constants.meta
+                    && loaded_cursor.is_none()
+                    && let Some(c) = inner
+                        .get_cursor_image(&constants.recording_meta, &interpolated_cursor.cursor_id)
+                    && let Ok(img) = image::open(&c.path).map_err(|err| {
+                        error!("Failed to load cursor image from {:?}: {err}", c.path)
+                    })
+                {
+                    loaded_cursor = Some(CursorTexture::prepare(
+                        constants,
+                        &img.to_rgba8(),
+                        img.dimensions(),
+                        c.hotspot,
+                    ));
+                }
+
+                if let Some(c) = loaded_cursor {
+                    self.cursors
+                        .insert(interpolated_cursor.cursor_id.clone(), c);
+                }
             }
-        }
-        let Some(cursor_texture) = self.cursors.get(&interpolated_cursor.cursor_id) else {
-            error!("Cursor {:?} not found!", interpolated_cursor.cursor_id);
-            return;
+            let Some(tex) = self.cursors.get(&interpolated_cursor.cursor_id) else {
+                error!("Cursor {:?} not found!", interpolated_cursor.cursor_id);
+                return;
+            };
+            tex
         };
 
         let size = {

Original file line number	Diff line number	Diff line change
`@@ -394,10 +394,11 @@ impl Default for AudioConfiguration {`
`394`	`394`	`}`
`395`	`395`	`}`
`396`	`396`
`397`		`-#[derive(Type, Serialize, Deserialize, Clone, Debug, Default)]`
	`397`	`+#[derive(Type, Serialize, Deserialize, Clone, Debug, Default, PartialEq, Eq)]`
`398`	`398`	`#[serde(rename_all = "camelCase")]`
`399`	`399`	`pub enum CursorType {`
`400`	`400`	`#[default]`
	`401`	`+ Auto,`
`401`	`402`	`Pointer,`
`402`	`403`	`Circle,`
`403`	`404`	`}`
Original file line number	Diff line number	Diff line change
`@@ -55,7 +55,7 @@ impl Default for Platform {`
`55`	`55`	`#[cfg(windows)]`
`56`	`56`	`return Self::Windows;`
`57`	`57`
`58`		`- #[cfg(target_os = "macos")]`
	`58`	`+ #[cfg(not(windows))]`
`59`	`59`	`return Self::MacOS;`
`60`	`60`	`}`
`61`	`61`	`}`