);
}
diff --git a/src/renderer/studio/hooks/useMetadata.ts b/src/renderer/studio/hooks/useMetadata.ts
index 65d059d..c57a97e 100644
--- a/src/renderer/studio/hooks/useMetadata.ts
+++ b/src/renderer/studio/hooks/useMetadata.ts
@@ -1,6 +1,7 @@
import { useState, useEffect, useCallback } from 'react';
import type { RecordingMetadata } from '../../../types/metadata';
import { useStudioAPI, getInitPaths } from './useStudioAPI';
+import { DEFAULT_EFFECTS } from '../../../utils/constants';
export function useMetadata() {
const api = useStudioAPI();
@@ -24,6 +25,13 @@ export function useMetadata() {
try {
setIsLoading(true);
const data = await api.loadMetadata(paths.metadataPath);
+ data.effects = {
+ ...DEFAULT_EFFECTS,
+ ...data.effects,
+ clickCircles: { ...DEFAULT_EFFECTS.clickCircles, ...data.effects?.clickCircles },
+ trail: { ...DEFAULT_EFFECTS.trail, ...data.effects?.trail },
+ highlightRing: { ...DEFAULT_EFFECTS.highlightRing, ...data.effects?.highlightRing },
+ };
setMetadata(data);
setError(null);
} catch (err) {
@@ -51,6 +59,13 @@ export function useMetadata() {
try {
const result = await api.reloadMetadata(metadataPath);
if (result.success && result.data) {
+ result.data.effects = {
+ ...DEFAULT_EFFECTS,
+ ...result.data.effects,
+ clickCircles: { ...DEFAULT_EFFECTS.clickCircles, ...result.data.effects?.clickCircles },
+ trail: { ...DEFAULT_EFFECTS.trail, ...result.data.effects?.trail },
+ highlightRing: { ...DEFAULT_EFFECTS.highlightRing, ...result.data.effects?.highlightRing },
+ };
setMetadata(result.data);
return true;
}
diff --git a/src/renderer/utils/cursor-renderer.ts b/src/renderer/utils/cursor-renderer.ts
index 7a86f0f..e21a130 100644
--- a/src/renderer/utils/cursor-renderer.ts
+++ b/src/renderer/utils/cursor-renderer.ts
@@ -8,7 +8,12 @@ import {
calculateClickAnimationScale,
CursorTypeStabilizer,
} from '../../processing/cursor-utils';
-import { DEFAULT_CURSOR_SIZE } from '../../utils/constants';
+import {
+ DEFAULT_CURSOR_SIZE,
+ CLICK_CIRCLE_DEFAULT_SIZE,
+ CLICK_CIRCLE_DEFAULT_COLOR,
+ CLICK_CIRCLE_DEFAULT_DURATION,
+} from '../../utils/constants';
/**
* Cursor position smoother for glide effect
@@ -155,6 +160,77 @@ function preloadCursorImages(): void {
preloadCursorImages();
+/**
+ * Easing function for click circle animation (ease-out cubic)
+ */
+function easeOutCubic(t: number): number {
+ return 1 - Math.pow(1 - t, 3);
+}
+
+/**
+ * Render click circles on canvas at click positions
+ */
+function renderClickCircles(
+ ctx: CanvasRenderingContext2D,
+ metadata: RecordingMetadata,
+ timestamp: number,
+ videoWidth: number,
+ videoHeight: number,
+ displayWidth: number,
+ displayHeight: number
+): void {
+ const effects = metadata.effects;
+ if (!effects?.clickCircles?.enabled) return;
+
+ const clicks = metadata.clicks || [];
+ if (clicks.length === 0) return;
+
+ const {
+ size = CLICK_CIRCLE_DEFAULT_SIZE,
+ color = CLICK_CIRCLE_DEFAULT_COLOR,
+ duration = CLICK_CIRCLE_DEFAULT_DURATION,
+ } = effects.clickCircles;
+
+ // Calculate scale factors (same as renderCursor)
+ const scaleX = displayWidth / videoWidth;
+ const scaleY = displayHeight / videoHeight;
+ const scale = Math.min(scaleX, scaleY);
+ const actualDisplayWidth = videoWidth * scale;
+ const actualDisplayHeight = videoHeight * scale;
+ const offsetX = (displayWidth - actualDisplayWidth) / 2;
+ const offsetY = (displayHeight - actualDisplayHeight) / 2;
+
+ for (const click of clicks) {
+ if (click.action !== 'down') continue;
+ if (click.x == null || click.y == null) continue;
+
+ const elapsed = timestamp - click.timestamp;
+ if (elapsed < 0 || elapsed > duration) continue;
+
+ const progress = elapsed / duration;
+ const radius = size * scale * easeOutCubic(progress);
+ const opacity = 1.0 * (1 - progress);
+
+ const x = click.x * scale + offsetX;
+ const y = click.y * scale + offsetY;
+
+ // Skip circles entirely outside the display area
+ if (x + radius < 0 || x - radius > displayWidth || y + radius < 0 || y - radius > displayHeight) continue;
+
+ ctx.save();
+ ctx.beginPath();
+ ctx.arc(x, y, radius, 0, Math.PI * 2);
+ ctx.globalAlpha = opacity * 0.15;
+ ctx.fillStyle = color;
+ ctx.fill();
+ ctx.globalAlpha = opacity;
+ ctx.strokeStyle = color;
+ ctx.lineWidth = 3 * scale;
+ ctx.stroke();
+ ctx.restore();
+ }
+}
+
/**
* Render cursor on canvas
*/
@@ -232,6 +308,9 @@ export function renderCursor(
// Draw cursor using actual SVG assets
drawCursorShape(ctx, x, y, cursorSize, shape);
+
+ // Draw click circles on top of cursor
+ renderClickCircles(ctx, metadata, timestamp, videoWidth, videoHeight, displayWidth, displayHeight);
}
/**
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 060f3b9..2425266 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -230,6 +230,39 @@ const CLICK_DETECTION_TIMEOUT_MS = 50;
*/
const CLICK_DETECTION_THRESHOLD_MS = 200;
+// ========================================
+// Click Circle Constants
+// ========================================
+
+/**
+ * Default click circle radius in pixels
+ */
+export const CLICK_CIRCLE_DEFAULT_SIZE = 40;
+
+/**
+ * Default click circle color
+ */
+export const CLICK_CIRCLE_DEFAULT_COLOR = '#ffffff';
+
+/**
+ * Default click circle animation duration in milliseconds
+ */
+export const CLICK_CIRCLE_DEFAULT_DURATION = 400;
+
+/**
+ * Default mouse effects configuration
+ */
+export const DEFAULT_EFFECTS = {
+ clickCircles: {
+ enabled: false,
+ size: CLICK_CIRCLE_DEFAULT_SIZE,
+ color: CLICK_CIRCLE_DEFAULT_COLOR,
+ duration: CLICK_CIRCLE_DEFAULT_DURATION,
+ },
+ trail: { enabled: false, length: 5, fadeSpeed: 0.5, color: '#ffffff' },
+ highlightRing: { enabled: false, size: 30, color: '#ffffff', pulseSpeed: 0.5 },
+} as const satisfies import('../types').MouseEffectsConfig;
+
// ========================================
// Mouse Effects Constants
// ========================================