-
-
-
+
+
+
+
+
diff --git a/apps/desktop/src/routes/editor/ConfigSidebar.tsx b/apps/desktop/src/routes/editor/ConfigSidebar.tsx
index 442d28c59b..8f2a124a7a 100644
--- a/apps/desktop/src/routes/editor/ConfigSidebar.tsx
+++ b/apps/desktop/src/routes/editor/ConfigSidebar.tsx
@@ -220,7 +220,7 @@ type CursorPresetValues = {
friction: number;
};
-const DEFAULT_CURSOR_MOTION_BLUR = 1.0;
+const DEFAULT_CURSOR_MOTION_BLUR = 0.3;
const CURSOR_TYPE_OPTIONS = [
{
@@ -242,12 +242,24 @@ const CURSOR_ANIMATION_STYLE_OPTIONS = [
description: "Relaxed easing with a gentle follow and higher inertia.",
preset: { tension: 65, mass: 1.8, friction: 16 },
},
+ {
+ value: "smooth",
+ label: "Smooth",
+ description: "Ultra-smooth cinematic feel with high damping.",
+ preset: { tension: 80, mass: 2.5, friction: 28 },
+ },
{
value: "mellow",
label: "Mellow",
description: "Balanced smoothing for everyday tutorials and walkthroughs.",
preset: { tension: 120, mass: 1.1, friction: 18 },
},
+ {
+ value: "fast",
+ label: "Fast",
+ description: "Quick, responsive smoothing for fast-paced content.",
+ preset: { tension: 380, mass: 1.0, friction: 30 },
+ },
{
value: "custom",
label: "Custom",
diff --git a/apps/desktop/src/routes/editor/Editor.tsx b/apps/desktop/src/routes/editor/Editor.tsx
index 3f706fae87..c8a12a3aec 100644
--- a/apps/desktop/src/routes/editor/Editor.tsx
+++ b/apps/desktop/src/routes/editor/Editor.tsx
@@ -14,6 +14,7 @@ import {
createResource,
createSignal,
ErrorBoundary,
+ For,
Match,
on,
onCleanup,
@@ -54,9 +55,11 @@ import { Dialog, DialogContent, EditorButton, Input, Subfield } from "./ui";
const DEFAULT_TIMELINE_HEIGHT = 260;
const MIN_PLAYER_CONTENT_HEIGHT = 320;
const MIN_TIMELINE_HEIGHT = 240;
-const RESIZE_HANDLE_HEIGHT = 8;
+const RESIZE_HANDLE_HEIGHT = 16;
const MIN_PLAYER_HEIGHT = MIN_PLAYER_CONTENT_HEIGHT + RESIZE_HANDLE_HEIGHT;
+const TIMELINE_RESIZE_GRIP_MARKS = [0, 1, 2] as const;
+
function getEditorErrorMessage(error: unknown) {
return error instanceof Error ? error.message : String(error);
}
@@ -462,18 +465,27 @@ function Inner() {
diff --git a/apps/desktop/src/routes/editor/Timeline/ZoomTrack.tsx b/apps/desktop/src/routes/editor/Timeline/ZoomTrack.tsx
index ccc854c7ac..b293893543 100644
--- a/apps/desktop/src/routes/editor/Timeline/ZoomTrack.tsx
+++ b/apps/desktop/src/routes/editor/Timeline/ZoomTrack.tsx
@@ -1,9 +1,11 @@
+import { Button } from "@cap/ui-solid";
import { createEventListenerMap } from "@solid-primitives/event-listener";
import { Menu } from "@tauri-apps/api/menu";
import { cx } from "cva";
import { Array, Option } from "effect";
import {
batch,
+ createEffect,
createMemo,
createRoot,
createSignal,
@@ -49,6 +51,7 @@ export function ZoomTrack(props: {
editorState,
totalDuration,
projectActions,
+ meta,
} = useEditorContext();
const { duration, secsPerPixel } = useTimelineContext();
@@ -56,8 +59,27 @@ export function ZoomTrack(props: {
const [creatingSegmentViaDrag, setCreatingSegmentViaDrag] =
createSignal(false);
+ const [isGeneratingAutoZoom, setIsGeneratingAutoZoom] = createSignal(false);
+ const [isHoveringGenerateZoomButton, setIsHoveringGenerateZoomButton] =
+ createSignal(false);
+ const [
+ sessionDismissedGenerateZoomPrompt,
+ setSessionDismissedGenerateZoomPrompt,
+ ] = createSignal(false);
+
+ const hasZoomSegments = () =>
+ (project.timeline?.zoomSegments?.length ?? 0) > 0;
+
+ const hasRecordedCursorData = () => meta().hasRecordedCursorData;
+
+ createEffect(() => {
+ if (hasZoomSegments() || sessionDismissedGenerateZoomPrompt()) {
+ setIsHoveringGenerateZoomButton(false);
+ }
+ });
const handleGenerateZoomSegments = async () => {
+ setIsGeneratingAutoZoom(true);
try {
const zoomSegments = await commands.generateZoomSegmentsFromClicks();
setProject("timeline", "zoomSegments", zoomSegments);
@@ -69,6 +91,8 @@ export function ZoomTrack(props: {
}
} catch (error) {
console.error("Failed to generate zoom segments:", error);
+ } finally {
+ setIsGeneratingAutoZoom(false);
}
};
@@ -203,17 +227,16 @@ export function ZoomTrack(props: {
start: baseSegment.start,
end: Math.max(minEndTime, endTime),
amount: 1.5,
- mode: {
- manual: {
- x: 0.5,
- y: 0.5,
- },
- },
+ mode: "auto",
});
createdSegmentIndex = index;
}),
);
+ setEditorState("timeline", "selection", {
+ type: "zoom",
+ indices: [createdSegmentIndex],
+ });
});
segmentCreated = true;
};
@@ -275,13 +298,44 @@ export function ZoomTrack(props: {
}}
>
- Click to add zoom segment
-
- (Smoothly zoom in on important areas)
-
+
+
+ setIsHoveringGenerateZoomButton(true)}
+ onMouseLeave={() => setIsHoveringGenerateZoomButton(false)}
+ onMouseDown={(e) => e.stopPropagation()}
+ >
+
+
+
+
diff --git a/apps/desktop/src/routes/editor/text-style.tsx b/apps/desktop/src/routes/editor/text-style.tsx
index e0e3e56b30..e819ae6ce0 100644
--- a/apps/desktop/src/routes/editor/text-style.tsx
+++ b/apps/desktop/src/routes/editor/text-style.tsx
@@ -47,6 +47,17 @@ export function HexColorInput(props: {
let prevColor = props.value;
let colorInput!: HTMLInputElement;
+ const commitValue = (raw: string) => {
+ const trimmed = raw.trim();
+ if (/^#[0-9A-F]{6}$/i.test(trimmed)) {
+ const normalized = `#${trimmed.slice(1).toUpperCase()}`;
+ props.onChange(normalized);
+ setText(normalized);
+ return true;
+ }
+ return false;
+ };
+
return (