Studio Mode movement, motion blur and styling overhaul

apps/desktop/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "cap-desktop"
-version = "0.3.82"
+version = "0.3.83"
 description = "Beautiful screen recordings, owned by you."
 authors = ["you"]
 edition = "2024"

apps/desktop/src-tauri/src/camera.wgsl

@@ -69,6 +69,12 @@ fn vs_main(@builtin(vertex_index) idx: u32) -> VertexOutput {
     return out;
 }
 
+fn squircle_norm(p: vec2<f32>, power: f32) -> f32 {
+    let x = pow(abs(p.x), power);
+    let y = pow(abs(p.y), power);
+    return pow(x + y, 1.0 / power);
+}
+
 @fragment
 fn fs_main(in: VertexOutput) -> @location(0) vec4<f32> {
     // Calculate the effective rendering dimensions (accounting for toolbar)
@@ -127,13 +133,13 @@ fn fs_main(in: VertexOutput) -> @location(0) vec4<f32> {
         let corner_radius = select(0.1, 0.12, size == 1.0);
         let abs_uv = abs(center_uv);
         let corner_pos = abs_uv - (1.0 - corner_radius);
-        let corner_dist = length(max(corner_pos, vec2<f32>(0.0, 0.0)));
+        let corner_norm = squircle_norm(max(corner_pos, vec2<f32>(0.0, 0.0)), 4.0);
 
         // Enhanced anti-aliasing for corners
         let pixel_size = length(fwidth(center_uv));
         let aa_width = max(pixel_size, 0.002);
 
-        let edge_distance = corner_dist - corner_radius;
+        let edge_distance = corner_norm - corner_radius;
         mask = 1.0 - smoothstep(-aa_width, aa_width, edge_distance);
     } else if (shape == 2.0) {
         // Full shape with aspect ratio-corrected rounded corners

apps/desktop/src-tauri/src/recording.rs

@@ -1090,6 +1090,7 @@ fn generate_zoom_segments_from_clicks_impl(
     const MOVEMENT_WINDOW_SECONDS: f64 = 1.2;
     const MOVEMENT_EVENT_DISTANCE_THRESHOLD: f64 = 0.025;
     const MOVEMENT_WINDOW_DISTANCE_THRESHOLD: f64 = 0.1;
+    const AUTO_ZOOM_AMOUNT: f64 = 1.5;
 
     if max_duration <= 0.0 {
         return Vec::new();
@@ -1227,7 +1228,7 @@ fn generate_zoom_segments_from_clicks_impl(
             Some(ZoomSegment {
                 start,
                 end,
-                amount: 2.0,
+                amount: AUTO_ZOOM_AMOUNT,
                 mode: ZoomMode::Auto,
             })
         })

apps/desktop/src/routes/camera.tsx

@@ -38,6 +38,9 @@ namespace CameraWindow {
 	};
 }
 
+const SQUIRCLE_CLIP_PATH =
+	"path('M100.0000% 50.0000% L99.9699% 38.9244% L99.8795% 34.3462% L99.7287% 30.8473% L99.5173% 27.9155% L99.2451% 25.3535% L98.9117% 23.0610% L98.5166% 20.9789% L98.0593% 19.0693% L97.5392% 17.3062% L96.9553% 15.6708% L96.3068% 14.1495% L95.5925% 12.7317% L94.8109% 11.4092% L93.9605% 10.1756% L93.0393% 9.0256% L92.0448% 7.9552% L90.9744% 6.9607% L89.8244% 6.0395% L88.5908% 5.1891% L87.2683% 4.4075% L85.8505% 3.6932% L84.3292% 3.0447% L82.6938% 2.4608% L80.9307% 1.9407% L79.0211% 1.4834% L76.9390% 1.0883% L74.6465% 0.7549% L72.0845% 0.4827% L69.1527% 0.2713% L65.6538% 0.1205% L61.0756% 0.0301% L50.0000% 0.0000% L38.9244% 0.0301% L34.3462% 0.1205% L30.8473% 0.2713% L27.9155% 0.4827% L25.3535% 0.7549% L23.0610% 1.0883% L20.9789% 1.4834% L19.0693% 1.9407% L17.3062% 2.4608% L15.6708% 3.0447% L14.1495% 3.6932% L12.7317% 4.4075% L11.4092% 5.1891% L10.1756% 6.0395% L9.0256% 6.9607% L7.9552% 7.9552% L6.9607% 9.0256% L6.0395% 10.1756% L5.1891% 11.4092% L4.4075% 12.7317% L3.6932% 14.1495% L3.0447% 15.6708% L2.4608% 17.3062% L1.9407% 19.0693% L1.4834% 20.9789% L1.0883% 23.0610% L0.7549% 25.3535% L0.4827% 27.9155% L0.2713% 30.8473% L0.1205% 34.3462% L0.0301% 38.9244% L0.0000% 50.0000% L0.0301% 61.0756% L0.1205% 65.6538% L0.2713% 69.1527% L0.4827% 72.0845% L0.7549% 74.6465% L1.0883% 76.9390% L1.4834% 79.0211% L1.9407% 80.9307% L2.4608% 82.6938% L3.0447% 84.3292% L3.6932% 85.8505% L4.4075% 87.2683% L5.1891% 88.5908% L6.0395% 89.8244% L6.9607% 90.9744% L7.9552% 92.0448% L9.0256% 93.0393% L10.1756% 93.9605% L11.4092% 94.8109% L12.7317% 95.5925% L14.1495% 96.3068% L15.6708% 96.9553% L17.3062% 97.5392% L19.0693% 98.0593% L20.9789% 98.5166% L23.0610% 98.9117% L25.3535% 99.2451% L27.9155% 99.5173% L30.8473% 99.7287% L34.3462% 99.8795% L38.9244% 99.9699% L50.0000% 100.0000% L61.0756% 99.9699% L65.6538% 99.8795% L69.1527% 99.7287% L72.0845% 99.5173% L74.6465% 99.2451% L76.9390% 98.9117% L79.0211% 98.5166% L80.9307% 98.0593% L82.6938% 97.5392% L84.3292% 96.9553% L85.8505% 96.3068% L87.2683% 95.5925% L88.5908% 94.8109% L89.8244% 93.9605% L90.9744% 93.0393% L92.0448% 92.0448% L93.0393% 90.9744% L93.9605% 89.8244% L94.8109% 88.5908% L95.5925% 87.2683% L96.3068% 85.8505% L96.9553% 84.3292% L97.5392% 82.6938% L98.0593% 80.9307% L98.5166% 79.0211% L98.9117% 76.9390% L99.2451% 74.6465% L99.5173% 72.0845% L99.7287% 69.1527% L99.8795% 65.6538% L99.9699% 61.0756% L100.0000% 50.0000% Z')";
+
 export default function () {
 	document.documentElement.classList.toggle("dark", true);
 
@@ -310,8 +313,18 @@ function LegacyCameraPreviewPage() {
 			<div
 				class={cx(
 					"flex flex-col flex-1 relative overflow-hidden pointer-events-none border-none shadow-lg bg-gray-1 text-gray-12",
-					state.shape === "round" ? "rounded-full" : "rounded-3xl",
+					state.shape === "round"
+						? "rounded-full"
+						: state.shape === "square"
+							? ""
+							: "rounded-3xl",
 				)}
+				style={{
+					"clip-path":
+						state.shape === "square" ? SQUIRCLE_CLIP_PATH : undefined,
+					"-webkit-clip-path":
+						state.shape === "square" ? SQUIRCLE_CLIP_PATH : undefined,
+				}}
 				data-tauri-drag-region
 			>
 				<Suspense fallback={<CameraLoadingState />}>