Skip to content

feat(editor): add cursor opacity and circle color controls#1778

Draft
soaapp wants to merge 1 commit intoCapSoftware:mainfrom
soaapp:feat/circular-cursor-styles
Draft

feat(editor): add cursor opacity and circle color controls#1778
soaapp wants to merge 1 commit intoCapSoftware:mainfrom
soaapp:feat/circular-cursor-styles

Conversation

@soaapp
Copy link
Copy Markdown

@soaapp soaapp commented May 1, 2026

Summary

  • Adds an Opacity slider (0–200%, default 100%) to the Studio Mode editor's Cursor tab. Multiplied into the existing cursor_opacity shader uniform so it composes correctly with the existing idle-fade behaviour and applies to every cursor type.
  • Adds a Circle Color picker (default #FFFFFF) that tints the baked Circle cursor texture. Only rendered when Cursor Type is Circle.
  • Two new fields on CursorConfiguration (cursor_opacity: f32, circle_color: String) with #[serde(default = "...")] attributes so existing project files load unchanged.

Why

Today the Circle cursor is a fixed low-opacity grayscale halo (hard-coded fill_alpha = 0.2, border_alpha = 0.55 in crates/rendering/src/layers/cursor.rs), which can be too translucent to see against many recordings. These two controls let users push visibility up (more opacity, a saturated tint) without touching defaults.

Implementation notes

  • Renderer (crates/rendering/src/layers/cursor.rs):
    • create_circle_cursor now takes a [f32; 3] tint and bakes it into the premultiplied RGB of the texture.
    • Added prev_circle_color to CursorLayer and an invalidation check next to the existing prev_cursor_type check, so the texture is re-baked exactly when the color changes.
    • User opacity is multiplied into the existing cursor_opacity path (which already drives the motion_vector_strength.w shader uniform), so the WGSL shader and pipeline layout are unchanged.
  • UI (apps/desktop/src/routes/editor/ConfigSidebar.tsx): two new Fields placed under Size in the Cursor tab; the color picker is wrapped in <Show when={project.cursor.type === "circle"}>.

Test plan

  • Open a recording in Studio Mode → Cursor tab. New Opacity slider visible under Size.
  • Drag opacity to 0% → cursor disappears in the preview; back to 100% restores it.
  • Drag opacity to 200% → cursor visibly more opaque (most obvious on the Circle type).
  • Switch Cursor Type to CircleCircle Color picker appears under Opacity.
  • Pick a saturated color (red, yellow, cyan) → preview re-tints within a frame or two.
  • Switch Cursor Type back to Auto / Pointer → Circle Color picker is hidden; Opacity still applies.
  • Open a recording made before this change → loads with defaults (#FFFFFF, 1.0) applied via serde.

Screenshots

To be added.

Adds two configurable cursor styles to the Studio Mode editor:
- Opacity slider (0-200%, default 100%) — multiplied into the existing
  shader uniform; affects every cursor type.
- Circle Color picker (default #FFFFFF) — tints the baked Circle cursor
  texture; only shown when Cursor Type is Circle.

Schema (CursorConfiguration) gains two fields with serde defaults so
existing project files load unchanged.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant