diff --git a/src/components/video-editor/AnnotationOverlay.tsx b/src/components/video-editor/AnnotationOverlay.tsx
index 3260a542..00bad96f 100644
--- a/src/components/video-editor/AnnotationOverlay.tsx
+++ b/src/components/video-editor/AnnotationOverlay.tsx
@@ -1,219 +1,231 @@
 import { useRef } from "react";
 import { Rnd } from "react-rnd";
-import type { AnnotationRegion } from "./types";
 import { cn } from "@/lib/utils";
 import { getArrowComponent } from "./ArrowSvgs";
+import type { AnnotationRegion } from "./types";
 
 interface AnnotationOverlayProps {
-  annotation: AnnotationRegion;
-  isSelected: boolean;
-  containerWidth: number;
-  containerHeight: number;
-  onPositionChange: (id: string, position: { x: number; y: number }) => void;
-  onSizeChange: (id: string, size: { width: number; height: number }) => void;
-  onClick: (id: string) => void;
-  zIndex: number;
-  isSelectedBoost: boolean; // Boost z-index when selected for easy editing
+	annotation: AnnotationRegion;
+	isSelected: boolean;
+	containerWidth: number;
+	containerHeight: number;
+	onPositionChange: (id: string, position: { x: number; y: number }) => void;
+	onSizeChange: (id: string, size: { width: number; height: number }) => void;
+	onClick: (id: string) => void;
+	zIndex: number;
+	isSelectedBoost: boolean; // Boost z-index when selected for easy editing
 }
 
 export function AnnotationOverlay({
-  annotation,
-  isSelected,
-  containerWidth,
-  containerHeight,
-  onPositionChange,
-  onSizeChange,
-  onClick,
-  zIndex,
-  isSelectedBoost,
+	annotation,
+	isSelected,
+	containerWidth,
+	containerHeight,
+	onPositionChange,
+	onSizeChange,
+	onClick,
+	zIndex,
+	isSelectedBoost,
 }: AnnotationOverlayProps) {
-  const x = (annotation.position.x / 100) * containerWidth;
-  const y = (annotation.position.y / 100) * containerHeight;
-  const width = (annotation.size.width / 100) * containerWidth;
-  const height = (annotation.size.height / 100) * containerHeight;
+	const x = (annotation.position.x / 100) * containerWidth;
+	const y = (annotation.position.y / 100) * containerHeight;
+	const width = (annotation.size.width / 100) * containerWidth;
+	const height = (annotation.size.height / 100) * containerHeight;
 
-  const isDraggingRef = useRef(false);
+	const isDraggingRef = useRef(false);
 
-  const renderArrow = () => {
-    const direction = annotation.figureData?.arrowDirection || 'right';
-    const color = annotation.figureData?.color || '#2563EB';
-    const strokeWidth = annotation.figureData?.strokeWidth || 4;
+	const renderArrow = () => {
+		const direction = annotation.figureData?.arrowDirection || "right";
+		const color = annotation.figureData?.color || "#2563EB";
+		const strokeWidth = annotation.figureData?.strokeWidth || 4;
 
-    const ArrowComponent = getArrowComponent(direction);
-    return <ArrowComponent color={color} strokeWidth={strokeWidth} />;
-  };
+		const ArrowComponent = getArrowComponent(direction);
+		return <ArrowComponent color={color} strokeWidth={strokeWidth} />;
+	};
 
-  const renderContent = () => {
-    switch (annotation.type) {
-      case 'text':
-        return (
-          <div
-            className="w-full h-full flex items-center p-2 overflow-hidden"
-            style={{
-              justifyContent: annotation.style.textAlign === 'left' ? 'flex-start' : 
-                            annotation.style.textAlign === 'right' ? 'flex-end' : 'center',
-              alignItems: 'center',
-            }}
-          >
-            <span
-              style={{
-                color: annotation.style.color,
-                backgroundColor: annotation.style.backgroundColor,
-                fontSize: `${annotation.style.fontSize}px`,
-                fontFamily: annotation.style.fontFamily,
-                fontWeight: annotation.style.fontWeight,
-                fontStyle: annotation.style.fontStyle,
-                textDecoration: annotation.style.textDecoration,
-                textAlign: annotation.style.textAlign,
-                wordBreak: 'break-word',
-                whiteSpace: 'pre-wrap',
-                boxDecorationBreak: 'clone',
-                WebkitBoxDecorationBreak: 'clone',
-                padding: '0.1em 0.2em',
-                borderRadius: '4px',
-                lineHeight: '1.4',
-              }}
-            >
-              {annotation.content}
-            </span>
-          </div>
-        );
+	const renderContent = () => {
+		switch (annotation.type) {
+			case "text":
+				return (
+					<div
+						className="w-full h-full flex items-center p-2 overflow-hidden"
+						style={{
+							justifyContent:
+								annotation.style.textAlign === "left"
+									? "flex-start"
+									: annotation.style.textAlign === "right"
+										? "flex-end"
+										: "center",
+							alignItems: "center",
+						}}
+					>
+						<span
+							style={{
+								color: annotation.style.color,
+								backgroundColor: annotation.style.backgroundColor,
+								fontSize: `${annotation.style.fontSize}px`,
+								fontFamily: annotation.style.fontFamily,
+								fontWeight: annotation.style.fontWeight,
+								fontStyle: annotation.style.fontStyle,
+								textDecoration: annotation.style.textDecoration,
+								textAlign: annotation.style.textAlign,
+								wordBreak: "break-word",
+								whiteSpace: "pre-wrap",
+								boxDecorationBreak: "clone",
+								WebkitBoxDecorationBreak: "clone",
+								padding: "0.1em 0.2em",
+								borderRadius: "4px",
+								lineHeight: "1.4",
+							}}
+						>
+							{annotation.content}
+						</span>
+					</div>
+				);
 
-      case 'image':
-        if (annotation.content && annotation.content.startsWith('data:image')) {
-          return (
-            <img
-              src={annotation.content}
-              alt="Annotation"
-              className="w-full h-full object-contain"
-              draggable={false}
-            />
-          );
-        }
-        return (
-          <div className="w-full h-full flex items-center justify-center text-slate-400 text-sm">
-            No image
-          </div>
-        );
+			case "image":
+				if (annotation.content && annotation.content.startsWith("data:image")) {
+					return (
+						<img
+							src={annotation.content}
+							alt="Annotation"
+							className="w-full h-full object-contain"
+							draggable={false}
+						/>
+					);
+				}
+				return (
+					<div className="w-full h-full flex items-center justify-center text-slate-400 text-sm">
+						No image
+					</div>
+				);
 
-      case 'figure':
-        if (!annotation.figureData) {
-          return (
-            <div className="w-full h-full flex items-center justify-center text-slate-400 text-sm">
-              No arrow data
-            </div>
-          );
-        }
+			case "figure":
+				if (!annotation.figureData) {
+					return (
+						<div className="w-full h-full flex items-center justify-center text-slate-400 text-sm">
+							No arrow data
+						</div>
+					);
+				}
 
-        return (
-          <div className="w-full h-full flex items-center justify-center p-2">
-            {renderArrow()}
-          </div>
-        );
+				return (
+					<div className="w-full h-full flex items-center justify-center p-2">{renderArrow()}</div>
+				);
 
-      default:
-        return null;
-    }
-  };
+			case "blur":
+				return (
+					<div
+						className="w-full h-full rounded-lg backdrop-blur-md"
+						style={{
+							backdropFilter: `blur(${annotation.blurIntensity ?? 12}px)`,
+							WebkitBackdropFilter: `blur(${annotation.blurIntensity ?? 12}px)`,
+						}}
+					/>
+				);
 
-  return (
-    <Rnd
-      position={{ x, y }}
-      size={{ width, height }}
-      onDragStart={() => {
-        isDraggingRef.current = true;
-      }}
-      onDragStop={(_e, d) => {
-        const xPercent = (d.x / containerWidth) * 100;
-        const yPercent = (d.y / containerHeight) * 100;
-        onPositionChange(annotation.id, { x: xPercent, y: yPercent });
-        
-        // Reset dragging flag after a short delay to prevent click event
-        setTimeout(() => {
-          isDraggingRef.current = false;
-        }, 100);
-      }}
-      onResizeStop={(_e, _direction, ref, _delta, position) => {
-        const xPercent = (position.x / containerWidth) * 100;
-        const yPercent = (position.y / containerHeight) * 100;
-        const widthPercent = (ref.offsetWidth / containerWidth) * 100;
-        const heightPercent = (ref.offsetHeight / containerHeight) * 100;
-        onPositionChange(annotation.id, { x: xPercent, y: yPercent });
-        onSizeChange(annotation.id, { width: widthPercent, height: heightPercent });
-      }}
-      onClick={() => {
-        if (isDraggingRef.current) return;
-        onClick(annotation.id);
-      }}
-      bounds="parent"
-      className={cn(
-        "cursor-move transition-all",
-        isSelected && "ring-2 ring-[#2563EB] ring-offset-2 ring-offset-transparent"
-      )}
-      style={{
-        zIndex: isSelectedBoost ? zIndex + 1000 : zIndex, // Boost selected annotation to ensure it's on top
-        pointerEvents: isSelected ? 'auto' : 'none',
-        border: isSelected ? '2px solid rgba(37, 99, 235, 0.8)' : 'none',
-        backgroundColor: isSelected ? 'rgba(37, 99, 235, 0.1)' : 'transparent',
-        boxShadow: isSelected ? '0 0 0 1px rgba(37, 99, 235, 0.35)' : 'none',
-      }}
-      enableResizing={isSelected}
-      disableDragging={!isSelected}
-      resizeHandleStyles={{
-        topLeft: {
-          width: '12px',
-          height: '12px',
-          backgroundColor: isSelected ? 'white' : 'transparent',
-          border: isSelected ? '2px solid #2563EB' : 'none',
-          borderRadius: '50%',
-          left: '-6px',
-          top: '-6px',
-          cursor: 'nwse-resize',
-        },
-        topRight: {
-          width: '12px',
-          height: '12px',
-          backgroundColor: isSelected ? 'white' : 'transparent',
-          border: isSelected ? '2px solid #2563EB' : 'none',
-          borderRadius: '50%',
-          right: '-6px',
-          top: '-6px',
-          cursor: 'nesw-resize',
-        },
-        bottomLeft: {
-          width: '12px',
-          height: '12px',
-          backgroundColor: isSelected ? 'white' : 'transparent',
-          border: isSelected ? '2px solid #2563EB' : 'none',
-          borderRadius: '50%',
-          left: '-6px',
-          bottom: '-6px',
-          cursor: 'nesw-resize',
-        },
-        bottomRight: {
-          width: '12px',
-          height: '12px',
-          backgroundColor: isSelected ? 'white' : 'transparent',
-          border: isSelected ? '2px solid #2563EB' : 'none',
-          borderRadius: '50%',
-          right: '-6px',
-          bottom: '-6px',
-          cursor: 'nwse-resize',
-        },
-      }}
-    >
-      <div
-        className={cn(
-          "w-full h-full rounded-lg",
-          annotation.type === 'text' && "bg-transparent",
-          annotation.type === 'image' && "bg-transparent",
-          annotation.type === 'figure' && "bg-transparent",
-          isSelected && "shadow-lg"
-        )}
-      >
-        {renderContent()}
-      </div>
-    </Rnd>
-  );
-}
+			default:
+				return null;
+		}
+	};
 
+	return (
+		<Rnd
+			position={{ x, y }}
+			size={{ width, height }}
+			onDragStart={() => {
+				isDraggingRef.current = true;
+			}}
+			onDragStop={(_e, d) => {
+				const xPercent = (d.x / containerWidth) * 100;
+				const yPercent = (d.y / containerHeight) * 100;
+				onPositionChange(annotation.id, { x: xPercent, y: yPercent });
+
+				// Reset dragging flag after a short delay to prevent click event
+				setTimeout(() => {
+					isDraggingRef.current = false;
+				}, 100);
+			}}
+			onResizeStop={(_e, _direction, ref, _delta, position) => {
+				const xPercent = (position.x / containerWidth) * 100;
+				const yPercent = (position.y / containerHeight) * 100;
+				const widthPercent = (ref.offsetWidth / containerWidth) * 100;
+				const heightPercent = (ref.offsetHeight / containerHeight) * 100;
+				onPositionChange(annotation.id, { x: xPercent, y: yPercent });
+				onSizeChange(annotation.id, { width: widthPercent, height: heightPercent });
+			}}
+			onClick={() => {
+				if (isDraggingRef.current) return;
+				onClick(annotation.id);
+			}}
+			bounds="parent"
+			className={cn(
+				"cursor-move transition-all",
+				isSelected && "ring-2 ring-[#2563EB] ring-offset-2 ring-offset-transparent",
+			)}
+			style={{
+				zIndex: isSelectedBoost ? zIndex + 1000 : zIndex, // Boost selected annotation to ensure it's on top
+				pointerEvents: isSelected ? "auto" : "none",
+				border: isSelected ? "2px solid rgba(37, 99, 235, 0.8)" : "none",
+				backgroundColor: isSelected ? "rgba(37, 99, 235, 0.1)" : "transparent",
+				boxShadow: isSelected ? "0 0 0 1px rgba(37, 99, 235, 0.35)" : "none",
+			}}
+			enableResizing={isSelected}
+			disableDragging={!isSelected}
+			resizeHandleStyles={{
+				topLeft: {
+					width: "12px",
+					height: "12px",
+					backgroundColor: isSelected ? "white" : "transparent",
+					border: isSelected ? "2px solid #2563EB" : "none",
+					borderRadius: "50%",
+					left: "-6px",
+					top: "-6px",
+					cursor: "nwse-resize",
+				},
+				topRight: {
+					width: "12px",
+					height: "12px",
+					backgroundColor: isSelected ? "white" : "transparent",
+					border: isSelected ? "2px solid #2563EB" : "none",
+					borderRadius: "50%",
+					right: "-6px",
+					top: "-6px",
+					cursor: "nesw-resize",
+				},
+				bottomLeft: {
+					width: "12px",
+					height: "12px",
+					backgroundColor: isSelected ? "white" : "transparent",
+					border: isSelected ? "2px solid #2563EB" : "none",
+					borderRadius: "50%",
+					left: "-6px",
+					bottom: "-6px",
+					cursor: "nesw-resize",
+				},
+				bottomRight: {
+					width: "12px",
+					height: "12px",
+					backgroundColor: isSelected ? "white" : "transparent",
+					border: isSelected ? "2px solid #2563EB" : "none",
+					borderRadius: "50%",
+					right: "-6px",
+					bottom: "-6px",
+					cursor: "nwse-resize",
+				},
+			}}
+		>
+			<div
+				className={cn(
+					"w-full h-full rounded-lg",
+					annotation.type === "text" && "bg-transparent",
+					annotation.type === "image" && "bg-transparent",
+					annotation.type === "figure" && "bg-transparent",
+					isSelected && "shadow-lg",
+				)}
+			>
+				{renderContent()}
+			</div>
+		</Rnd>
+	);
+}
diff --git a/src/components/video-editor/AnnotationSettingsPanel.tsx b/src/components/video-editor/AnnotationSettingsPanel.tsx
index 2cddf970..1f6a43b3 100644
--- a/src/components/video-editor/AnnotationSettingsPanel.tsx
+++ b/src/components/video-editor/AnnotationSettingsPanel.tsx
@@ -1,529 +1,667 @@
-import { useRef, useState, useEffect, useMemo } from "react";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Button } from "@/components/ui/button";
-import { Trash2, Type, Image as ImageIcon, Upload, Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, ChevronDown, Info } from "lucide-react";
+import Block from "@uiw/react-color-block";
+import {
+	AlignCenter,
+	AlignLeft,
+	AlignRight,
+	Bold,
+	ChevronDown,
+	Image as ImageIcon,
+	Info,
+	Italic,
+	Trash2,
+	Type,
+	Underline,
+	Upload,
+} from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
-import Block from '@uiw/react-color-block';
-import type { AnnotationRegion, AnnotationType, ArrowDirection, FigureData } from "./types";
+import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import { Slider } from "@/components/ui/slider";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { type CustomFont, getCustomFonts } from "@/lib/customFonts";
 import { cn } from "@/lib/utils";
-import { getArrowComponent } from "./ArrowSvgs";
-import { AddCustomFontDialog } from "./AddCustomFontDialog";
-import { getCustomFonts, type CustomFont } from "@/lib/customFonts";
 import { useScopedT } from "../../contexts/I18nContext";
+import { AddCustomFontDialog } from "./AddCustomFontDialog";
+import { getArrowComponent } from "./ArrowSvgs";
+import type { AnnotationRegion, AnnotationType, ArrowDirection, FigureData } from "./types";
 
 interface AnnotationSettingsPanelProps {
-  annotation: AnnotationRegion;
-  onContentChange: (content: string) => void;
-  onTypeChange: (type: AnnotationType) => void;
-  onStyleChange: (style: Partial<AnnotationRegion['style']>) => void;
-  onFigureDataChange?: (figureData: FigureData) => void;
-  onDelete: () => void;
+	annotation: AnnotationRegion;
+	onContentChange: (content: string) => void;
+	onTypeChange: (type: AnnotationType) => void;
+	onStyleChange: (style: Partial<AnnotationRegion["style"]>) => void;
+	onFigureDataChange?: (figureData: FigureData) => void;
+	onBlurIntensityChange?: (intensity: number) => void;
+	onDelete: () => void;
 }
 
 export const FONT_FAMILY_VALUES = [
-  { value: 'system-ui, -apple-system, sans-serif', labelKey: 'fontStyles.classic' },
-  { value: 'Georgia, serif', labelKey: 'fontStyles.editor' },
-  { value: 'Impact, Arial Black, sans-serif', labelKey: 'fontStyles.strong' },
-  { value: 'Courier New, monospace', labelKey: 'fontStyles.typewriter' },
-  { value: 'Brush Script MT, cursive', labelKey: 'fontStyles.deco' },
-  { value: 'Arial, sans-serif', labelKey: 'fontStyles.simple' },
-  { value: 'Verdana, sans-serif', labelKey: 'fontStyles.modern' },
-  { value: 'Trebuchet MS, sans-serif', labelKey: 'fontStyles.clean' },
+	{ value: "system-ui, -apple-system, sans-serif", labelKey: "fontStyles.classic" },
+	{ value: "Georgia, serif", labelKey: "fontStyles.editor" },
+	{ value: "Impact, Arial Black, sans-serif", labelKey: "fontStyles.strong" },
+	{ value: "Courier New, monospace", labelKey: "fontStyles.typewriter" },
+	{ value: "Brush Script MT, cursive", labelKey: "fontStyles.deco" },
+	{ value: "Arial, sans-serif", labelKey: "fontStyles.simple" },
+	{ value: "Verdana, sans-serif", labelKey: "fontStyles.modern" },
+	{ value: "Trebuchet MS, sans-serif", labelKey: "fontStyles.clean" },
 ];
 
 export const FONT_SIZES = [12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 80, 96, 128];
 
 export function AnnotationSettingsPanel({
-  annotation,
-  onContentChange,
-  onTypeChange,
-  onStyleChange,
-  onFigureDataChange,
-  onDelete,
+	annotation,
+	onContentChange,
+	onTypeChange,
+	onStyleChange,
+	onFigureDataChange,
+	onBlurIntensityChange,
+	onDelete,
 }: AnnotationSettingsPanelProps) {
-  const t = useScopedT('editor');
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [customFonts, setCustomFonts] = useState<CustomFont[]>([]);
-
-  const fontFamilies = useMemo(() =>
-    FONT_FAMILY_VALUES.map((f) => ({ value: f.value, label: t(f.labelKey) })),
-    [t],
-  );
-
-  // Load custom fonts on mount
-  useEffect(() => {
-    setCustomFonts(getCustomFonts());
-  }, []);
-
-  const colorPalette = [
-    '#FF0000', // Red
-    '#FFD700', // Yellow/Gold
-    '#00FF00', // Green
-    '#FFFFFF', // White
-    '#0000FF', // Blue
-    '#FF6B00', // Orange
-    '#9B59B6', // Purple
-    '#E91E63', // Pink
-    '#00BCD4', // Cyan
-    '#FF5722', // Deep Orange
-    '#8BC34A', // Light Green
-    '#FFC107', // Amber
-    '#2563EB', // Brand Blue
-    '#000000', // Black
-    '#607D8B', // Blue Grey
-    '#795548', // Brown
-  ];
-
-
-
-  const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = event.target.files;
-    if (!files || files.length === 0) return;
-
-    const file = files[0];
-    
-    // Validate file type
-    const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
-    if (!validTypes.includes(file.type)) {
-      toast.error(t('annotations.imageUploadError'), {
-        description: t('annotations.imageUploadErrorDescription'),
-      });
-      event.target.value = '';
-      return;
-    }
-
-    const reader = new FileReader();
-
-    reader.onload = (e) => {
-      const dataUrl = e.target?.result as string;
-      if (dataUrl) {
-        onContentChange(dataUrl);
-        toast.success(t('annotations.imageUploadSuccess'));
-      }
-    };
-
-    reader.onerror = () => {
-      toast.error(t('annotations.imageUploadFailed'), {
-        description: t('annotations.imageUploadFailedDescription'),
-      });
-    };
-
-    reader.readAsDataURL(file);
-    event.target.value = '';
-  };
-
-  return (
-    <div className="flex-[2] min-w-0 bg-[#161619] border border-white/10 rounded-2xl p-4 flex flex-col shadow-xl h-full overflow-y-auto custom-scrollbar">
-      <div className="mb-6">
-        <div className="flex items-center justify-between mb-4">
-          <span className="text-sm font-medium text-slate-200">{t('annotations.settings')}</span>
-          <span className="text-[10px] uppercase tracking-wider font-medium text-[#2563EB] bg-[#2563EB]/10 px-2 py-1 rounded-full">
-            {t('annotations.active')}
-          </span>
-        </div>
-        
-        {/* Type Selector */}
-        <Tabs value={annotation.type} onValueChange={(value) => onTypeChange(value as AnnotationType)} className="mb-6">
-          <TabsList className="mb-4 bg-white/5 border border-white/5 p-1 w-full grid grid-cols-3 h-auto rounded-xl">
-            <TabsTrigger value="text" className="data-[state=active]:bg-[#2563EB] data-[state=active]:text-white text-slate-400 py-2 rounded-lg transition-all gap-2">
-              <Type className="w-4 h-4" />
-              {t('annotations.text')}
-            </TabsTrigger>
-            <TabsTrigger value="image" className="data-[state=active]:bg-[#2563EB] data-[state=active]:text-white text-slate-400 py-2 rounded-lg transition-all gap-2">
-              <ImageIcon className="w-4 h-4" />
-              {t('annotations.image')}
-            </TabsTrigger>
-            <TabsTrigger value="figure" className="data-[state=active]:bg-[#2563EB] data-[state=active]:text-white text-slate-400 py-2 rounded-lg transition-all gap-2">
-              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <path d="M4 12h16m0 0l-6-6m6 6l-6 6" strokeLinecap="round" strokeLinejoin="round" />
-              </svg>
-              {t('annotations.arrow')}
-            </TabsTrigger>
-          </TabsList>
-
-          {/* Text Content */}
-          <TabsContent value="text" className="mt-0 space-y-4">
-            <div>
-              <label className="text-xs font-medium text-slate-200 mb-2 block">{t('annotations.textContent')}</label>
-              <textarea
-                value={annotation.textContent || annotation.content}
-                onChange={(e) => onContentChange(e.target.value)}
-                placeholder={t('annotations.textPlaceholder')}
-                rows={5}
-                className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-slate-200 text-sm placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-[#2563EB] focus:border-transparent resize-none"
-              />
-            </div>
-
-            {/* Styling Controls */}
-            <div className="space-y-4">
-              {/* Font Family & Size */}
-              <div className="grid grid-cols-2 gap-2">
-                <div>
-                  <label className="text-xs font-medium text-slate-200 mb-2 block">{t('annotations.fontStyle')}</label>
-                  <Select
-                    value={annotation.style.fontFamily}
-                    onValueChange={(value) => onStyleChange({ fontFamily: value })}
-                  >
-                    <SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 h-9 text-xs">
-                      <SelectValue placeholder={t('annotations.selectStyle')} />
-                    </SelectTrigger>
-                    <SelectContent className="bg-[#1a1a1c] border-white/10 text-slate-200 max-h-[300px]">
-                      {fontFamilies.map((font) => (
-                        <SelectItem key={font.value} value={font.value} style={{ fontFamily: font.value }}>
-                          {font.label}
-                        </SelectItem>
-                      ))}
-                      {customFonts.length > 0 && (
-                        <>
-                          <div className="px-2 py-1.5 text-[10px] font-medium text-slate-400 uppercase tracking-wider">
-                            Custom Fonts
-                          </div>
-                          {customFonts.map((font) => (
-                            <SelectItem
-                              key={font.id}
-                              value={font.fontFamily}
-                              style={{ fontFamily: font.fontFamily }}
-                            >
-                              {font.name}
-                            </SelectItem>
-                          ))}
-                        </>
-                      )}
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div>
-                  <label className="text-xs font-medium text-slate-200 mb-2 block">{t('annotations.size')}</label>
-                  <Select 
-                    value={annotation.style.fontSize.toString()} 
-                    onValueChange={(value) => onStyleChange({ fontSize: parseInt(value) })}
-                  >
-                    <SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 h-9 text-xs">
-                      <SelectValue placeholder={t('annotations.size')} />
-                    </SelectTrigger>
-                    <SelectContent className="bg-[#1a1a1c] border-white/10 text-slate-200 max-h-[200px]">
-                      {FONT_SIZES.map((size) => (
-                        <SelectItem key={size} value={size.toString()}>
-                          {size}px
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-
-              {/* Add Custom Font Button */}
-              <div>
-                <AddCustomFontDialog
-                  onFontAdded={(font) => {
-                    setCustomFonts(getCustomFonts());
-                    onStyleChange({ fontFamily: font.fontFamily });
-                  }}
-                />
-              </div>
-
-              {/* Formatting Toggles */}
-              <div className="flex items-center justify-between gap-2">
-                <ToggleGroup type="multiple" className="justify-start bg-white/5 p-1 rounded-lg border border-white/5">
-                  <ToggleGroupItem 
-                    value="bold" 
-                    aria-label={t('annotations.toggleBold')}
-                    data-state={annotation.style.fontWeight === 'bold' ? 'on' : 'off'}
-                    onClick={() => onStyleChange({ fontWeight: annotation.style.fontWeight === 'bold' ? 'normal' : 'bold' })}
-                    className="h-8 w-8 data-[state=on]:bg-[#2563EB] data-[state=on]:text-white text-slate-400 hover:bg-white/5 hover:text-slate-200"
-                  >
-                    <Bold className="h-4 w-4" />
-                  </ToggleGroupItem>
-                  <ToggleGroupItem 
-                    value="italic" 
-                    aria-label={t('annotations.toggleItalic')}
-                    data-state={annotation.style.fontStyle === 'italic' ? 'on' : 'off'}
-                    onClick={() => onStyleChange({ fontStyle: annotation.style.fontStyle === 'italic' ? 'normal' : 'italic' })}
-                    className="h-8 w-8 data-[state=on]:bg-[#2563EB] data-[state=on]:text-white text-slate-400 hover:bg-white/5 hover:text-slate-200"
-                  >
-                    <Italic className="h-4 w-4" />
-                  </ToggleGroupItem>
-                  <ToggleGroupItem 
-                    value="underline" 
-                    aria-label={t('annotations.toggleUnderline')}
-                    data-state={annotation.style.textDecoration === 'underline' ? 'on' : 'off'}
-                    onClick={() => onStyleChange({ textDecoration: annotation.style.textDecoration === 'underline' ? 'none' : 'underline' })}
-                    className="h-8 w-8 data-[state=on]:bg-[#2563EB] data-[state=on]:text-white text-slate-400 hover:bg-white/5 hover:text-slate-200"
-                  >
-                    <Underline className="h-4 w-4" />
-                  </ToggleGroupItem>
-                </ToggleGroup>
-
-                <ToggleGroup type="single" value={annotation.style.textAlign} className="justify-start bg-white/5 p-1 rounded-lg border border-white/5">
-                  <ToggleGroupItem 
-                    value="left" 
-                    aria-label={t('annotations.alignLeft')}
-                    onClick={() => onStyleChange({ textAlign: 'left' })}
-                    className="h-8 w-8 data-[state=on]:bg-[#2563EB] data-[state=on]:text-white text-slate-400 hover:bg-white/5 hover:text-slate-200"
-                  >
-                    <AlignLeft className="h-4 w-4" />
-                  </ToggleGroupItem>
-                  <ToggleGroupItem 
-                    value="center" 
-                    aria-label={t('annotations.alignCenter')}
-                    onClick={() => onStyleChange({ textAlign: 'center' })}
-                    className="h-8 w-8 data-[state=on]:bg-[#2563EB] data-[state=on]:text-white text-slate-400 hover:bg-white/5 hover:text-slate-200"
-                  >
-                    <AlignCenter className="h-4 w-4" />
-                  </ToggleGroupItem>
-                  <ToggleGroupItem 
-                    value="right" 
-                    aria-label={t('annotations.alignRight')}
-                    onClick={() => onStyleChange({ textAlign: 'right' })}
-                    className="h-8 w-8 data-[state=on]:bg-[#2563EB] data-[state=on]:text-white text-slate-400 hover:bg-white/5 hover:text-slate-200"
-                  >
-                    <AlignRight className="h-4 w-4" />
-                  </ToggleGroupItem>
-                </ToggleGroup>
-              </div>
-
-              {/* Colors */}
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <label className="text-xs font-medium text-slate-200 mb-2 block">{t('annotations.textColor')}</label>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button 
-                        variant="outline" 
-                        className="w-full h-9 justify-start gap-2 bg-white/5 border-white/10 hover:bg-white/10 px-2"
-                      >
-                        <div 
-                          className="w-4 h-4 rounded-full border border-white/20" 
-                          style={{ backgroundColor: annotation.style.color }}
-                        />
-                        <span className="text-xs text-slate-300 truncate flex-1 text-left">
-                          {annotation.style.color}
-                        </span>
-                        <ChevronDown className="h-3 w-3 opacity-50" />
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-[260px] p-3 bg-[#1a1a1c] border border-white/10 rounded-xl shadow-xl">
-                      <Block
-                        color={annotation.style.color}
-                        colors={colorPalette}
-                        onChange={(color) => {
-                          onStyleChange({ color: color.hex });
-                        }}
-                        style={{
-                          borderRadius: '8px',
-                        }}
-                      />
-                    </PopoverContent>
-                  </Popover>
-                </div>
-                <div>
-                  <label className="text-xs font-medium text-slate-200 mb-2 block">{t('annotations.background')}</label>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button 
-                        variant="outline" 
-                        className="w-full h-9 justify-start gap-2 bg-white/5 border-white/10 hover:bg-white/10 px-2"
-                      >
-                        <div 
-                          className="w-4 h-4 rounded-full border border-white/20 relative overflow-hidden" 
-                        >
-                          <div className="absolute inset-0 checkerboard-bg opacity-50" />
-                          <div 
-                            className="absolute inset-0"
-                            style={{ backgroundColor: annotation.style.backgroundColor }}
-                          />
-                        </div>
-                        <span className="text-xs text-slate-300 truncate flex-1 text-left">
-                          {annotation.style.backgroundColor === 'transparent' ? t('annotations.none') : 'Color'}
-                        </span>
-                        <ChevronDown className="h-3 w-3 opacity-50" />
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-[260px] p-3 bg-[#1a1a1c] border border-white/10 rounded-xl shadow-xl">
-                      <Block
-                        color={annotation.style.backgroundColor === 'transparent' ? '#000000' : annotation.style.backgroundColor}
-                        colors={colorPalette}
-                        onChange={(color) => {
-                          onStyleChange({ backgroundColor: color.hex });
-                        }}
-                        style={{
-                          borderRadius: '8px',
-                        }}
-                      />
-                      <Button 
-                        variant="ghost" 
-                        size="sm" 
-                        className="w-full mt-2 text-xs h-7 hover:bg-white/5 text-slate-400"
-                        onClick={() => {
-                          onStyleChange({ backgroundColor: 'transparent' });
-                        }}
-                      >
-                        {t('annotations.clearBackground')}
-                      </Button>
-                    </PopoverContent>
-                  </Popover>
-                </div>
-              </div>
-            </div>
-
-
-          </TabsContent>
-
-          {/* Image Upload */}
-          <TabsContent value="image" className="mt-0 space-y-4">
-            <input
-              type="file"
-              ref={fileInputRef}
-              onChange={handleImageUpload}
-              accept=".jpg,.jpeg,.png,.gif,.webp,image/*"
-              className="hidden"
-            />
-            <Button
-              onClick={() => fileInputRef.current?.click()}
-              variant="outline"
-              className="w-full gap-2 bg-white/5 text-slate-200 border-white/10 hover:bg-[#2563EB] hover:text-white hover:border-[#2563EB] transition-all py-8"
-            >
-              <Upload className="w-5 h-5" />
-              {t('annotations.uploadImage')}
-            </Button>
-
-            {annotation.content && annotation.content.startsWith('data:image') && (
-              <div className="rounded-lg border border-white/10 overflow-hidden bg-white/5 p-2">
-                <img
-                  src={annotation.content}
-                  alt="Uploaded annotation"
-                  className="w-full h-auto rounded-md"
-                />
-              </div>
-            )}
-
-            <p className="text-xs text-slate-500 text-center leading-relaxed">
-              {t('annotations.supportedFormats')}
-            </p>
-          </TabsContent>
-
-          <TabsContent value="figure" className="mt-0 space-y-4">
-            <div>
-              <label className="text-xs font-medium text-slate-200 mb-3 block">{t('annotations.arrowDirection')}</label>
-              <div className="grid grid-cols-4 gap-2">
-                {([
-                  'up', 'down', 'left', 'right',
-                  'up-right', 'up-left', 'down-right', 'down-left',
-                ] as ArrowDirection[]).map((direction) => {
-                  const ArrowComponent = getArrowComponent(direction);
-                  return (
-                    <button
-                      key={direction}
-                      onClick={() => {
-                        const newFigureData: FigureData = {
-                          ...annotation.figureData!,
-                          arrowDirection: direction,
-                        };
-                        onFigureDataChange?.(newFigureData);
-                      }}
-                      className={cn(
-                        "h-16 rounded-lg border flex items-center justify-center transition-all p-2",
-                        annotation.figureData?.arrowDirection === direction
-                          ? "bg-[#2563EB] border-[#2563EB]"
-                          : "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20"
-                      )}
-                    >
-                      <ArrowComponent
-                        color={annotation.figureData?.arrowDirection === direction ? "#ffffff" : "#94a3b8"}
-                        strokeWidth={3}
-                      />
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-
-            <div>
-              <label className="text-xs font-medium text-slate-200 mb-2 block">
-                {t('annotations.strokeWidth', undefined, { width: annotation.figureData?.strokeWidth || 4 })}
-              </label>
-              <Slider
-                value={[annotation.figureData?.strokeWidth || 4]}
-                onValueChange={([value]) => {
-                  const newFigureData: FigureData = {
-                    ...annotation.figureData!,
-                    strokeWidth: value,
-                  };
-                  onFigureDataChange?.(newFigureData);
-                }}
-                min={1}
-                max={6}
-                step={1}
-                className="w-full"
-              />
-            </div>
-
-            <div>
-              <label className="text-xs font-medium text-slate-200 mb-2 block">{t('annotations.arrowColor')}</label>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button 
-                    variant="outline" 
-                    className="w-full h-10 justify-start gap-2 bg-white/5 border-white/10 hover:bg-white/10"
-                  >
-                    <div 
-                      className="w-5 h-5 rounded-full border border-white/20" 
-                      style={{ backgroundColor: annotation.figureData?.color || '#2563EB' }}
-                    />
-                    <span className="text-xs text-slate-300 truncate flex-1 text-left">
-                      {annotation.figureData?.color || '#2563EB'}
-                    </span>
-                    <ChevronDown className="h-3 w-3 opacity-50" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-[260px] p-3 bg-[#1a1a1c] border border-white/10 rounded-xl shadow-xl">
-                  <Block
-                    color={annotation.figureData?.color || '#2563EB'}
-                    colors={colorPalette}
-                    onChange={(color) => {
-                      const newFigureData: FigureData = {
-                        ...annotation.figureData!,
-                        color: color.hex,
-                      };
-                      onFigureDataChange?.(newFigureData);
-                    }}
-                    style={{
-                      borderRadius: '8px',
-                    }}
-                  />
-                </PopoverContent>
-              </Popover>
-            </div>
-          </TabsContent>
-        </Tabs>
-
-        <Button
-          onClick={onDelete}
-          variant="destructive"
-          size="sm"
-          className="w-full gap-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all mt-4"
-        >
-          <Trash2 className="w-4 h-4" />
-          {t('annotations.deleteAnnotation')}
-        </Button>
-
-        <div className="mt-6 p-3 bg-white/5 rounded-lg border border-white/5">
-          <div className="flex items-center gap-2 mb-2 text-slate-300">
-            <Info className="w-3.5 h-3.5" />
-            <span className="text-xs font-medium">{t('annotations.shortcutsAndTips')}</span>
-          </div>
-          <ul className="text-[10px] text-slate-400 space-y-1.5 list-disc pl-3 leading-relaxed">
-            <li>{t('annotations.tipSelectAnnotation')}</li>
-            <li>{t('annotations.tipCycleForward')}</li>
-            <li>{t('annotations.tipCycleBackward')}</li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
+	const t = useScopedT("editor");
+	const fileInputRef = useRef<HTMLInputElement>(null);
+	const [customFonts, setCustomFonts] = useState<CustomFont[]>([]);
+
+	const fontFamilies = useMemo(
+		() => FONT_FAMILY_VALUES.map((f) => ({ value: f.value, label: t(f.labelKey) })),
+		[t],
+	);
+
+	// Load custom fonts on mount
+	useEffect(() => {
+		setCustomFonts(getCustomFonts());
+	}, []);
+
+	const colorPalette = [
+		"#FF0000", // Red
+		"#FFD700", // Yellow/Gold
+		"#00FF00", // Green
+		"#FFFFFF", // White
+		"#0000FF", // Blue
+		"#FF6B00", // Orange
+		"#9B59B6", // Purple
+		"#E91E63", // Pink
+		"#00BCD4", // Cyan
+		"#FF5722", // Deep Orange
+		"#8BC34A", // Light Green
+		"#FFC107", // Amber
+		"#2563EB", // Brand Blue
+		"#000000", // Black
+		"#607D8B", // Blue Grey
+		"#795548", // Brown
+	];
+
+	const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const files = event.target.files;
+		if (!files || files.length === 0) return;
+
+		const file = files[0];
+
+		// Validate file type
+		const validTypes = ["image/jpeg", "image/jpg", "image/png", "image/gif", "image/webp"];
+		if (!validTypes.includes(file.type)) {
+			toast.error(t("annotations.imageUploadError"), {
+				description: t("annotations.imageUploadErrorDescription"),
+			});
+			event.target.value = "";
+			return;
+		}
+
+		const reader = new FileReader();
+
+		reader.onload = (e) => {
+			const dataUrl = e.target?.result as string;
+			if (dataUrl) {
+				onContentChange(dataUrl);
+				toast.success(t("annotations.imageUploadSuccess"));
+			}
+		};
+
+		reader.onerror = () => {
+			toast.error(t("annotations.imageUploadFailed"), {
+				description: t("annotations.imageUploadFailedDescription"),
+			});
+		};
+
+		reader.readAsDataURL(file);
+		event.target.value = "";
+	};
+
+	return (
+		<div className="flex-[2] min-w-0 bg-[#161619] border border-white/10 rounded-2xl p-4 flex flex-col shadow-xl h-full overflow-y-auto custom-scrollbar">
+			<div className="mb-6">
+				<div className="flex items-center justify-between mb-4">
+					<span className="text-sm font-medium text-slate-200">{t("annotations.settings")}</span>
+					<span className="text-[10px] uppercase tracking-wider font-medium text-[#2563EB] bg-[#2563EB]/10 px-2 py-1 rounded-full">
+						{t("annotations.active")}
+					</span>
+				</div>
+
+				{/* Type Selector */}
+				<Tabs
+					value={annotation.type}
+					onValueChange={(value) => onTypeChange(value as AnnotationType)}
+					className="mb-6"
+				>
+					<TabsList className="mb-4 bg-white/[0.03] border border-white/[0.06] p-0.5 w-full grid grid-cols-4 h-10 rounded-xl backdrop-blur-sm">
+						<TabsTrigger
+							value="text"
+							className="data-[state=active]:bg-white/[0.08] data-[state=active]:text-[#3B82F6] data-[state=active]:shadow-none text-slate-400 py-1.5 rounded-lg transition-all gap-1.5 text-[11px] font-medium border border-transparent data-[state=active]:border-white/[0.05]"
+						>
+							<Type className="w-3.5 h-3.5" />
+							{t("annotations.text")}
+						</TabsTrigger>
+						<TabsTrigger
+							value="image"
+							className="data-[state=active]:bg-white/[0.08] data-[state=active]:text-[#3B82F6] data-[state=active]:shadow-none text-slate-400 py-1.5 rounded-lg transition-all gap-1.5 text-[11px] font-medium border border-transparent data-[state=active]:border-white/[0.05]"
+						>
+							<ImageIcon className="w-3.5 h-3.5" />
+							{t("annotations.image")}
+						</TabsTrigger>
+						<TabsTrigger
+							value="figure"
+							className="data-[state=active]:bg-white/[0.08] data-[state=active]:text-[#3B82F6] data-[state=active]:shadow-none text-slate-400 py-1.5 rounded-lg transition-all gap-1.5 text-[11px] font-medium border border-transparent data-[state=active]:border-white/[0.05]"
+						>
+							<svg
+								className="w-3.5 h-3.5"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="2.5"
+							>
+								<path d="M4 12h16m0 0l-6-6m6 6l-6 6" strokeLinecap="round" strokeLinejoin="round" />
+							</svg>
+							{t("annotations.arrow")}
+						</TabsTrigger>
+						<TabsTrigger
+							value="blur"
+							className="data-[state=active]:bg-white/[0.08] data-[state=active]:text-[#3B82F6] data-[state=active]:shadow-none text-slate-400 py-1.5 rounded-lg transition-all gap-1.5 text-[11px] font-medium border border-transparent data-[state=active]:border-white/[0.05]"
+						>
+							<svg
+								className="w-3.5 h-3.5"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="2.5"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+							>
+								<circle cx="12" cy="12" r="9" className="opacity-30" />
+								<circle cx="12" cy="12" r="5" className="opacity-60" />
+								<circle cx="12" cy="12" r="1.5" fill="currentColor" />
+							</svg>
+							{t("annotations.blur", "Blur")}
+						</TabsTrigger>
+					</TabsList>
+
+					{/* Text Content */}
+					<TabsContent value="text" className="mt-0 space-y-4">
+						<div>
+							<label className="text-xs font-medium text-slate-200 mb-2 block">
+								{t("annotations.textContent")}
+							</label>
+							<textarea
+								value={annotation.textContent || annotation.content}
+								onChange={(e) => onContentChange(e.target.value)}
+								placeholder={t("annotations.textPlaceholder")}
+								rows={5}
+								className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-slate-200 text-sm placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-[#2563EB] focus:border-transparent resize-none"
+							/>
+						</div>
+
+						{/* Styling Controls */}
+						<div className="space-y-4">
+							{/* Font Family & Size */}
+							<div className="grid grid-cols-2 gap-2">
+								<div>
+									<label className="text-xs font-medium text-slate-200 mb-2 block">
+										{t("annotations.fontStyle")}
+									</label>
+									<Select
+										value={annotation.style.fontFamily}
+										onValueChange={(value) => onStyleChange({ fontFamily: value })}
+									>
+										<SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 h-9 text-xs">
+											<SelectValue placeholder={t("annotations.selectStyle")} />
+										</SelectTrigger>
+										<SelectContent className="bg-[#1a1a1c] border-white/10 text-slate-200 max-h-[300px]">
+											{fontFamilies.map((font) => (
+												<SelectItem
+													key={font.value}
+													value={font.value}
+													style={{ fontFamily: font.value }}
+												>
+													{font.label}
+												</SelectItem>
+											))}
+											{customFonts.length > 0 && (
+												<>
+													<div className="px-2 py-1.5 text-[10px] font-medium text-slate-400 uppercase tracking-wider">
+														Custom Fonts
+													</div>
+													{customFonts.map((font) => (
+														<SelectItem
+															key={font.id}
+															value={font.fontFamily}
+															style={{ fontFamily: font.fontFamily }}
+														>
+															{font.name}
+														</SelectItem>
+													))}
+												</>
+											)}
+										</SelectContent>
+									</Select>
+								</div>
+								<div>
+									<label className="text-xs font-medium text-slate-200 mb-2 block">
+										{t("annotations.size")}
+									</label>
+									<Select
+										value={annotation.style.fontSize.toString()}
+										onValueChange={(value) => onStyleChange({ fontSize: parseInt(value) })}
+									>
+										<SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 h-9 text-xs">
+											<SelectValue placeholder={t("annotations.size")} />
+										</SelectTrigger>
+										<SelectContent className="bg-[#1a1a1c] border-white/10 text-slate-200 max-h-[200px]">
+											{FONT_SIZES.map((size) => (
+												<SelectItem key={size} value={size.toString()}>
+													{size}px
+												</SelectItem>
+											))}
+										</SelectContent>
+									</Select>
+								</div>
+							</div>
+
+							{/* Add Custom Font Button */}
+							<div>
+								<AddCustomFontDialog
+									onFontAdded={(font) => {
+										setCustomFonts(getCustomFonts());
+										onStyleChange({ fontFamily: font.fontFamily });
+									}}
+								/>
+							</div>
+
+							{/* Formatting Toggles */}
+							<div className="flex items-center justify-between gap-2">
+								<ToggleGroup
+									type="multiple"
+									className="justify-start bg-white/5 p-1 rounded-lg border border-white/5"
+								>
+									<ToggleGroupItem
+										value="bold"
+										aria-label={t("annotations.toggleBold")}
+										data-state={annotation.style.fontWeight === "bold" ? "on" : "off"}
+										onClick={() =>
+											onStyleChange({
+												fontWeight: annotation.style.fontWeight === "bold" ? "normal" : "bold",
+											})
+										}
+										className="h-8 w-8 data-[state=on]:bg-[#2563EB] data-[state=on]:text-white text-slate-400 hover:bg-white/5 hover:text-slate-200"
+									>
+										<Bold className="h-4 w-4" />
+									</ToggleGroupItem>
+									<ToggleGroupItem
+										value="italic"
+										aria-label={t("annotations.toggleItalic")}
+										data-state={annotation.style.fontStyle === "italic" ? "on" : "off"}
+										onClick={() =>
+											onStyleChange({
+												fontStyle: annotation.style.fontStyle === "italic" ? "normal" : "italic",
+											})
+										}
+										className="h-8 w-8 data-[state=on]:bg-[#2563EB] data-[state=on]:text-white text-slate-400 hover:bg-white/5 hover:text-slate-200"
+									>
+										<Italic className="h-4 w-4" />
+									</ToggleGroupItem>
+									<ToggleGroupItem
+										value="underline"
+										aria-label={t("annotations.toggleUnderline")}
+										data-state={annotation.style.textDecoration === "underline" ? "on" : "off"}
+										onClick={() =>
+											onStyleChange({
+												textDecoration:
+													annotation.style.textDecoration === "underline" ? "none" : "underline",
+											})
+										}
+										className="h-8 w-8 data-[state=on]:bg-[#2563EB] data-[state=on]:text-white text-slate-400 hover:bg-white/5 hover:text-slate-200"
+									>
+										<Underline className="h-4 w-4" />
+									</ToggleGroupItem>
+								</ToggleGroup>
+
+								<ToggleGroup
+									type="single"
+									value={annotation.style.textAlign}
+									className="justify-start bg-white/5 p-1 rounded-lg border border-white/5"
+								>
+									<ToggleGroupItem
+										value="left"
+										aria-label={t("annotations.alignLeft")}
+										onClick={() => onStyleChange({ textAlign: "left" })}
+										className="h-8 w-8 data-[state=on]:bg-[#2563EB] data-[state=on]:text-white text-slate-400 hover:bg-white/5 hover:text-slate-200"
+									>
+										<AlignLeft className="h-4 w-4" />
+									</ToggleGroupItem>
+									<ToggleGroupItem
+										value="center"
+										aria-label={t("annotations.alignCenter")}
+										onClick={() => onStyleChange({ textAlign: "center" })}
+										className="h-8 w-8 data-[state=on]:bg-[#2563EB] data-[state=on]:text-white text-slate-400 hover:bg-white/5 hover:text-slate-200"
+									>
+										<AlignCenter className="h-4 w-4" />
+									</ToggleGroupItem>
+									<ToggleGroupItem
+										value="right"
+										aria-label={t("annotations.alignRight")}
+										onClick={() => onStyleChange({ textAlign: "right" })}
+										className="h-8 w-8 data-[state=on]:bg-[#2563EB] data-[state=on]:text-white text-slate-400 hover:bg-white/5 hover:text-slate-200"
+									>
+										<AlignRight className="h-4 w-4" />
+									</ToggleGroupItem>
+								</ToggleGroup>
+							</div>
+
+							{/* Colors */}
+							<div className="grid grid-cols-2 gap-4">
+								<div>
+									<label className="text-xs font-medium text-slate-200 mb-2 block">
+										{t("annotations.textColor")}
+									</label>
+									<Popover>
+										<PopoverTrigger asChild>
+											<Button
+												variant="outline"
+												className="w-full h-9 justify-start gap-2 bg-white/5 border-white/10 hover:bg-white/10 px-2"
+											>
+												<div
+													className="w-4 h-4 rounded-full border border-white/20"
+													style={{ backgroundColor: annotation.style.color }}
+												/>
+												<span className="text-xs text-slate-300 truncate flex-1 text-left">
+													{annotation.style.color}
+												</span>
+												<ChevronDown className="h-3 w-3 opacity-50" />
+											</Button>
+										</PopoverTrigger>
+										<PopoverContent className="w-[260px] p-3 bg-[#1a1a1c] border border-white/10 rounded-xl shadow-xl">
+											<Block
+												color={annotation.style.color}
+												colors={colorPalette}
+												onChange={(color) => {
+													onStyleChange({ color: color.hex });
+												}}
+												style={{
+													borderRadius: "8px",
+												}}
+											/>
+										</PopoverContent>
+									</Popover>
+								</div>
+								<div>
+									<label className="text-xs font-medium text-slate-200 mb-2 block">
+										{t("annotations.background")}
+									</label>
+									<Popover>
+										<PopoverTrigger asChild>
+											<Button
+												variant="outline"
+												className="w-full h-9 justify-start gap-2 bg-white/5 border-white/10 hover:bg-white/10 px-2"
+											>
+												<div className="w-4 h-4 rounded-full border border-white/20 relative overflow-hidden">
+													<div className="absolute inset-0 checkerboard-bg opacity-50" />
+													<div
+														className="absolute inset-0"
+														style={{ backgroundColor: annotation.style.backgroundColor }}
+													/>
+												</div>
+												<span className="text-xs text-slate-300 truncate flex-1 text-left">
+													{annotation.style.backgroundColor === "transparent"
+														? t("annotations.none")
+														: "Color"}
+												</span>
+												<ChevronDown className="h-3 w-3 opacity-50" />
+											</Button>
+										</PopoverTrigger>
+										<PopoverContent className="w-[260px] p-3 bg-[#1a1a1c] border border-white/10 rounded-xl shadow-xl">
+											<Block
+												color={
+													annotation.style.backgroundColor === "transparent"
+														? "#000000"
+														: annotation.style.backgroundColor
+												}
+												colors={colorPalette}
+												onChange={(color) => {
+													onStyleChange({ backgroundColor: color.hex });
+												}}
+												style={{
+													borderRadius: "8px",
+												}}
+											/>
+											<Button
+												variant="ghost"
+												size="sm"
+												className="w-full mt-2 text-xs h-7 hover:bg-white/5 text-slate-400"
+												onClick={() => {
+													onStyleChange({ backgroundColor: "transparent" });
+												}}
+											>
+												{t("annotations.clearBackground")}
+											</Button>
+										</PopoverContent>
+									</Popover>
+								</div>
+							</div>
+						</div>
+					</TabsContent>
+
+					{/* Image Upload */}
+					<TabsContent value="image" className="mt-0 space-y-4">
+						<input
+							type="file"
+							ref={fileInputRef}
+							onChange={handleImageUpload}
+							accept=".jpg,.jpeg,.png,.gif,.webp,image/*"
+							className="hidden"
+						/>
+						<Button
+							onClick={() => fileInputRef.current?.click()}
+							variant="outline"
+							className="w-full gap-2 bg-white/5 text-slate-200 border-white/10 hover:bg-[#2563EB] hover:text-white hover:border-[#2563EB] transition-all py-8"
+						>
+							<Upload className="w-5 h-5" />
+							{t("annotations.uploadImage")}
+						</Button>
+
+						{annotation.content && annotation.content.startsWith("data:image") && (
+							<div className="rounded-lg border border-white/10 overflow-hidden bg-white/5 p-2">
+								<img
+									src={annotation.content}
+									alt="Uploaded annotation"
+									className="w-full h-auto rounded-md"
+								/>
+							</div>
+						)}
+
+						<p className="text-xs text-slate-500 text-center leading-relaxed">
+							{t("annotations.supportedFormats")}
+						</p>
+					</TabsContent>
+
+					<TabsContent value="figure" className="mt-0 space-y-4">
+						<div>
+							<label className="text-xs font-medium text-slate-200 mb-3 block">
+								{t("annotations.arrowDirection")}
+							</label>
+							<div className="grid grid-cols-4 gap-2">
+								{(
+									[
+										"up",
+										"down",
+										"left",
+										"right",
+										"up-right",
+										"up-left",
+										"down-right",
+										"down-left",
+									] as ArrowDirection[]
+								).map((direction) => {
+									const ArrowComponent = getArrowComponent(direction);
+									return (
+										<button
+											key={direction}
+											onClick={() => {
+												const newFigureData: FigureData = {
+													...annotation.figureData!,
+													arrowDirection: direction,
+												};
+												onFigureDataChange?.(newFigureData);
+											}}
+											className={cn(
+												"h-16 rounded-lg border flex items-center justify-center transition-all p-2",
+												annotation.figureData?.arrowDirection === direction
+													? "bg-[#2563EB] border-[#2563EB]"
+													: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20",
+											)}
+										>
+											<ArrowComponent
+												color={
+													annotation.figureData?.arrowDirection === direction
+														? "#ffffff"
+														: "#94a3b8"
+												}
+												strokeWidth={3}
+											/>
+										</button>
+									);
+								})}
+							</div>
+						</div>
+
+						<div>
+							<label className="text-xs font-medium text-slate-200 mb-2 block">
+								{t("annotations.strokeWidth", undefined, {
+									width: annotation.figureData?.strokeWidth || 4,
+								})}
+							</label>
+							<Slider
+								value={[annotation.figureData?.strokeWidth || 4]}
+								onValueChange={([value]) => {
+									const newFigureData: FigureData = {
+										...annotation.figureData!,
+										strokeWidth: value,
+									};
+									onFigureDataChange?.(newFigureData);
+								}}
+								min={1}
+								max={6}
+								step={1}
+								className="w-full"
+							/>
+						</div>
+
+						<div>
+							<label className="text-xs font-medium text-slate-200 mb-2 block">
+								{t("annotations.arrowColor")}
+							</label>
+							<Popover>
+								<PopoverTrigger asChild>
+									<Button
+										variant="outline"
+										className="w-full h-10 justify-start gap-2 bg-white/5 border-white/10 hover:bg-white/10"
+									>
+										<div
+											className="w-5 h-5 rounded-full border border-white/20"
+											style={{ backgroundColor: annotation.figureData?.color || "#2563EB" }}
+										/>
+										<span className="text-xs text-slate-300 truncate flex-1 text-left">
+											{annotation.figureData?.color || "#2563EB"}
+										</span>
+										<ChevronDown className="h-3 w-3 opacity-50" />
+									</Button>
+								</PopoverTrigger>
+								<PopoverContent className="w-[260px] p-3 bg-[#1a1a1c] border border-white/10 rounded-xl shadow-xl">
+									<Block
+										color={annotation.figureData?.color || "#2563EB"}
+										colors={colorPalette}
+										onChange={(color) => {
+											const newFigureData: FigureData = {
+												...annotation.figureData!,
+												color: color.hex,
+											};
+											onFigureDataChange?.(newFigureData);
+										}}
+										style={{
+											borderRadius: "8px",
+										}}
+									/>
+								</PopoverContent>
+							</Popover>
+						</div>
+					</TabsContent>
+					<TabsContent value="blur" className="mt-0 space-y-4">
+						<div className="bg-white/[0.03] border border-white/[0.06] rounded-xl p-4 shadow-sm">
+							<div className="flex items-center justify-between mb-4">
+								<label className="text-xs font-semibold text-slate-200 uppercase tracking-widest opacity-80">
+									{t("annotations.blurIntensity", "Intensity")}
+								</label>
+								<span className="text-xs font-mono font-bold text-[#3B82F6] bg-[#3B82F6]/10 px-2 py-0.5 rounded-md border border-[#3B82F6]/20">
+									{annotation.blurIntensity ?? 12}%
+								</span>
+							</div>
+							<Slider
+								value={[annotation.blurIntensity ?? 12]}
+								onValueChange={([value]) => {
+									onBlurIntensityChange?.(value);
+								}}
+								min={1}
+								max={100}
+								step={1}
+								className="w-full"
+							/>
+							<p className="text-[10px] text-slate-500 mt-4 leading-relaxed font-medium">
+								{t(
+									"annotations.blurDescription",
+									"Obscure sensitive information by blurring the underlying video content.",
+								)}
+							</p>
+						</div>
+					</TabsContent>
+				</Tabs>
+
+				<Button
+					onClick={onDelete}
+					variant="destructive"
+					size="sm"
+					className="w-full gap-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all mt-4"
+				>
+					<Trash2 className="w-4 h-4" />
+					{t("annotations.deleteAnnotation")}
+				</Button>
+
+				<div className="mt-6 p-3 bg-white/5 rounded-lg border border-white/5">
+					<div className="flex items-center gap-2 mb-2 text-slate-300">
+						<Info className="w-3.5 h-3.5" />
+						<span className="text-xs font-medium">{t("annotations.shortcutsAndTips")}</span>
+					</div>
+					<ul className="text-[10px] text-slate-400 space-y-1.5 list-disc pl-3 leading-relaxed">
+						<li>{t("annotations.tipSelectAnnotation")}</li>
+						<li>{t("annotations.tipCycleForward")}</li>
+						<li>{t("annotations.tipCycleBackward")}</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	);
 }
-
diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index c8c22f78..c033f91c 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -15,7 +15,11 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { getAssetPath, getRenderableAssetUrl } from "@/lib/assetPath";
 import { cn } from "@/lib/utils";
 import type { BuiltInWallpaper } from "@/lib/wallpapers";
-import { BUILT_IN_WALLPAPERS, getAvailableWallpapers, isVideoWallpaperSource } from "@/lib/wallpapers";
+import {
+	BUILT_IN_WALLPAPERS,
+	getAvailableWallpapers,
+	isVideoWallpaperSource,
+} from "@/lib/wallpapers";
 import { type AspectRatio } from "@/utils/aspectRatioUtils";
 import minimalCursorUrl from "../../../Minimal Cursor.svg";
 import amongusCursorUrl from "../../assets/cursors/amongus/default.png";
@@ -216,6 +220,7 @@ interface SettingsPanelProps {
 	onAnnotationTypeChange?: (id: string, type: AnnotationType) => void;
 	onAnnotationStyleChange?: (id: string, style: Partial<AnnotationRegion["style"]>) => void;
 	onAnnotationFigureDataChange?: (id: string, figureData: FigureData) => void;
+	onAnnotationBlurIntensityChange?: (id: string, intensity: number) => void;
 	onAnnotationDelete?: (id: string) => void;
 	autoCaptions?: CaptionCue[];
 	autoCaptionSettings?: AutoCaptionSettings;
@@ -557,6 +562,7 @@ export function SettingsPanel({
 	onAnnotationTypeChange,
 	onAnnotationStyleChange,
 	onAnnotationFigureDataChange,
+	onAnnotationBlurIntensityChange,
 	onAnnotationDelete,
 	autoCaptions = [],
 	autoCaptionSettings = DEFAULT_AUTO_CAPTION_SETTINGS,
@@ -809,8 +815,16 @@ export function SettingsPanel({
 						preload="metadata"
 						className="h-full w-full select-none object-cover [transform:translateZ(0)]"
 						draggable={false}
-						onMouseEnter={(e) => e.currentTarget.play().catch(() => {})}
-						onMouseLeave={(e) => { e.currentTarget.pause(); e.currentTarget.currentTime = 0; }}
+						onMouseEnter={(e) =>
+							e.currentTarget.play().catch((err: unknown) => {
+								if (err instanceof DOMException && err.name === "AbortError") return;
+								console.warn("Hover play fail:", err);
+							})
+						}
+						onMouseLeave={(e) => {
+							e.currentTarget.pause();
+							e.currentTarget.currentTime = 0;
+						}}
 					/>
 				) : (
 					<img
@@ -829,7 +843,6 @@ export function SettingsPanel({
 		</div>
 	);
 
-
 	const handleDeleteClick = () => {
 		if (selectedZoomId && onZoomDelete) {
 			onZoomDelete(selectedZoomId);
@@ -988,11 +1001,17 @@ export function SettingsPanel({
 
 	const handleVideoUpload = async () => {
 		try {
-			const result = await (window as any).electronAPI.openVideoFilePicker();
+			const result = await (
+				window as unknown as {
+					electronAPI: { openVideoFilePicker: () => Promise<{ success: boolean; path?: string }> };
+				}
+			).electronAPI.openVideoFilePicker();
 			if (!result?.success || !result.path) return;
 			const filePath = result.path as string;
 			if (!isVideoWallpaperSource(filePath)) {
-				toast.error("Unsupported format", { description: "Please select a video file (mp4, webm, mov, etc.)" });
+				toast.error("Unsupported format", {
+					description: "Please select a video file (mp4, webm, mov, etc.)",
+				});
 				return;
 			}
 			setCustomImages((prev) => [filePath, ...prev]);
@@ -1116,7 +1135,8 @@ export function SettingsPanel({
 											return renderWallpaperImageTile(imageUrl, isSelected, {
 												key: `custom-${idx}`,
 												ariaLabel: isVideoWallpaperSource(imageUrl)
-													? imageUrl.split(/[\\/]/).pop() ?? tSettings("background.video", "Video background")
+													? (imageUrl.split(/[\\/]/).pop() ??
+														tSettings("background.video", "Video background"))
 													: undefined,
 												title: isVideoWallpaperSource(imageUrl)
 													? imageUrl.split(/[\\/]/).pop()
@@ -1136,19 +1156,22 @@ export function SettingsPanel({
 										{(wallpaperPreviewPaths.length > 0
 											? wallpaperPreviewPaths
 											: builtInWallpaperPaths
-										).filter(p => !isVideoWallpaperSource(p)).map((previewPath, filteredIndex) => {
-											const imageWallpapers = builtInWallpapers.filter(w => !isVideoWallpaperSource(w.publicPath));
-											const wallpaper = imageWallpapers[filteredIndex];
-											const wallpaperValue =
-												wallpaper?.publicPath ?? previewPath;
-											const isSelected = getWallpaperTileState(wallpaperValue, previewPath);
-											return renderWallpaperImageTile(previewPath, isSelected, {
-												key: wallpaperValue,
-												ariaLabel: wallpaper?.label ?? `Wallpaper ${filteredIndex + 1}`,
-												title: wallpaper?.label ?? `Wallpaper ${filteredIndex + 1}`,
-												onClick: () => onWallpaperChange(wallpaperValue),
-											});
-										})}
+										)
+											.filter((p) => !isVideoWallpaperSource(p))
+											.map((previewPath, filteredIndex) => {
+												const imageWallpapers = builtInWallpapers.filter(
+													(w) => !isVideoWallpaperSource(w.publicPath),
+												);
+												const wallpaper = imageWallpapers[filteredIndex];
+												const wallpaperValue = wallpaper?.publicPath ?? previewPath;
+												const isSelected = getWallpaperTileState(wallpaperValue, previewPath);
+												return renderWallpaperImageTile(previewPath, isSelected, {
+													key: wallpaperValue,
+													ariaLabel: wallpaper?.label ?? `Wallpaper ${filteredIndex + 1}`,
+													title: wallpaper?.label ?? `Wallpaper ${filteredIndex + 1}`,
+													onClick: () => onWallpaperChange(wallpaperValue),
+												});
+											})}
 									</div>
 								</div>
 							) : backgroundTab === "video" ? (
@@ -1181,16 +1204,18 @@ export function SettingsPanel({
 											});
 										})}
 
-										{BUILT_IN_WALLPAPERS.filter(w => isVideoWallpaperSource(w.publicPath)).map((wallpaper) => {
-											const wallpaperValue = wallpaper.publicPath;
-											const isSelected = selected === wallpaperValue;
-											return renderWallpaperImageTile(wallpaperValue, isSelected, {
-												key: wallpaperValue,
-												ariaLabel: wallpaper.label,
-												title: wallpaper.label,
-												onClick: () => onWallpaperChange(wallpaperValue),
-											});
-										})}
+										{BUILT_IN_WALLPAPERS.filter((w) => isVideoWallpaperSource(w.publicPath)).map(
+											(wallpaper) => {
+												const wallpaperValue = wallpaper.publicPath;
+												const isSelected = selected === wallpaperValue;
+												return renderWallpaperImageTile(wallpaperValue, isSelected, {
+													key: wallpaperValue,
+													ariaLabel: wallpaper.label,
+													title: wallpaper.label,
+													onClick: () => onWallpaperChange(wallpaperValue),
+												});
+											},
+										)}
 									</div>
 								</div>
 							) : backgroundTab === "color" ? (
@@ -1278,15 +1303,20 @@ export function SettingsPanel({
 		return (
 			<AnnotationSettingsPanel
 				annotation={selectedAnnotation}
-				onContentChange={(content) => onAnnotationContentChange(selectedAnnotation.id, content)}
-				onTypeChange={(type) => onAnnotationTypeChange(selectedAnnotation.id, type)}
-				onStyleChange={(style) => onAnnotationStyleChange(selectedAnnotation.id, style)}
+				onContentChange={(content) => onAnnotationContentChange?.(selectedAnnotation.id, content)}
+				onTypeChange={(type) => onAnnotationTypeChange?.(selectedAnnotation.id, type)}
+				onStyleChange={(style) => onAnnotationStyleChange?.(selectedAnnotation.id, style)}
 				onFigureDataChange={
 					onAnnotationFigureDataChange
 						? (figureData) => onAnnotationFigureDataChange(selectedAnnotation.id, figureData)
 						: undefined
 				}
-				onDelete={() => onAnnotationDelete(selectedAnnotation.id)}
+				onBlurIntensityChange={
+					onAnnotationBlurIntensityChange
+						? (intensity) => onAnnotationBlurIntensityChange(selectedAnnotation.id, intensity)
+						: undefined
+				}
+				onDelete={() => onAnnotationDelete?.(selectedAnnotation.id)}
 			/>
 		);
 	}
@@ -2044,7 +2074,10 @@ export function SettingsPanel({
 
 	return (
 		<div className="flex-[2] w-[332px] min-w-[280px] max-w-[332px] bg-[#161619] border border-white/10 rounded-2xl flex flex-col shadow-xl h-full overflow-hidden">
-			<div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar p-4 pb-0" style={{ scrollbarGutter: 'stable' }}>
+			<div
+				className="flex-1 min-h-0 overflow-y-auto custom-scrollbar p-4 pb-0"
+				style={{ scrollbarGutter: "stable" }}
+			>
 				<AnimatePresence mode="wait" initial={false}>
 					<motion.div
 						key={activeEffectSection}
@@ -2058,10 +2091,12 @@ export function SettingsPanel({
 				</AnimatePresence>
 			</div>
 
-			<div className={cn(
-				"flex-shrink-0 border-t border-white/10 bg-[#151518] p-4 pt-3",
-				!selectedZoomId && !selectedTrimId && !selectedSpeedId && !selectedClipId && "hidden"
-			)}>
+			<div
+				className={cn(
+					"flex-shrink-0 border-t border-white/10 bg-[#151518] p-4 pt-3",
+					!selectedZoomId && !selectedTrimId && !selectedSpeedId && !selectedClipId && "hidden",
+				)}
+			>
 				{selectedZoomId && (
 					<div className="mb-4">
 						<div className="mb-3 flex items-center justify-between">
@@ -2217,6 +2252,5 @@ export function SettingsPanel({
 				)}
 			</div>
 		</div>
-
 	);
 }
diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index a591d442..04f3d28c 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -69,18 +69,18 @@ import {
 	KeyboardShortcutsDialog,
 } from "./TutorialHelp";
 import TimelineEditor from "./timeline/TimelineEditor";
-import {
-	normalizeCursorTelemetry,
-} from "./timeline/zoomSuggestionUtils";
+import { normalizeCursorTelemetry } from "./timeline/zoomSuggestionUtils";
 import {
 	type AnnotationRegion,
 	type AudioRegion,
 	type AutoCaptionSettings,
 	type CaptionCue,
+	type ClipRegion,
 	type CropRegion,
 	type CursorStyle,
 	type CursorTelemetryPoint,
 	clampFocusToDepth,
+	clipsToTrims,
 	DEFAULT_ANNOTATION_POSITION,
 	DEFAULT_ANNOTATION_SIZE,
 	DEFAULT_ANNOTATION_STYLE,
@@ -103,8 +103,6 @@ import {
 	type PlaybackSpeed,
 	type SpeedRegion,
 	type TrimRegion,
-	type ClipRegion,
-	clipsToTrims,
 	type WebcamOverlaySettings,
 	type ZoomDepth,
 	type ZoomFocus,
@@ -1183,8 +1181,12 @@ export default function VideoEditor() {
 			setWebcam(normalizedEditor.webcam);
 			setZoomRegions(normalizedEditor.zoomRegions);
 			setTrimRegions(normalizedEditor.trimRegions);
-			setClipRegions((normalizedEditor as any).clipRegions ?? []);
-			clipInitializedRef.current = ((normalizedEditor as any).clipRegions ?? []).length > 0;
+			setClipRegions(
+				(normalizedEditor as unknown as { clipRegions?: ClipRegion[] }).clipRegions ?? [],
+			);
+			clipInitializedRef.current =
+				((normalizedEditor as unknown as { clipRegions?: ClipRegion[] }).clipRegions ?? []).length >
+				0;
 			setSpeedRegions(normalizedEditor.speedRegions);
 			setAnnotationRegions(normalizedEditor.annotationRegions);
 			setAudioRegions(normalizedEditor.audioRegions);
@@ -1214,7 +1216,9 @@ export default function VideoEditor() {
 			);
 			nextClipIdRef.current = deriveNextId(
 				"clip",
-				((normalizedEditor as any).clipRegions ?? []).map((region: ClipRegion) => region.id),
+				((normalizedEditor as unknown as { clipRegions?: ClipRegion[] }).clipRegions ?? []).map(
+					(region: ClipRegion) => region.id,
+				),
 			);
 			nextSpeedIdRef.current = deriveNextId(
 				"speed",
@@ -1835,10 +1839,7 @@ export default function VideoEditor() {
 				console.warn("Unable to load cursor telemetry:", telemetryError);
 				if (mounted) {
 					setCursorTelemetry([]);
-					if (
-						pendingFreshRecordingAutoZoomPathRef.current === videoPath &&
-						retryAttempts < 12
-					) {
+					if (pendingFreshRecordingAutoZoomPathRef.current === videoPath && retryAttempts < 12) {
 						retryAttempts += 1;
 						pendingTelemetryRetryTimeoutRef.current = window.setTimeout(() => {
 							pendingTelemetryRetryTimeoutRef.current = null;
@@ -1949,7 +1950,15 @@ export default function VideoEditor() {
 		autoSuggestedVideoPathRef.current = videoPath;
 		pendingFreshRecordingAutoZoomPathRef.current = null;
 		setAutoSuggestZoomsTrigger((value) => value + 1);
-	}, [videoPath, loading, isPreviewReady, duration, effectiveCursorTelemetry.length, loopCursor, zoomRegions.length]);
+	}, [
+		videoPath,
+		loading,
+		isPreviewReady,
+		duration,
+		effectiveCursorTelemetry.length,
+		loopCursor,
+		zoomRegions.length,
+	]);
 
 	function togglePlayPause() {
 		const playback = videoPlaybackRef.current;
@@ -2130,67 +2139,69 @@ export default function VideoEditor() {
 		}
 	}, []);
 
-	const handleClipSplit = useCallback(
-		(splitMs: number) => {
-			setClipRegions((prev) => {
-				const target = prev.find((c) => splitMs > c.startMs && splitMs < c.endMs);
-				if (!target) return prev;
-				const leftId = `clip-${nextClipIdRef.current++}`;
-				const rightId = `clip-${nextClipIdRef.current++}`;
-				const left: ClipRegion = { id: leftId, startMs: target.startMs, endMs: Math.round(splitMs), speed: target.speed };
-				const right: ClipRegion = { id: rightId, startMs: Math.round(splitMs), endMs: target.endMs, speed: target.speed };
-				return prev.flatMap((c) => (c.id === target.id ? [left, right] : [c]));
-			});
-		},
-		[],
-	);
+	const handleClipSplit = useCallback((splitMs: number) => {
+		setClipRegions((prev) => {
+			const target = prev.find((c) => splitMs > c.startMs && splitMs < c.endMs);
+			if (!target) return prev;
+			const leftId = `clip-${nextClipIdRef.current++}`;
+			const rightId = `clip-${nextClipIdRef.current++}`;
+			const left: ClipRegion = {
+				id: leftId,
+				startMs: target.startMs,
+				endMs: Math.round(splitMs),
+				speed: target.speed,
+			};
+			const right: ClipRegion = {
+				id: rightId,
+				startMs: Math.round(splitMs),
+				endMs: target.endMs,
+				speed: target.speed,
+			};
+			return prev.flatMap((c) => (c.id === target.id ? [left, right] : [c]));
+		});
+	}, []);
 
-	const handleClipSpanChange = useCallback((id: string, span: Span) => {
-		const oldClip = clipRegions.find((c) => c.id === id);
-		const newStart = Math.round(span.start);
-		const newEnd = Math.round(span.end);
-
-		if (oldClip) {
-			const startDelta = newStart - oldClip.startMs;
-			const endDelta = newEnd - oldClip.endMs;
-			const isMove = Math.abs(startDelta - endDelta) < 1 && Math.abs(startDelta) > 0;
-
-			if (isMove) {
-				const delta = startDelta;
-				setZoomRegions((prev) =>
-					prev.map((zoom) => {
-						const overlaps = zoom.startMs < oldClip.endMs && zoom.endMs > oldClip.startMs;
-						if (overlaps) {
-							return {
-								...zoom,
-								startMs: zoom.startMs + delta,
-								endMs: zoom.endMs + delta,
-							};
-						}
-						return zoom;
-					}),
-				);
+	const handleClipSpanChange = useCallback(
+		(id: string, span: Span) => {
+			const oldClip = clipRegions.find((c) => c.id === id);
+			const newStart = Math.round(span.start);
+			const newEnd = Math.round(span.end);
+
+			if (oldClip) {
+				const startDelta = newStart - oldClip.startMs;
+				const endDelta = newEnd - oldClip.endMs;
+				const isMove = Math.abs(startDelta - endDelta) < 1 && Math.abs(startDelta) > 0;
+
+				if (isMove) {
+					const delta = startDelta;
+					setZoomRegions((prev) =>
+						prev.map((zoom) => {
+							const overlaps = zoom.startMs < oldClip.endMs && zoom.endMs > oldClip.startMs;
+							if (overlaps) {
+								return {
+									...zoom,
+									startMs: zoom.startMs + delta,
+									endMs: zoom.endMs + delta,
+								};
+							}
+							return zoom;
+						}),
+					);
+				}
 			}
-		}
 
-		setClipRegions((prev) =>
-			prev.map((clip) =>
-				clip.id === id
-					? { ...clip, startMs: newStart, endMs: newEnd }
-					: clip,
-			),
-		);
-	}, [clipRegions]);
+			setClipRegions((prev) =>
+				prev.map((clip) => (clip.id === id ? { ...clip, startMs: newStart, endMs: newEnd } : clip)),
+			);
+		},
+		[clipRegions],
+	);
 
 	const handleClipSpeedChange = useCallback(
 		(speed: number) => {
 			if (!selectedClipId) return;
 			setClipRegions((prev) =>
-				prev.map((clip) =>
-					clip.id === selectedClipId
-						? { ...clip, speed }
-						: clip,
-				),
+				prev.map((clip) => (clip.id === selectedClipId ? { ...clip, speed } : clip)),
 			);
 		},
 		[selectedClipId],
@@ -2395,6 +2406,11 @@ export default function VideoEditor() {
 					if (!region.figureData) {
 						updatedRegion.figureData = { ...DEFAULT_FIGURE_DATA };
 					}
+				} else if (type === "blur") {
+					updatedRegion.content = "Blur Region";
+					if (updatedRegion.blurIntensity === undefined) {
+						updatedRegion.blurIntensity = 12;
+					}
 				}
 
 				return updatedRegion;
@@ -2420,6 +2436,12 @@ export default function VideoEditor() {
 		);
 	}, []);
 
+	const handleAnnotationBlurIntensityChange = useCallback((id: string, blurIntensity: number) => {
+		setAnnotationRegions((prev) =>
+			prev.map((region) => (region.id === id ? { ...region, blurIntensity } : region)),
+		);
+	}, []);
+
 	const handleAnnotationPositionChange = useCallback(
 		(id: string, position: { x: number; y: number }) => {
 			setAnnotationRegions((prev) =>
@@ -3812,6 +3834,7 @@ export default function VideoEditor() {
 						onAnnotationTypeChange={handleAnnotationTypeChange}
 						onAnnotationStyleChange={handleAnnotationStyleChange}
 						onAnnotationFigureDataChange={handleAnnotationFigureDataChange}
+						onAnnotationBlurIntensityChange={handleAnnotationBlurIntensityChange}
 						onAnnotationDelete={handleAnnotationDelete}
 						selectedSpeedId={selectedSpeedId}
 						selectedSpeedValue={
diff --git a/src/components/video-editor/VideoPlayback.tsx b/src/components/video-editor/VideoPlayback.tsx
index 9c9691fa..cd24a8fd 100644
--- a/src/components/video-editor/VideoPlayback.tsx
+++ b/src/components/video-editor/VideoPlayback.tsx
@@ -1,1870 +1,1826 @@
+import {
+	Application,
+	BlurFilter,
+	Container,
+	Graphics,
+	Sprite,
+	Texture,
+	VideoSource,
+} from "pixi.js";
+import { MotionBlurFilter } from "pixi-filters/motion-blur";
 import type React from "react";
 import {
-  useEffect,
-  useRef,
-  useImperativeHandle,
-  forwardRef,
-  useState,
-  useMemo,
-  useCallback,
+	forwardRef,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useMemo,
+	useRef,
+	useState,
 } from "react";
 import { getAssetPath, getRenderableAssetUrl } from "@/lib/assetPath";
+import { getSquircleSvgPath } from "@/lib/geometry/squircle";
 import { clampMediaTimeToDuration } from "@/lib/mediaTiming";
 import {
-  DEFAULT_WALLPAPER_PATH,
-  DEFAULT_WALLPAPER_RELATIVE_PATH,
-  isVideoWallpaperSource,
+	DEFAULT_WALLPAPER_PATH,
+	DEFAULT_WALLPAPER_RELATIVE_PATH,
+	isVideoWallpaperSource,
 } from "@/lib/wallpapers";
+import { type AspectRatio, formatAspectRatioForCSS } from "@/utils/aspectRatioUtils";
+import { AnnotationOverlay } from "./AnnotationOverlay";
+import { buildActiveCaptionLayout } from "./captionLayout";
 import {
-  Application,
-  Container,
-  Sprite,
-  Graphics,
-  BlurFilter,
-  Texture,
-  VideoSource,
-} from "pixi.js";
-import { MotionBlurFilter } from "pixi-filters/motion-blur";
+	CAPTION_FONT_WEIGHT,
+	CAPTION_LINE_HEIGHT,
+	getCaptionPadding,
+	getCaptionScaledFontSize,
+	getCaptionScaledRadius,
+	getCaptionTextMaxWidth,
+	getCaptionWordVisualState,
+} from "./captionStyle";
 import {
-  type AutoCaptionSettings,
-  type CaptionCue,
-  ZOOM_DEPTH_SCALES,
-  type ZoomRegion,
-  type ZoomFocus,
-  type ZoomDepth,
-  type TrimRegion,
-  type SpeedRegion,
-  type AnnotationRegion,
-  type CursorTelemetryPoint,
-  type CursorStyle,
-  type WebcamOverlaySettings,
-  type ZoomTransitionEasing,
+	type AnnotationRegion,
+	type AutoCaptionSettings,
+	type CaptionCue,
+	type CursorStyle,
+	type CursorTelemetryPoint,
+	DEFAULT_CONNECTED_ZOOM_DURATION_MS,
+	DEFAULT_CONNECTED_ZOOM_EASING,
+	DEFAULT_CONNECTED_ZOOM_GAP_MS,
+	DEFAULT_CURSOR_CLICK_BOUNCE,
+	DEFAULT_CURSOR_CLICK_BOUNCE_DURATION,
+	DEFAULT_CURSOR_MOTION_BLUR,
+	DEFAULT_CURSOR_SIZE,
+	DEFAULT_CURSOR_SMOOTHING,
+	DEFAULT_CURSOR_SWAY,
+	DEFAULT_WEBCAM_CORNER_RADIUS,
+	DEFAULT_WEBCAM_REACT_TO_ZOOM,
+	DEFAULT_WEBCAM_SHADOW,
+	DEFAULT_WEBCAM_SIZE,
+	DEFAULT_ZOOM_IN_DURATION_MS,
+	DEFAULT_ZOOM_IN_EASING,
+	DEFAULT_ZOOM_IN_OVERLAP_MS,
+	DEFAULT_ZOOM_OUT_DURATION_MS,
+	DEFAULT_ZOOM_OUT_EASING,
+	getDefaultCaptionFontFamily,
+	type SpeedRegion,
+	type TrimRegion,
+	type WebcamOverlaySettings,
+	ZOOM_DEPTH_SCALES,
+	type ZoomDepth,
+	type ZoomFocus,
+	type ZoomRegion,
+	type ZoomTransitionEasing,
 } from "./types";
 import {
-  DEFAULT_FOCUS,
-  ZOOM_SCALE_DEADZONE,
-  ZOOM_TRANSLATION_DEADZONE_PX,
+	DEFAULT_FOCUS,
+	ZOOM_SCALE_DEADZONE,
+	ZOOM_TRANSLATION_DEADZONE_PX,
 } from "./videoPlayback/constants";
 import {
-  DEFAULT_CURSOR_CONFIG,
-  PixiCursorOverlay,
-  preloadCursorAssets,
+	DEFAULT_CURSOR_CONFIG,
+	PixiCursorOverlay,
+	preloadCursorAssets,
 } from "./videoPlayback/cursorRenderer";
-import {
-  buildActiveCaptionLayout,
-} from "./captionLayout";
-import {
-  CAPTION_FONT_WEIGHT,
-  CAPTION_LINE_HEIGHT,
-  getCaptionPadding,
-  getCaptionScaledRadius,
-  getCaptionScaledFontSize,
-  getCaptionTextMaxWidth,
-  getCaptionWordVisualState,
-} from "./captionStyle";
-import { clamp01 } from "./videoPlayback/mathUtils";
-import { findDominantRegion } from "./videoPlayback/zoomRegionUtils";
 import { clampFocusToStage as clampFocusToStageUtil } from "./videoPlayback/focusUtils";
-import { updateOverlayIndicator } from "./videoPlayback/overlayUtils";
 import { layoutVideoContent as layoutVideoContentUtil } from "./videoPlayback/layoutUtils";
-import {
-  applyZoomTransform,
-  computeFocusFromTransform,
-  computeZoomTransform,
-  createMotionBlurState,
-  type MotionBlurState,
-} from "./videoPlayback/zoomTransform";
+import { clamp01 } from "./videoPlayback/mathUtils";
+import { updateOverlayIndicator } from "./videoPlayback/overlayUtils";
 import { createVideoEventHandlers } from "./videoPlayback/videoEventHandlers";
+import { findDominantRegion } from "./videoPlayback/zoomRegionUtils";
 import {
-  type AspectRatio,
-  formatAspectRatioForCSS,
-} from "@/utils/aspectRatioUtils";
-import { AnnotationOverlay } from "./AnnotationOverlay";
-import {
-  DEFAULT_CURSOR_CLICK_BOUNCE,
-  DEFAULT_CURSOR_CLICK_BOUNCE_DURATION,
-  DEFAULT_CURSOR_MOTION_BLUR,
-  DEFAULT_CURSOR_SIZE,
-  DEFAULT_CURSOR_SMOOTHING,
-  DEFAULT_CURSOR_SWAY,
-  DEFAULT_CONNECTED_ZOOM_DURATION_MS,
-  DEFAULT_CONNECTED_ZOOM_EASING,
-  DEFAULT_CONNECTED_ZOOM_GAP_MS,
-  DEFAULT_WEBCAM_CORNER_RADIUS,
-  DEFAULT_WEBCAM_REACT_TO_ZOOM,
-  DEFAULT_WEBCAM_SHADOW,
-  DEFAULT_WEBCAM_SIZE,
-  DEFAULT_ZOOM_IN_DURATION_MS,
-  DEFAULT_ZOOM_IN_EASING,
-  DEFAULT_ZOOM_IN_OVERLAP_MS,
-  DEFAULT_ZOOM_OUT_DURATION_MS,
-  DEFAULT_ZOOM_OUT_EASING,
-  getDefaultCaptionFontFamily,
-} from "./types";
+	applyZoomTransform,
+	computeFocusFromTransform,
+	computeZoomTransform,
+	createMotionBlurState,
+	type MotionBlurState,
+} from "./videoPlayback/zoomTransform";
 import { getWebcamOverlayPosition, getWebcamOverlaySizePx } from "./webcamOverlay";
-import { getSquircleSvgPath } from "@/lib/geometry/squircle";
 
 type PlaybackAnimationState = {
-  scale: number;
-  appliedScale: number;
-  focusX: number;
-  focusY: number;
-  progress: number;
-  x: number;
-  y: number;
+	scale: number;
+	appliedScale: number;
+	focusX: number;
+	focusY: number;
+	progress: number;
+	x: number;
+	y: number;
 };
 
 function createPlaybackAnimationState(): PlaybackAnimationState {
-  return {
-    scale: 1,
-    appliedScale: 1,
-    focusX: DEFAULT_FOCUS.cx,
-    focusY: DEFAULT_FOCUS.cy,
-    progress: 0,
-    x: 0,
-    y: 0,
-  };
+	return {
+		scale: 1,
+		appliedScale: 1,
+		focusX: DEFAULT_FOCUS.cx,
+		focusY: DEFAULT_FOCUS.cy,
+		progress: 0,
+		x: 0,
+		y: 0,
+	};
 }
 
 function getEffectiveNativeAspectRatio(
-  dimensions: { width: number; height: number } | null | undefined,
-  cropRegion?: import("./types").CropRegion,
+	dimensions: { width: number; height: number } | null | undefined,
+	cropRegion?: import("./types").CropRegion,
 ): number {
-  if (!dimensions || dimensions.height <= 0 || dimensions.width <= 0) {
-    return 16 / 9;
-  }
+	if (!dimensions || dimensions.height <= 0 || dimensions.width <= 0) {
+		return 16 / 9;
+	}
 
-  const cropWidth = cropRegion?.width ?? 1;
-  const cropHeight = cropRegion?.height ?? 1;
-  const effectiveWidth = dimensions.width * cropWidth;
-  const effectiveHeight = dimensions.height * cropHeight;
+	const cropWidth = cropRegion?.width ?? 1;
+	const cropHeight = cropRegion?.height ?? 1;
+	const effectiveWidth = dimensions.width * cropWidth;
+	const effectiveHeight = dimensions.height * cropHeight;
 
-  if (effectiveWidth <= 0 || effectiveHeight <= 0) {
-    return dimensions.width / dimensions.height;
-  }
+	if (effectiveWidth <= 0 || effectiveHeight <= 0) {
+		return dimensions.width / dimensions.height;
+	}
 
-  return effectiveWidth / effectiveHeight;
+	return effectiveWidth / effectiveHeight;
 }
 
 interface VideoPlaybackProps {
-  videoPath: string;
-  onDurationChange: (duration: number) => void;
-  onPreviewReadyChange?: (ready: boolean) => void;
-  onTimeUpdate: (time: number) => void;
-  currentTime: number;
-  onPlayStateChange: (playing: boolean) => void;
-  onError: (error: string) => void;
-  wallpaper?: string;
-  zoomRegions: ZoomRegion[];
-  selectedZoomId: string | null;
-  onSelectZoom: (id: string | null) => void;
-  onZoomFocusChange: (id: string, focus: ZoomFocus) => void;
-  isPlaying: boolean;
-  showShadow?: boolean;
-  shadowIntensity?: number;
-  backgroundBlur?: number;
-  zoomMotionBlur?: number;
-  connectZooms?: boolean;
-  zoomInDurationMs?: number;
-  zoomInOverlapMs?: number;
-  zoomOutDurationMs?: number;
-  connectedZoomGapMs?: number;
-  connectedZoomDurationMs?: number;
-  zoomInEasing?: ZoomTransitionEasing;
-  zoomOutEasing?: ZoomTransitionEasing;
-  connectedZoomEasing?: ZoomTransitionEasing;
-  borderRadius?: number;
-  padding?: number;
-  cropRegion?: import("./types").CropRegion;
-  webcam?: WebcamOverlaySettings;
-  webcamVideoPath?: string | null;
-  trimRegions?: TrimRegion[];
-  speedRegions?: SpeedRegion[];
-  aspectRatio: AspectRatio;
-  annotationRegions?: AnnotationRegion[];
-  autoCaptions?: CaptionCue[];
-  autoCaptionSettings?: AutoCaptionSettings;
-  selectedAnnotationId?: string | null;
-  onSelectAnnotation?: (id: string | null) => void;
-  onAnnotationPositionChange?: (
-    id: string,
-    position: { x: number; y: number },
-  ) => void;
-  onAnnotationSizeChange?: (
-    id: string,
-    size: { width: number; height: number },
-  ) => void;
-  cursorTelemetry?: CursorTelemetryPoint[];
-  showCursor?: boolean;
-  cursorStyle?: CursorStyle;
-  cursorSize?: number;
-  cursorSmoothing?: number;
-  cursorMotionBlur?: number;
-  cursorClickBounce?: number;
-  cursorClickBounceDuration?: number;
-  cursorSway?: number;
-  volume?: number;
+	videoPath: string;
+	onDurationChange: (duration: number) => void;
+	onPreviewReadyChange?: (ready: boolean) => void;
+	onTimeUpdate: (time: number) => void;
+	currentTime: number;
+	onPlayStateChange: (playing: boolean) => void;
+	onError: (error: string) => void;
+	wallpaper?: string;
+	zoomRegions: ZoomRegion[];
+	selectedZoomId: string | null;
+	onSelectZoom: (id: string | null) => void;
+	onZoomFocusChange: (id: string, focus: ZoomFocus) => void;
+	isPlaying: boolean;
+	showShadow?: boolean;
+	shadowIntensity?: number;
+	backgroundBlur?: number;
+	zoomMotionBlur?: number;
+	connectZooms?: boolean;
+	zoomInDurationMs?: number;
+	zoomInOverlapMs?: number;
+	zoomOutDurationMs?: number;
+	connectedZoomGapMs?: number;
+	connectedZoomDurationMs?: number;
+	zoomInEasing?: ZoomTransitionEasing;
+	zoomOutEasing?: ZoomTransitionEasing;
+	connectedZoomEasing?: ZoomTransitionEasing;
+	borderRadius?: number;
+	padding?: number;
+	cropRegion?: import("./types").CropRegion;
+	webcam?: WebcamOverlaySettings;
+	webcamVideoPath?: string | null;
+	trimRegions?: TrimRegion[];
+	speedRegions?: SpeedRegion[];
+	aspectRatio: AspectRatio;
+	annotationRegions?: AnnotationRegion[];
+	autoCaptions?: CaptionCue[];
+	autoCaptionSettings?: AutoCaptionSettings;
+	selectedAnnotationId?: string | null;
+	onSelectAnnotation?: (id: string | null) => void;
+	onAnnotationPositionChange?: (id: string, position: { x: number; y: number }) => void;
+	onAnnotationSizeChange?: (id: string, size: { width: number; height: number }) => void;
+	cursorTelemetry?: CursorTelemetryPoint[];
+	showCursor?: boolean;
+	cursorStyle?: CursorStyle;
+	cursorSize?: number;
+	cursorSmoothing?: number;
+	cursorMotionBlur?: number;
+	cursorClickBounce?: number;
+	cursorClickBounceDuration?: number;
+	cursorSway?: number;
+	volume?: number;
 }
 
 export interface VideoPlaybackRef {
-  video: HTMLVideoElement | null;
-  app: Application | null;
-  videoSprite: Sprite | null;
-  videoContainer: Container | null;
-  containerRef: React.RefObject<HTMLDivElement>;
-  play: () => Promise<void>;
-  pause: () => void;
-  refreshFrame: () => Promise<void>;
+	video: HTMLVideoElement | null;
+	app: Application | null;
+	videoSprite: Sprite | null;
+	videoContainer: Container | null;
+	containerRef: React.RefObject<HTMLDivElement>;
+	play: () => Promise<void>;
+	pause: () => void;
+	refreshFrame: () => Promise<void>;
 }
 
 const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
-  (
-    {
-      videoPath,
-      onDurationChange,
-      onPreviewReadyChange,
-      onTimeUpdate,
-      currentTime,
-      onPlayStateChange,
-      onError,
-      wallpaper,
-      zoomRegions,
-      selectedZoomId,
-      onSelectZoom,
-      onZoomFocusChange,
-      isPlaying,
-      showShadow,
-      shadowIntensity = 0,
-      backgroundBlur = 0,
-      zoomMotionBlur = 0,
-      connectZooms = true,
-      zoomInDurationMs = DEFAULT_ZOOM_IN_DURATION_MS,
-      zoomInOverlapMs = DEFAULT_ZOOM_IN_OVERLAP_MS,
-      zoomOutDurationMs = DEFAULT_ZOOM_OUT_DURATION_MS,
-      connectedZoomGapMs = DEFAULT_CONNECTED_ZOOM_GAP_MS,
-      connectedZoomDurationMs = DEFAULT_CONNECTED_ZOOM_DURATION_MS,
-      zoomInEasing = DEFAULT_ZOOM_IN_EASING,
-      zoomOutEasing = DEFAULT_ZOOM_OUT_EASING,
-      connectedZoomEasing = DEFAULT_CONNECTED_ZOOM_EASING,
-      borderRadius = 0,
-      padding = 50,
-      cropRegion,
-      webcam,
-      webcamVideoPath,
-      trimRegions = [],
-      speedRegions = [],
-      aspectRatio,
-      annotationRegions = [],
-      autoCaptions = [],
-      autoCaptionSettings,
-      selectedAnnotationId,
-      onSelectAnnotation,
-      onAnnotationPositionChange,
-      onAnnotationSizeChange,
-      cursorTelemetry = [],
-      showCursor = false,
-      cursorStyle = "tahoe",
-      cursorSize = DEFAULT_CURSOR_SIZE,
-      cursorSmoothing = DEFAULT_CURSOR_SMOOTHING,
-      cursorMotionBlur = DEFAULT_CURSOR_MOTION_BLUR,
-      cursorClickBounce = DEFAULT_CURSOR_CLICK_BOUNCE,
-      cursorClickBounceDuration = DEFAULT_CURSOR_CLICK_BOUNCE_DURATION,
-      cursorSway = DEFAULT_CURSOR_SWAY,
-      volume = 1,
-    },
-    ref,
-  ) => {
-    const videoRef = useRef<HTMLVideoElement | null>(null);
-    const containerRef = useRef<HTMLDivElement | null>(null);
-    const appRef = useRef<Application | null>(null);
-    const videoSpriteRef = useRef<Sprite | null>(null);
-    const videoContainerRef = useRef<Container | null>(null);
-    const cursorContainerRef = useRef<Container | null>(null);
-    const cameraContainerRef = useRef<Container | null>(null);
-    const timeUpdateAnimationRef = useRef<number | null>(null);
-    const [pixiReady, setPixiReady] = useState(false);
-    const [videoReady, setVideoReady] = useState(false);
-    const overlayRef = useRef<HTMLDivElement | null>(null);
-    const focusIndicatorRef = useRef<HTMLDivElement | null>(null);
-    const webcamVideoRef = useRef<HTMLVideoElement | null>(null);
-    const webcamBubbleRef = useRef<HTMLDivElement | null>(null);
-    const webcamBubbleInnerRef = useRef<HTMLDivElement | null>(null);
-    const captionBoxRef = useRef<HTMLDivElement | null>(null);
-    const currentTimeRef = useRef(0);
-    const zoomRegionsRef = useRef<ZoomRegion[]>([]);
-    const selectedZoomIdRef = useRef<string | null>(null);
-    const animationStateRef = useRef<PlaybackAnimationState>(
-      createPlaybackAnimationState(),
-    );
-    const blurFilterRef = useRef<BlurFilter | null>(null);
-    const motionBlurFilterRef = useRef<MotionBlurFilter | null>(null);
-    const isDraggingFocusRef = useRef(false);
-    const stageSizeRef = useRef({ width: 0, height: 0 });
-    const videoSizeRef = useRef({ width: 0, height: 0 });
-    const baseScaleRef = useRef(1);
-    const baseOffsetRef = useRef({ x: 0, y: 0 });
-    const baseMaskRef = useRef<{
-      x: number;
-      y: number;
-      width: number;
-      height: number;
-      sourceCrop?: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-      };
-    }>({ x: 0, y: 0, width: 0, height: 0 });
-    const cropBoundsRef = useRef({ startX: 0, endX: 0, startY: 0, endY: 0 });
-    const maskGraphicsRef = useRef<Graphics | null>(null);
-    const isPlayingRef = useRef(isPlaying);
-    const isSeekingRef = useRef(false);
-    const allowPlaybackRef = useRef(false);
-    const lockedVideoDimensionsRef = useRef<{
-      width: number;
-      height: number;
-    } | null>(null);
-    const layoutVideoContentRef = useRef<(() => void) | null>(null);
-    const trimRegionsRef = useRef<TrimRegion[]>([]);
-    const speedRegionsRef = useRef<SpeedRegion[]>([]);
-    const lastWebcamSyncTimeRef = useRef<number | null>(null);
-    const bgVideoRef = useRef<HTMLVideoElement | null>(null);
-    const zoomMotionBlurRef = useRef(zoomMotionBlur);
-    const connectZoomsRef = useRef(connectZooms);
-    const zoomInDurationMsRef = useRef(zoomInDurationMs);
-    const zoomInOverlapMsRef = useRef(zoomInOverlapMs);
-    const zoomOutDurationMsRef = useRef(zoomOutDurationMs);
-    const connectedZoomGapMsRef = useRef(connectedZoomGapMs);
-    const connectedZoomDurationMsRef = useRef(connectedZoomDurationMs);
-    const zoomInEasingRef = useRef(zoomInEasing);
-    const zoomOutEasingRef = useRef(zoomOutEasing);
-    const connectedZoomEasingRef = useRef(connectedZoomEasing);
-    const videoReadyRafRef = useRef<number | null>(null);
-    const cursorOverlayRef = useRef<PixiCursorOverlay | null>(null);
-    const cursorTelemetryRef = useRef<CursorTelemetryPoint[]>([]);
-    const showCursorRef = useRef(showCursor);
-    const cursorSizeRef = useRef(cursorSize);
-    const cursorStyleRef = useRef(cursorStyle);
-    const cursorSmoothingRef = useRef(cursorSmoothing);
-    const cursorMotionBlurRef = useRef(cursorMotionBlur);
-    const cursorClickBounceRef = useRef(cursorClickBounce);
-    const cursorClickBounceDurationRef = useRef(cursorClickBounceDuration);
-    const cursorSwayRef = useRef(cursorSway);
-
-    const activeCaptionLayout = useMemo(() => {
-      if (!autoCaptionSettings?.enabled || autoCaptions.length === 0 || typeof document === "undefined") {
-        return null;
-      }
-
-      const overlayWidth = overlayRef.current?.clientWidth || 960;
-      const fontSize = getCaptionScaledFontSize(
-        autoCaptionSettings.fontSize,
-        overlayWidth,
-        autoCaptionSettings.maxWidth,
-      );
-      const maxTextWidthPx = getCaptionTextMaxWidth(
-        overlayWidth,
-        autoCaptionSettings.maxWidth,
-        fontSize,
-      );
-      const measurementCanvas = document.createElement("canvas");
-      const measurementContext = measurementCanvas.getContext("2d");
-      if (!measurementContext) {
-        return null;
-      }
-
-      measurementContext.font = `${CAPTION_FONT_WEIGHT} ${fontSize}px ${getDefaultCaptionFontFamily()}`;
-
-      return buildActiveCaptionLayout({
-        cues: autoCaptions,
-        timeMs: Math.round(currentTime * 1000),
-        settings: autoCaptionSettings,
-        maxWidthPx: maxTextWidthPx,
-        measureText: (text) => measurementContext.measureText(text).width,
-      });
-    }, [autoCaptionSettings, autoCaptions, currentTime]);
-
-    useEffect(() => {
-      const captionBox = captionBoxRef.current;
-      if (!captionBox || !activeCaptionLayout || !autoCaptionSettings) {
-        if (captionBox) {
-          captionBox.style.clipPath = "";
-          captionBox.style.removeProperty("-webkit-clip-path");
-        }
-        return;
-      }
-
-      const frame = requestAnimationFrame(() => {
-        const width = captionBox.offsetWidth;
-        const height = captionBox.offsetHeight;
-        if (width <= 0 || height <= 0) {
-          return;
-        }
-
-        const fontSize = getCaptionScaledFontSize(
-          autoCaptionSettings.fontSize,
-          overlayRef.current?.clientWidth || 960,
-          autoCaptionSettings.maxWidth,
-        );
-
-        const squirclePath = getSquircleSvgPath({
-          x: 0,
-          y: 0,
-          width,
-          height,
-          radius: getCaptionScaledRadius(autoCaptionSettings.boxRadius, fontSize),
-        });
-        captionBox.style.clipPath = `path('${squirclePath}')`;
-        captionBox.style.setProperty("-webkit-clip-path", `path('${squirclePath}')`);
-      });
-
-      return () => cancelAnimationFrame(frame);
-    }, [activeCaptionLayout, autoCaptionSettings]);
-    const motionBlurStateRef = useRef<MotionBlurState>(createMotionBlurState());
-
-    const applyWebcamBubbleLayout = useCallback((zoomScale: number) => {
-      const bubble = webcamBubbleRef.current;
-      const bubbleInner = webcamBubbleInnerRef.current;
-      const overlay = overlayRef.current;
-      if (!bubble || !bubbleInner || !overlay || !webcam?.enabled || !webcamVideoPath) {
-        if (bubble) {
-          bubble.style.display = "none";
-        }
-        return;
-      }
-
-      const margin = webcam.margin ?? 24;
-      const scaledSize = getWebcamOverlaySizePx({
-    		containerWidth: overlay.clientWidth,
-    		containerHeight: overlay.clientHeight,
-      		sizePercent: webcam.size ?? DEFAULT_WEBCAM_SIZE,
-    		margin,
-    		zoomScale,
-      		reactToZoom: webcam.reactToZoom ?? DEFAULT_WEBCAM_REACT_TO_ZOOM,
-    	});
-      const { x, y } = getWebcamOverlayPosition({
-        containerWidth: overlay.clientWidth,
-        containerHeight: overlay.clientHeight,
-        size: scaledSize,
-        margin,
-        positionPreset: webcam.positionPreset ?? webcam.corner,
-        positionX: webcam.positionX ?? 1,
-        positionY: webcam.positionY ?? 1,
-        legacyCorner: webcam.corner,
-      });
-
-      bubble.style.display = "block";
-      bubble.style.left = `${x}px`;
-      bubble.style.top = `${y}px`;
-      bubble.style.width = `${scaledSize}px`;
-      bubble.style.height = `${scaledSize}px`;
-      const squirclePath = getSquircleSvgPath({
-        x: 0,
-        y: 0,
-        width: scaledSize,
-        height: scaledSize,
-        radius: webcam.cornerRadius ?? DEFAULT_WEBCAM_CORNER_RADIUS,
-      });
-      bubble.style.filter = `drop-shadow(0 ${Math.round(scaledSize * 0.06)}px ${Math.round(
-        scaledSize * 0.22,
-      )}px rgba(0, 0, 0, ${webcam.shadow ?? DEFAULT_WEBCAM_SHADOW}))`;
-      bubble.style.borderRadius = "0px";
-      bubble.style.boxShadow = "none";
-
-      bubbleInner.style.borderRadius = "0px";
-      bubbleInner.style.clipPath = `path('${squirclePath}')`;
-      bubbleInner.style.setProperty("-webkit-clip-path", `path('${squirclePath}')`);
-    }, [webcam, webcamVideoPath]);
-
-    const clampFocusToStage = useCallback(
-      (focus: ZoomFocus, depth: ZoomDepth) => {
-        return clampFocusToStageUtil(focus, depth, stageSizeRef.current);
-      },
-      [],
-    );
-
-    const updateOverlayForRegion = useCallback(
-      (region: ZoomRegion | null, focusOverride?: ZoomFocus) => {
-        const overlayEl = overlayRef.current;
-        const indicatorEl = focusIndicatorRef.current;
-
-        if (!overlayEl || !indicatorEl) {
-          return;
-        }
-
-        // Update stage size from overlay dimensions
-        const stageWidth = overlayEl.clientWidth;
-        const stageHeight = overlayEl.clientHeight;
-        if (stageWidth && stageHeight) {
-          stageSizeRef.current = { width: stageWidth, height: stageHeight };
-        }
-
-        updateOverlayIndicator({
-          overlayEl,
-          indicatorEl,
-          region,
-          focusOverride,
-          baseMask: baseMaskRef.current,
-          isPlaying: isPlayingRef.current,
-        });
-      },
-      [],
-    );
-
-    const layoutVideoContent = useCallback(() => {
-      const container = containerRef.current;
-      const app = appRef.current;
-      const videoSprite = videoSpriteRef.current;
-      const maskGraphics = maskGraphicsRef.current;
-      const videoElement = videoRef.current;
-      const cameraContainer = cameraContainerRef.current;
-
-      if (
-        !container ||
-        !app ||
-        !videoSprite ||
-        !maskGraphics ||
-        !videoElement ||
-        !cameraContainer
-      ) {
-        return;
-      }
-
-      // Lock video dimensions on first layout to prevent resize issues
-      if (
-        !lockedVideoDimensionsRef.current &&
-        videoElement.videoWidth > 0 &&
-        videoElement.videoHeight > 0
-      ) {
-        lockedVideoDimensionsRef.current = {
-          width: videoElement.videoWidth,
-          height: videoElement.videoHeight,
-        };
-      }
-
-      const result = layoutVideoContentUtil({
-        container,
-        app,
-        videoSprite,
-        maskGraphics,
-        videoElement,
-        cropRegion,
-        lockedVideoDimensions: lockedVideoDimensionsRef.current,
-        borderRadius,
-        padding,
-      });
-
-      if (result) {
-        stageSizeRef.current = result.stageSize;
-        videoSizeRef.current = result.videoSize;
-        baseScaleRef.current = result.baseScale;
-        baseOffsetRef.current = result.baseOffset;
-        baseMaskRef.current = result.maskRect;
-        cropBoundsRef.current = result.cropBounds;
-
-        // Reset camera container to identity
-        cameraContainer.scale.set(1);
-        cameraContainer.position.set(0, 0);
-
-        const selectedId = selectedZoomIdRef.current;
-        const activeRegion = selectedId
-          ? (zoomRegionsRef.current.find(
-              (region) => region.id === selectedId,
-            ) ?? null)
-          : null;
-
-        updateOverlayForRegion(activeRegion);
-        applyWebcamBubbleLayout(animationStateRef.current.appliedScale || 1);
-      }
-    }, [updateOverlayForRegion, cropRegion, borderRadius, padding, applyWebcamBubbleLayout]);
-
-    useEffect(() => {
-      const video = videoRef.current;
-      if (!video) return;
-
-      const nextVolume = Math.max(0, Math.min(1, volume));
-      video.volume = nextVolume;
-      video.muted = nextVolume <= 0.001;
-    }, [volume, videoPath]);
-
-    useEffect(() => {
-      layoutVideoContentRef.current = layoutVideoContent;
-    }, [layoutVideoContent]);
-
-    const selectedZoom = useMemo(() => {
-      if (!selectedZoomId) return null;
-      return zoomRegions.find((region) => region.id === selectedZoomId) ?? null;
-    }, [zoomRegions, selectedZoomId]);
-
-    useImperativeHandle(ref, () => ({
-      video: videoRef.current,
-      app: appRef.current,
-      videoSprite: videoSpriteRef.current,
-      videoContainer: videoContainerRef.current,
-      containerRef,
-      play: async () => {
-        const vid = videoRef.current;
-        if (!vid) return;
-        try {
-          allowPlaybackRef.current = true;
-          await vid.play();
-        } catch (error) {
-          allowPlaybackRef.current = false;
-          throw error;
-        }
-      },
-      pause: () => {
-        const video = videoRef.current;
-        allowPlaybackRef.current = false;
-        if (!video) {
-          return;
-        }
-        video.pause();
-      },
-      refreshFrame: async () => {
-        const video = videoRef.current;
-        if (!video || Number.isNaN(video.currentTime)) {
-          return;
-        }
-
-        const restoreTime = video.currentTime;
-        const duration = Number.isFinite(video.duration) ? video.duration : 0;
-        const epsilon =
-          duration > 0
-            ? Math.min(1 / 120, duration / 1000 || 1 / 120)
-            : 1 / 120;
-        const nudgeTarget =
-          restoreTime > epsilon
-            ? restoreTime - epsilon
-            : Math.min(
-                duration || restoreTime + epsilon,
-                restoreTime + epsilon,
-              );
-
-        if (Math.abs(nudgeTarget - restoreTime) < 0.000001) {
-          return;
-        }
-
-        await new Promise<void>((resolve) => {
-          const handleFirstSeeked = () => {
-            video.removeEventListener("seeked", handleFirstSeeked);
-            const handleSecondSeeked = () => {
-              video.removeEventListener("seeked", handleSecondSeeked);
-              video.pause();
-              resolve();
-            };
-
-            video.addEventListener("seeked", handleSecondSeeked, {
-              once: true,
-            });
-            video.currentTime = restoreTime;
-          };
-
-          video.addEventListener("seeked", handleFirstSeeked, { once: true });
-          video.currentTime = nudgeTarget;
-        });
-      },
-    }));
-
-    const updateFocusFromClientPoint = (clientX: number, clientY: number) => {
-      const overlayEl = overlayRef.current;
-      if (!overlayEl) return;
-
-      const regionId = selectedZoomIdRef.current;
-      if (!regionId) return;
-
-      const region = zoomRegionsRef.current.find((r) => r.id === regionId);
-      if (!region) return;
-
-      const rect = overlayEl.getBoundingClientRect();
-      const stageWidth = rect.width;
-      const stageHeight = rect.height;
-
-      if (!stageWidth || !stageHeight) {
-        return;
-      }
-
-      stageSizeRef.current = { width: stageWidth, height: stageHeight };
-
-      const localX = clientX - rect.left;
-      const localY = clientY - rect.top;
-      const baseMask = baseMaskRef.current;
-
-      const unclampedFocus: ZoomFocus = {
-        cx: clamp01((localX - baseMask.x) / Math.max(1, baseMask.width)),
-        cy: clamp01((localY - baseMask.y) / Math.max(1, baseMask.height)),
-      };
-      const clampedFocus = clampFocusToStage(unclampedFocus, region.depth);
-
-      onZoomFocusChange(region.id, clampedFocus);
-      updateOverlayForRegion({ ...region, focus: clampedFocus }, clampedFocus);
-    };
-
-    const handleOverlayPointerDown = (
-      event: React.PointerEvent<HTMLDivElement>,
-    ) => {
-      if (isPlayingRef.current) return;
-      const regionId = selectedZoomIdRef.current;
-      if (!regionId) return;
-      const region = zoomRegionsRef.current.find((r) => r.id === regionId);
-      if (!region) return;
-      onSelectZoom(region.id);
-      event.preventDefault();
-      isDraggingFocusRef.current = true;
-      event.currentTarget.setPointerCapture(event.pointerId);
-      updateFocusFromClientPoint(event.clientX, event.clientY);
-    };
-
-    const handleOverlayPointerMove = (
-      event: React.PointerEvent<HTMLDivElement>,
-    ) => {
-      if (!isDraggingFocusRef.current) return;
-      event.preventDefault();
-      updateFocusFromClientPoint(event.clientX, event.clientY);
-    };
-
-    const endFocusDrag = (event: React.PointerEvent<HTMLDivElement>) => {
-      if (!isDraggingFocusRef.current) return;
-      isDraggingFocusRef.current = false;
-      try {
-        event.currentTarget.releasePointerCapture(event.pointerId);
-      } catch {}
-    };
-
-    const handleOverlayPointerUp = (
-      event: React.PointerEvent<HTMLDivElement>,
-    ) => {
-      endFocusDrag(event);
-    };
-
-    const handleOverlayPointerLeave = (
-      event: React.PointerEvent<HTMLDivElement>,
-    ) => {
-      endFocusDrag(event);
-    };
-
-    useEffect(() => {
-      zoomRegionsRef.current = zoomRegions;
-    }, [zoomRegions]);
-
-    useEffect(() => {
-      selectedZoomIdRef.current = selectedZoomId;
-    }, [selectedZoomId]);
-
-    useEffect(() => {
-      isPlayingRef.current = isPlaying;
-      const bgVideo = bgVideoRef.current;
-      if (bgVideo) {
-        if (isPlaying) {
-          bgVideo.play().catch(() => {});
-        } else {
-          bgVideo.pause();
-        }
-      }
-    }, [isPlaying]);
-
-    // Sync background video wallpaper with timeline scrubbing
-    useEffect(() => {
-      const bgVideo = bgVideoRef.current;
-      if (!bgVideo) return;
-      if (!isPlaying && bgVideo.duration && Number.isFinite(bgVideo.duration)) {
-        bgVideo.currentTime = currentTime % bgVideo.duration;
-      }
-    }, [currentTime, isPlaying]);
-
-    useEffect(() => {
-      trimRegionsRef.current = trimRegions;
-    }, [trimRegions]);
-
-    useEffect(() => {
-      speedRegionsRef.current = speedRegions;
-    }, [speedRegions]);
-
-    useEffect(() => {
-      zoomMotionBlurRef.current = zoomMotionBlur;
-    }, [zoomMotionBlur]);
-
-    useEffect(() => {
-      connectZoomsRef.current = connectZooms;
-    }, [connectZooms]);
-
-    useEffect(() => {
-      zoomInDurationMsRef.current = zoomInDurationMs;
-    }, [zoomInDurationMs]);
-
-    useEffect(() => {
-      zoomInOverlapMsRef.current = zoomInOverlapMs;
-    }, [zoomInOverlapMs]);
-
-    useEffect(() => {
-      zoomOutDurationMsRef.current = zoomOutDurationMs;
-    }, [zoomOutDurationMs]);
-
-    useEffect(() => {
-      connectedZoomGapMsRef.current = connectedZoomGapMs;
-    }, [connectedZoomGapMs]);
-
-    useEffect(() => {
-      connectedZoomDurationMsRef.current = connectedZoomDurationMs;
-    }, [connectedZoomDurationMs]);
-
-    useEffect(() => {
-      zoomInEasingRef.current = zoomInEasing;
-    }, [zoomInEasing]);
-
-    useEffect(() => {
-      zoomOutEasingRef.current = zoomOutEasing;
-    }, [zoomOutEasing]);
-
-    useEffect(() => {
-      connectedZoomEasingRef.current = connectedZoomEasing;
-    }, [connectedZoomEasing]);
-
-    useEffect(() => {
-      cursorTelemetryRef.current = cursorTelemetry;
-    }, [cursorTelemetry]);
-
-    useEffect(() => {
-      showCursorRef.current = showCursor;
-    }, [showCursor]);
-
-    useEffect(() => {
-      cursorStyleRef.current = cursorStyle;
-    }, [cursorStyle]);
-
-    useEffect(() => {
-      cursorSizeRef.current = cursorSize;
-    }, [cursorSize]);
-
-    useEffect(() => {
-      cursorSmoothingRef.current = cursorSmoothing;
-    }, [cursorSmoothing]);
-
-    useEffect(() => {
-      cursorMotionBlurRef.current = cursorMotionBlur;
-    }, [cursorMotionBlur]);
-
-    useEffect(() => {
-      cursorClickBounceRef.current = cursorClickBounce;
-    }, [cursorClickBounce]);
-
-    useEffect(() => {
-      cursorClickBounceDurationRef.current = cursorClickBounceDuration;
-    }, [cursorClickBounceDuration]);
-
-    useEffect(() => {
-      cursorSwayRef.current = cursorSway;
-    }, [cursorSway]);
-
-    useEffect(() => {
-      currentTimeRef.current = currentTime * 1000;
-    }, [currentTime]);
-
-    useEffect(() => {
-      if (!pixiReady || !videoReady) return;
-
-      const app = appRef.current;
-      const cameraContainer = cameraContainerRef.current;
-      const video = videoRef.current;
-
-      if (!app || !cameraContainer || !video) return;
-
-      const tickerWasStarted = app.ticker?.started || false;
-      if (tickerWasStarted && app.ticker) {
-        app.ticker.stop();
-      }
-
-      const wasPlaying = !video.paused;
-      if (wasPlaying) {
-        video.pause();
-      }
-
-      animationStateRef.current = createPlaybackAnimationState();
-      cursorOverlayRef.current?.reset();
-      motionBlurStateRef.current = createMotionBlurState();
-
-      if (blurFilterRef.current) {
-        blurFilterRef.current.blur = 0;
-      }
-
-      requestAnimationFrame(() => {
-        const container = cameraContainerRef.current;
-        const videoStage = videoContainerRef.current;
-        const sprite = videoSpriteRef.current;
-        const currentApp = appRef.current;
-        if (!container || !videoStage || !sprite || !currentApp) {
-          return;
-        }
-
-        container.scale.set(1);
-        container.position.set(0, 0);
-        videoStage.scale.set(1);
-        videoStage.position.set(0, 0);
-        sprite.scale.set(1);
-        sprite.position.set(0, 0);
-
-        layoutVideoContent();
-
-        applyZoomTransform({
-          cameraContainer: container,
-          blurFilter: blurFilterRef.current,
-          stageSize: stageSizeRef.current,
-          baseMask: baseMaskRef.current,
-          zoomScale: 1,
-          focusX: DEFAULT_FOCUS.cx,
-          focusY: DEFAULT_FOCUS.cy,
-          motionIntensity: 0,
-          isPlaying: false,
-          motionBlurAmount: zoomMotionBlurRef.current,
-        });
-
-        requestAnimationFrame(() => {
-          const finalApp = appRef.current;
-          if (wasPlaying && video) {
-            video.play().catch(() => {});
-          }
-          if (tickerWasStarted && finalApp?.ticker) {
-            finalApp.ticker.start();
-          }
-        });
-      });
-    }, [pixiReady, videoReady, layoutVideoContent, cropRegion]);
-
-    useEffect(() => {
-      if (!pixiReady || !videoReady) return;
-      const container = containerRef.current;
-      if (!container) return;
-
-      if (typeof ResizeObserver === "undefined") {
-        return;
-      }
-
-      const observer = new ResizeObserver(() => {
-        layoutVideoContent();
-      });
-
-      observer.observe(container);
-      return () => {
-        observer.disconnect();
-      };
-    }, [pixiReady, videoReady, layoutVideoContent]);
-
-    useEffect(() => {
-      if (!pixiReady || !videoReady) return;
-      updateOverlayForRegion(selectedZoom);
-    }, [selectedZoom, pixiReady, videoReady, updateOverlayForRegion]);
-
-    useEffect(() => {
-      if (!pixiReady || !videoReady) return;
-      applyWebcamBubbleLayout(animationStateRef.current.appliedScale || 1);
-    }, [applyWebcamBubbleLayout, pixiReady, videoReady, webcam, webcamVideoPath]);
-
-    useEffect(() => {
-      const webcamVideo = webcamVideoRef.current;
-      if (!webcamVideo || !webcam?.enabled || !webcamVideoPath) {
-        return;
-      }
-
-      const targetTime = clampMediaTimeToDuration(
-        currentTime,
-        Number.isFinite(webcamVideo.duration) ? webcamVideo.duration : null,
-      );
-
-      const activeSpeedRegion = speedRegionsRef.current.find(
-        (region) => targetTime * 1000 >= region.startMs && targetTime * 1000 < region.endMs,
-      );
-      const targetPlaybackRate = activeSpeedRegion ? activeSpeedRegion.speed : 1;
-      if (Math.abs(webcamVideo.playbackRate - targetPlaybackRate) > 0.001) {
-        webcamVideo.playbackRate = targetPlaybackRate;
-      }
-
-      const previousTimelineTime = lastWebcamSyncTimeRef.current;
-      const timelineJumped =
-        previousTimelineTime === null || Math.abs(targetTime - previousTimelineTime) > 0.25;
-      const driftThreshold = isPlaying ? 0.35 : 0.01;
-      if (timelineJumped || Math.abs(webcamVideo.currentTime - targetTime) > driftThreshold) {
-        try {
-          webcamVideo.currentTime = targetTime;
-        } catch {
-          // no-op
-        }
-      }
-
-      if (isPlaying) {
-        const playPromise = webcamVideo.play();
-        if (playPromise) {
-          playPromise.catch(() => {});
-        }
-      } else {
-        webcamVideo.pause();
-      }
-
-      lastWebcamSyncTimeRef.current = targetTime;
-    }, [currentTime, isPlaying, webcam, webcamVideoPath]);
-
-    useEffect(() => {
-      lastWebcamSyncTimeRef.current = null;
-    }, [webcamVideoPath]);
-
-    useEffect(() => {
-      const overlayEl = overlayRef.current;
-      if (!overlayEl) return;
-      if (!selectedZoom) {
-        overlayEl.style.cursor = "default";
-        overlayEl.style.pointerEvents = "none";
-        return;
-      }
-      overlayEl.style.cursor = isPlaying ? "not-allowed" : "grab";
-      overlayEl.style.pointerEvents = isPlaying ? "none" : "auto";
-    }, [selectedZoom, isPlaying]);
-
-    useEffect(() => {
-      const container = containerRef.current;
-      if (!container) return;
-
-      let mounted = true;
-      let app: Application | null = null;
-
-      (async () => {
-        let cursorOverlayEnabled = true;
-        try {
-          await preloadCursorAssets();
-        } catch (error) {
-          cursorOverlayEnabled = false;
-          console.warn(
-            "Native cursor assets are unavailable in preview; continuing without cursor overlay.",
-            error,
-          );
-        }
-
-        app = new Application();
-
-        await app.init({
-          width: container.clientWidth,
-          height: container.clientHeight,
-          backgroundAlpha: 0,
-          antialias: true,
-          resolution: window.devicePixelRatio || 1,
-          autoDensity: true,
-        });
-
-        app.ticker.maxFPS = 60;
-
-        if (!mounted) {
-          app.destroy(true, {
-            children: true,
-            texture: false,
-            textureSource: false,
-          });
-          return;
-        }
-
-        appRef.current = app;
-        container.appendChild(app.canvas);
-
-        // Camera container - this will be scaled/positioned for zoom
-        const cameraContainer = new Container();
-        cameraContainerRef.current = cameraContainer;
-        app.stage.addChild(cameraContainer);
-
-        // Video container - holds the masked video sprite
-        const videoContainer = new Container();
-        videoContainerRef.current = videoContainer;
-        cameraContainer.addChild(videoContainer);
-
-        const cursorContainer = new Container();
-        cursorContainerRef.current = cursorContainer;
-        cameraContainer.addChild(cursorContainer);
-
-        // Cursor overlay - rendered above the masked video so it can sit in front
-        // of the content without getting clipped.
-        if (cursorOverlayEnabled) {
-          const cursorOverlay = new PixiCursorOverlay({
-            dotRadius: DEFAULT_CURSOR_CONFIG.dotRadius * cursorSizeRef.current,
-            style: cursorStyleRef.current,
-            smoothingFactor: cursorSmoothingRef.current,
-            motionBlur: cursorMotionBlurRef.current,
-            clickBounce: cursorClickBounceRef.current,
-            clickBounceDuration: cursorClickBounceDurationRef.current,
-            sway: cursorSwayRef.current,
-          });
-          cursorOverlayRef.current = cursorOverlay;
-          cursorContainer.addChild(cursorOverlay.container);
-        } else {
-          cursorOverlayRef.current = null;
-        }
-
-        setPixiReady(true);
-      })().catch((error) => {
-        console.error("Failed to initialize preview renderer:", error);
-        onError(
-          error instanceof Error
-            ? error.message
-            : "Failed to initialize preview renderer",
-        );
-      });
-
-      return () => {
-        mounted = false;
-        setPixiReady(false);
-        if (cursorOverlayRef.current) {
-          cursorOverlayRef.current.destroy();
-          cursorOverlayRef.current = null;
-        }
-        if (app && app.renderer) {
-          app.destroy(true, {
-            children: true,
-            texture: false,
-            textureSource: false,
-          });
-        }
-        appRef.current = null;
-        cameraContainerRef.current = null;
-        videoContainerRef.current = null;
-        cursorContainerRef.current = null;
-        videoSpriteRef.current = null;
-      };
-    }, [onError]);
-
-    useEffect(() => {
-      const video = videoRef.current;
-      if (!video) return;
-      video.pause();
-      video.currentTime = 0;
-      allowPlaybackRef.current = false;
-      lockedVideoDimensionsRef.current = null;
-      setVideoReady(false);
-      if (videoReadyRafRef.current) {
-        cancelAnimationFrame(videoReadyRafRef.current);
-        videoReadyRafRef.current = null;
-      }
-    }, [videoPath]);
-
-    useEffect(() => {
-      onPreviewReadyChange?.(videoReady);
-    }, [onPreviewReadyChange, videoReady]);
-
-    useEffect(() => {
-      if (!pixiReady || !videoReady) return;
-
-      const video = videoRef.current;
-      const app = appRef.current;
-      const videoContainer = videoContainerRef.current;
-      const cursorContainer = cursorContainerRef.current;
-
-      if (!video || !app || !videoContainer || !cursorContainer) return;
-      if (video.videoWidth === 0 || video.videoHeight === 0) return;
-
-      const source = VideoSource.from(video);
-      if ("autoPlay" in source) {
-        (source as { autoPlay?: boolean }).autoPlay = false;
-      }
-      if ("autoUpdate" in source) {
-        (source as { autoUpdate?: boolean }).autoUpdate = true;
-      }
-      const videoTexture = Texture.from(source);
-
-      const videoSprite = new Sprite(videoTexture);
-      videoSpriteRef.current = videoSprite;
-
-      const maskGraphics = new Graphics();
-      videoContainer.addChild(videoSprite);
-      videoContainer.addChild(maskGraphics);
-      videoContainer.mask = maskGraphics;
-      maskGraphicsRef.current = maskGraphics;
-      if (cursorOverlayRef.current) {
-        cursorContainer.addChild(cursorOverlayRef.current.container);
-      }
-
-      animationStateRef.current = createPlaybackAnimationState();
-
-      const blurFilter = new BlurFilter();
-      blurFilter.quality = 3;
-      blurFilter.resolution = app.renderer.resolution;
-      blurFilter.blur = 0;
-      const motionBlurFilter = new MotionBlurFilter([0, 0], 5, 0);
-      videoContainer.filters = [blurFilter, motionBlurFilter];
-      blurFilterRef.current = blurFilter;
-      motionBlurFilterRef.current = motionBlurFilter;
-
-      layoutVideoContent();
-      video.pause();
-
-      const { handlePlay, handlePause, handleSeeked, handleSeeking } =
-        createVideoEventHandlers({
-          video,
-          isSeekingRef,
-          isPlayingRef,
-          allowPlaybackRef,
-          currentTimeRef,
-          timeUpdateAnimationRef,
-          onPlayStateChange,
-          onTimeUpdate,
-          trimRegionsRef,
-          speedRegionsRef,
-        });
-
-      video.addEventListener("play", handlePlay);
-      video.addEventListener("pause", handlePause);
-      video.addEventListener("ended", handlePause);
-      video.addEventListener("seeked", handleSeeked);
-      video.addEventListener("seeking", handleSeeking);
-
-      return () => {
-        video.removeEventListener("play", handlePlay);
-        video.removeEventListener("pause", handlePause);
-        video.removeEventListener("ended", handlePause);
-        video.removeEventListener("seeked", handleSeeked);
-        video.removeEventListener("seeking", handleSeeking);
-
-        if (timeUpdateAnimationRef.current) {
-          cancelAnimationFrame(timeUpdateAnimationRef.current);
-        }
-
-        if (videoSprite) {
-          videoContainer.removeChild(videoSprite);
-          videoSprite.destroy();
-        }
-        if (maskGraphics) {
-          videoContainer.removeChild(maskGraphics);
-          maskGraphics.destroy();
-        }
-        videoContainer.mask = null;
-        maskGraphicsRef.current = null;
-        if (blurFilterRef.current) {
-          videoContainer.filters = [];
-          blurFilterRef.current.destroy();
-          blurFilterRef.current = null;
-        }
-        if (motionBlurFilterRef.current) {
-          motionBlurFilterRef.current.destroy();
-          motionBlurFilterRef.current = null;
-        }
-        videoTexture.destroy(false);
-
-        videoSpriteRef.current = null;
-      };
-    }, [pixiReady, videoReady, onTimeUpdate, updateOverlayForRegion]);
-
-    useEffect(() => {
-      if (!pixiReady || !videoReady) return;
-
-      const app = appRef.current;
-      const videoSprite = videoSpriteRef.current;
-      const videoContainer = videoContainerRef.current;
-      if (!app || !videoSprite || !videoContainer) return;
-
-      const applyTransform = (
-        transform: { scale: number; x: number; y: number },
-        focus: ZoomFocus,
-        motionIntensity: number,
-        motionVector: { x: number; y: number },
-      ) => {
-        const cameraContainer = cameraContainerRef.current;
-        if (!cameraContainer) return;
-
-        const state = animationStateRef.current;
-
-        const appliedTransform = applyZoomTransform({
-          cameraContainer,
-          blurFilter: blurFilterRef.current,
-          stageSize: stageSizeRef.current,
-          baseMask: baseMaskRef.current,
-          zoomScale: state.scale,
-          zoomProgress: state.progress,
-          focusX: focus.cx,
-          focusY: focus.cy,
-          motionIntensity,
-          motionVector,
-          isPlaying: isPlayingRef.current,
-          motionBlurAmount: zoomMotionBlurRef.current,
-          motionBlurFilter: motionBlurFilterRef.current,
-          transformOverride: transform,
-          motionBlurState: motionBlurStateRef.current,
-          frameTimeMs: performance.now(),
-        });
-
-        state.x = appliedTransform.x;
-        state.y = appliedTransform.y;
-        state.appliedScale = appliedTransform.scale;
-      };
-
-      const ticker = () => {
-        const { region, strength, blendedScale, transition } =
-          findDominantRegion(zoomRegionsRef.current, currentTimeRef.current, {
-            connectZooms: connectZoomsRef.current,
-          });
-
-        const defaultFocus = DEFAULT_FOCUS;
-        let targetScaleFactor = 1;
-        let targetFocus = defaultFocus;
-        let targetProgress = 0;
-
-        // If a zoom is selected but video is not playing, show default unzoomed view
-        // (the overlay will show where the zoom will be)
-        const selectedId = selectedZoomIdRef.current;
-        const hasSelectedZoom = selectedId !== null;
-        const shouldShowUnzoomedView = hasSelectedZoom && !isPlayingRef.current;
-
-        if (region && strength > 0 && !shouldShowUnzoomedView) {
-          const zoomScale = blendedScale ?? ZOOM_DEPTH_SCALES[region.depth];
-          const regionFocus = region.focus;
-
-          targetScaleFactor = zoomScale;
-          targetFocus = regionFocus;
-          targetProgress = strength;
-
-          if (transition) {
-            const startTransform = computeZoomTransform({
-              stageSize: stageSizeRef.current,
-              baseMask: baseMaskRef.current,
-              zoomScale: transition.startScale,
-              zoomProgress: 1,
-              focusX: transition.startFocus.cx,
-              focusY: transition.startFocus.cy,
-            });
-            const endTransform = computeZoomTransform({
-              stageSize: stageSizeRef.current,
-              baseMask: baseMaskRef.current,
-              zoomScale: transition.endScale,
-              zoomProgress: 1,
-              focusX: transition.endFocus.cx,
-              focusY: transition.endFocus.cy,
-            });
-
-            const interpolatedTransform = {
-              scale:
-                startTransform.scale +
-                (endTransform.scale - startTransform.scale) *
-                  transition.progress,
-              x:
-                startTransform.x +
-                (endTransform.x - startTransform.x) * transition.progress,
-              y:
-                startTransform.y +
-                (endTransform.y - startTransform.y) * transition.progress,
-            };
-
-            targetScaleFactor = interpolatedTransform.scale;
-            targetFocus = computeFocusFromTransform({
-              stageSize: stageSizeRef.current,
-              baseMask: baseMaskRef.current,
-              zoomScale: interpolatedTransform.scale,
-              x: interpolatedTransform.x,
-              y: interpolatedTransform.y,
-            });
-            targetProgress = 1;
-          }
-        }
-
-        const state = animationStateRef.current;
-        const prevScale = state.appliedScale;
-        const prevX = state.x;
-        const prevY = state.y;
-
-        state.scale = targetScaleFactor;
-        state.focusX = targetFocus.cx;
-        state.focusY = targetFocus.cy;
-        state.progress = targetProgress;
-
-        const projectedTransform = computeZoomTransform({
-          stageSize: stageSizeRef.current,
-          baseMask: baseMaskRef.current,
-          zoomScale: state.scale,
-          zoomProgress: state.progress,
-          focusX: state.focusX,
-          focusY: state.focusY,
-        });
-
-        const appliedScale =
-          Math.abs(projectedTransform.scale - prevScale) < ZOOM_SCALE_DEADZONE
-            ? projectedTransform.scale
-            : projectedTransform.scale;
-        const appliedX =
-          Math.abs(projectedTransform.x - prevX) < ZOOM_TRANSLATION_DEADZONE_PX
-            ? projectedTransform.x
-            : projectedTransform.x;
-        const appliedY =
-          Math.abs(projectedTransform.y - prevY) < ZOOM_TRANSLATION_DEADZONE_PX
-            ? projectedTransform.y
-            : projectedTransform.y;
-
-        const motionIntensity = Math.max(
-          Math.abs(appliedScale - prevScale),
-          Math.abs(appliedX - prevX) / Math.max(1, stageSizeRef.current.width),
-          Math.abs(appliedY - prevY) / Math.max(1, stageSizeRef.current.height),
-        );
-
-        const motionVector = {
-          x: appliedX - prevX,
-          y: appliedY - prevY,
-        };
-
-        applyTransform(
-          { scale: appliedScale, x: appliedX, y: appliedY },
-          targetFocus,
-          motionIntensity,
-          motionVector,
-        );
-        applyWebcamBubbleLayout(animationStateRef.current.appliedScale || 1);
-
-        // Update cursor overlay
-        const cursorOverlay = cursorOverlayRef.current;
-        if (cursorOverlay) {
-          const timeMs = currentTimeRef.current;
-          cursorOverlay.update(
-            cursorTelemetryRef.current,
-            timeMs,
-            baseMaskRef.current,
-            showCursorRef.current,
-            !isPlayingRef.current || isSeekingRef.current,
-          );
-        }
-      };
-
-      app.ticker.add(ticker);
-      return () => {
-        if (app && app.ticker) {
-          app.ticker.remove(ticker);
-        }
-      };
-    }, [pixiReady, videoReady, clampFocusToStage, applyWebcamBubbleLayout]);
-
-    useEffect(() => {
-      const overlay = cursorOverlayRef.current;
-      if (!overlay) {
-        return;
-      }
-
-      overlay.setDotRadius(DEFAULT_CURSOR_CONFIG.dotRadius * cursorSize);
-      overlay.setStyle(cursorStyle);
-      overlay.setSmoothingFactor(cursorSmoothing);
-      overlay.setMotionBlur(cursorMotionBlur);
-      overlay.setClickBounce(cursorClickBounce);
-      overlay.setClickBounceDuration(cursorClickBounceDuration);
-      overlay.setSway(cursorSway);
-      overlay.reset();
-    }, [
-      cursorStyle,
-      cursorSize,
-      cursorSmoothing,
-      cursorMotionBlur,
-      cursorClickBounce,
-      cursorClickBounceDuration,
-      cursorSway,
-    ]);
-
-    const handleLoadedMetadata = (
-      e: React.SyntheticEvent<HTMLVideoElement, Event>,
-    ) => {
-      const video = e.currentTarget;
-      onDurationChange(video.duration);
-      const targetTime = clampMediaTimeToDuration(
-        currentTime,
-        Number.isFinite(video.duration) ? video.duration : null,
-      );
-      video.currentTime = targetTime;
-      video.pause();
-      allowPlaybackRef.current = false;
-      currentTimeRef.current = targetTime * 1000;
-
-      if (videoReadyRafRef.current) {
-        cancelAnimationFrame(videoReadyRafRef.current);
-        videoReadyRafRef.current = null;
-      }
-
-      const waitForRenderableFrame = () => {
-        const hasDimensions = video.videoWidth > 0 && video.videoHeight > 0;
-        const hasData = video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA;
-        if (hasDimensions && hasData) {
-          videoReadyRafRef.current = null;
-          setVideoReady(true);
-          return;
-        }
-        videoReadyRafRef.current = requestAnimationFrame(
-          waitForRenderableFrame,
-        );
-      };
-
-      videoReadyRafRef.current = requestAnimationFrame(waitForRenderableFrame);
-    };
-
-    const [resolvedWallpaper, setResolvedWallpaper] = useState<string | null>(
-      null,
-    );
-    const [resolvedWallpaperKind, setResolvedWallpaperKind] = useState<
-      "image" | "video" | "style"
-    >("image");
-
-    useEffect(() => {
-      let mounted = true;
-      let revokeResolvedWallpaper = () => {};
-      (async () => {
-        try {
-          if (!wallpaper) {
-            const def = await getAssetPath(DEFAULT_WALLPAPER_RELATIVE_PATH);
-            if (mounted) {
-              setResolvedWallpaper(def);
-              setResolvedWallpaperKind("image");
-            }
-            return;
-          }
-
-          if (
-            wallpaper.startsWith("#") ||
-            wallpaper.startsWith("linear-gradient") ||
-            wallpaper.startsWith("radial-gradient")
-          ) {
-            if (mounted) {
-              setResolvedWallpaper(wallpaper);
-              setResolvedWallpaperKind("style");
-            }
-            return;
-          }
-
-          if (isVideoWallpaperSource(wallpaper)) {
-            let videoSrc = wallpaper;
-            if (wallpaper.startsWith("/") && !wallpaper.startsWith("//")) {
-              videoSrc = await getAssetPath(wallpaper.replace(/^\//, ""));
-            }
-            if (mounted) {
-              setResolvedWallpaper(videoSrc);
-              setResolvedWallpaperKind("video");
-            }
-            return;
-          }
-
-          // If it's a data URL (custom uploaded image), use as-is
-          if (wallpaper.startsWith("data:")) {
-            if (mounted) {
-              setResolvedWallpaper(wallpaper);
-              setResolvedWallpaperKind("image");
-            }
-            return;
-          }
-
-          if (
-            wallpaper.startsWith("http") ||
-            wallpaper.startsWith("file://") ||
-            wallpaper.startsWith("/")
-          ) {
-            const renderable = await getRenderableAssetUrl(wallpaper);
-            if (mounted) {
-              setResolvedWallpaper(renderable);
-              setResolvedWallpaperKind("image");
-            }
-            return;
-          }
-          const p = await getRenderableAssetUrl(
-            await getAssetPath(wallpaper.replace(/^\//, "")),
-          );
-          if (mounted) {
-            setResolvedWallpaper(p);
-            setResolvedWallpaperKind("image");
-          }
-        } catch (err) {
-          if (mounted) {
-            setResolvedWallpaper(wallpaper || DEFAULT_WALLPAPER_PATH);
-            setResolvedWallpaperKind(
-              isVideoWallpaperSource(wallpaper || "") ? "video" : "image",
-            );
-          }
-        }
-      })();
-      return () => {
-        mounted = false;
-        revokeResolvedWallpaper();
-      };
-    }, [wallpaper]);
-
-    useEffect(() => {
-      return () => {
-        if (videoReadyRafRef.current) {
-          cancelAnimationFrame(videoReadyRafRef.current);
-          videoReadyRafRef.current = null;
-        }
-      };
-    }, []);
-
-    const isImageUrl = resolvedWallpaperKind === "image" && Boolean(
-      resolvedWallpaper &&
-      (resolvedWallpaper.startsWith("file://") ||
-        resolvedWallpaper.startsWith("http") ||
-        resolvedWallpaper.startsWith("/") ||
-        resolvedWallpaper.startsWith("data:")),
-    );
-    const backgroundStyle = isImageUrl
-      ? { backgroundImage: `url(${resolvedWallpaper || ""})` }
-      : resolvedWallpaperKind === "video"
-        ? {}
-        : { background: resolvedWallpaper || "" };
-
-    const nativeAspectRatio = (() => {
-      const locked = lockedVideoDimensionsRef.current;
-      if (locked) {
-        return getEffectiveNativeAspectRatio(locked, cropRegion);
-      }
-      const video = videoRef.current;
-      if (video && video.videoHeight > 0 && video.videoWidth > 0) {
-        return getEffectiveNativeAspectRatio(
-          {
-            width: video.videoWidth,
-            height: video.videoHeight,
-          },
-          cropRegion,
-        );
-      }
-      return 16 / 9;
-    })();
-
-    return (
-      <div
-        className="relative rounded-sm overflow-hidden"
-        style={{
-          width: "100%",
-          aspectRatio: formatAspectRatioForCSS(aspectRatio, nativeAspectRatio),
-        }}
-      >
-        {/* Background layer */}
-        {resolvedWallpaperKind === "video" && resolvedWallpaper ? (
-          <video
-            key={resolvedWallpaper}
-            ref={bgVideoRef}
-            className="absolute inset-0 h-full w-full object-cover"
-            src={resolvedWallpaper}
-            muted
-            loop
-            playsInline
-            style={{
-              filter: backgroundBlur > 0 ? `blur(${backgroundBlur}px)` : "none",
-            }}
-          />
-        ) : (
-          <div
-            className="absolute inset-0 bg-cover bg-center"
-            style={{
-              ...backgroundStyle,
-              filter: backgroundBlur > 0 ? `blur(${backgroundBlur}px)` : "none",
-            }}
-          />
-        )}
-        <div
-          ref={containerRef}
-          className="absolute inset-0"
-          style={{
-            filter:
-              showShadow && shadowIntensity > 0
-                ? `drop-shadow(0 ${shadowIntensity * 12}px ${shadowIntensity * 48}px rgba(0,0,0,${shadowIntensity * 0.7})) drop-shadow(0 ${shadowIntensity * 4}px ${shadowIntensity * 16}px rgba(0,0,0,${shadowIntensity * 0.5})) drop-shadow(0 ${shadowIntensity * 2}px ${shadowIntensity * 8}px rgba(0,0,0,${shadowIntensity * 0.3}))`
-                : "none",
-          }}
-        />
-        {/* Only render overlay after PIXI and video are fully initialized */}
-        {pixiReady && videoReady && (
-          <div
-            ref={overlayRef}
-            className="absolute inset-0 select-none"
-            style={{ pointerEvents: "none" }}
-            onPointerDown={handleOverlayPointerDown}
-            onPointerMove={handleOverlayPointerMove}
-            onPointerUp={handleOverlayPointerUp}
-            onPointerLeave={handleOverlayPointerLeave}
-          >
-            <div
-              ref={focusIndicatorRef}
-              className="absolute rounded-md border border-[#2563EB]/80 bg-[#2563EB]/20 shadow-[0_0_0_1px_rgba(37,99,235,0.35)]"
-              style={{ display: "none", pointerEvents: "none" }}
-            />
-            {webcam && webcamVideoPath ? (
-              <div
-                ref={webcamBubbleRef}
-                className="absolute"
-                style={{
-                  display: webcam.enabled ? "block" : "none",
-                  pointerEvents: "none",
-                }}
-              >
-                <div
-                  ref={webcamBubbleInnerRef}
-                  className="h-full w-full overflow-hidden bg-black/80"
-                >
-                  <video
-                    ref={webcamVideoRef}
-                    src={webcamVideoPath}
-                    className="h-full w-full object-cover"
-                    muted
-                    playsInline
-                    preload="auto"
-                    style={{ transform: webcam.mirror ? "scaleX(-1)" : undefined }}
-                  />
-                </div>
-              </div>
-            ) : null}
-            {activeCaptionLayout && autoCaptionSettings ? (
-              <div
-                className="pointer-events-none absolute inset-x-0 flex justify-center"
-                style={{
-                  bottom: `${autoCaptionSettings.bottomOffset}%`,
-                }}
-              >
-                <div
-                  style={{
-                    maxWidth: `${autoCaptionSettings.maxWidth}%`,
-                    opacity: activeCaptionLayout.opacity,
-                    transform: `translateY(${activeCaptionLayout.translateY}px) scale(${activeCaptionLayout.scale})`,
-                    transformOrigin: "center bottom",
-                    filter: "drop-shadow(0 12px 30px rgba(0, 0, 0, 0.28))",
-                  }}
-                >
-                  <div
-                    ref={captionBoxRef}
-                    style={{
-                      backgroundColor: `rgba(0, 0, 0, ${autoCaptionSettings.backgroundOpacity})`,
-                      fontFamily: getDefaultCaptionFontFamily(),
-                      fontSize: `${getCaptionScaledFontSize(
-                        autoCaptionSettings.fontSize,
-                        overlayRef.current?.clientWidth || 960,
-                        autoCaptionSettings.maxWidth,
-                      )}px`,
-                      lineHeight: CAPTION_LINE_HEIGHT,
-                      textAlign: "center",
-                      fontWeight: CAPTION_FONT_WEIGHT,
-                      padding: `${getCaptionPadding(
-                        getCaptionScaledFontSize(
-                          autoCaptionSettings.fontSize,
-                          overlayRef.current?.clientWidth || 960,
-                          autoCaptionSettings.maxWidth,
-                        ),
-                      ).y}px ${getCaptionPadding(
-                        getCaptionScaledFontSize(
-                          autoCaptionSettings.fontSize,
-                          overlayRef.current?.clientWidth || 960,
-                          autoCaptionSettings.maxWidth,
-                        ),
-                      ).x}px`,
-                      borderRadius: `${getCaptionScaledRadius(
-                        autoCaptionSettings.boxRadius,
-                        getCaptionScaledFontSize(
-                          autoCaptionSettings.fontSize,
-                          overlayRef.current?.clientWidth || 960,
-                          autoCaptionSettings.maxWidth,
-                        ),
-                      )}px`,
-                      boxSizing: "border-box",
-                    }}
-                  >
-                    {activeCaptionLayout.visibleLines.map((line) => (
-                      <div
-                        key={`${activeCaptionLayout.blockKey}-${line.startWordIndex}`}
-                        style={{
-                          display: "flex",
-                          justifyContent: "center",
-                          flexWrap: "nowrap",
-                          whiteSpace: "nowrap",
-                        }}
-                      >
-                        {line.words.map((word) => {
-                          const visualState = getCaptionWordVisualState(
-                            activeCaptionLayout.hasWordTimings,
-                            word.state,
-                          );
-
-                          return (
-                            <span
-                              key={`${activeCaptionLayout.blockKey}-${word.index}`}
-                              style={{
-                                display: "inline-block",
-                                whiteSpace: "pre",
-                                color: visualState.isInactive
-                                  ? autoCaptionSettings.inactiveTextColor
-                                  : autoCaptionSettings.textColor,
-                                opacity: visualState.opacity,
-                              }}
-                            >
-                              {`${word.leadingSpace ? " " : ""}${word.text}`}
-                            </span>
-                          );
-                        })}
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            ) : null}
-            {(() => {
-              const filtered = (annotationRegions || []).filter(
-                (annotation) => {
-                  if (
-                    typeof annotation.startMs !== "number" ||
-                    typeof annotation.endMs !== "number"
-                  )
-                    return false;
-
-                  if (annotation.id === selectedAnnotationId) return true;
-
-                  const timeMs = Math.round(currentTime * 1000);
-                  return (
-                    timeMs >= annotation.startMs && timeMs <= annotation.endMs
-                  );
-                },
-              );
-
-              // Sort by z-index (lowest to highest) so higher z-index renders on top
-              const sorted = [...filtered].sort((a, b) => a.zIndex - b.zIndex);
-
-              // Handle click-through cycling: when clicking same annotation, cycle to next
-              const handleAnnotationClick = (clickedId: string) => {
-                if (!onSelectAnnotation) return;
-
-                // If clicking on already selected annotation and there are multiple overlapping
-                if (clickedId === selectedAnnotationId && sorted.length > 1) {
-                  // Find current index and cycle to next
-                  const currentIndex = sorted.findIndex(
-                    (a) => a.id === clickedId,
-                  );
-                  const nextIndex = (currentIndex + 1) % sorted.length;
-                  onSelectAnnotation(sorted[nextIndex].id);
-                } else {
-                  // First click or clicking different annotation
-                  onSelectAnnotation(clickedId);
-                }
-              };
-
-              return sorted.map((annotation) => (
-                <AnnotationOverlay
-                  key={annotation.id}
-                  annotation={annotation}
-                  isSelected={annotation.id === selectedAnnotationId}
-                  containerWidth={overlayRef.current?.clientWidth || 800}
-                  containerHeight={overlayRef.current?.clientHeight || 600}
-                  onPositionChange={(id, position) =>
-                    onAnnotationPositionChange?.(id, position)
-                  }
-                  onSizeChange={(id, size) =>
-                    onAnnotationSizeChange?.(id, size)
-                  }
-                  onClick={handleAnnotationClick}
-                  zIndex={annotation.zIndex}
-                  isSelectedBoost={annotation.id === selectedAnnotationId}
-                />
-              ));
-            })()}
-          </div>
-        )}
-        <video
-          ref={videoRef}
-          src={videoPath}
-          className="hidden"
-          preload="metadata"
-          playsInline
-          onLoadedMetadata={handleLoadedMetadata}
-          onDurationChange={(e) => {
-            onDurationChange(e.currentTarget.duration);
-          }}
-          onError={() => onError("Failed to load video")}
-        />
-      </div>
-    );
-  },
+	(
+		{
+			videoPath,
+			onDurationChange,
+			onPreviewReadyChange,
+			onTimeUpdate,
+			currentTime,
+			onPlayStateChange,
+			onError,
+			wallpaper,
+			zoomRegions,
+			selectedZoomId,
+			onSelectZoom,
+			onZoomFocusChange,
+			isPlaying,
+			showShadow,
+			shadowIntensity = 0,
+			backgroundBlur = 0,
+			zoomMotionBlur = 0,
+			connectZooms = true,
+			zoomInDurationMs = DEFAULT_ZOOM_IN_DURATION_MS,
+			zoomInOverlapMs = DEFAULT_ZOOM_IN_OVERLAP_MS,
+			zoomOutDurationMs = DEFAULT_ZOOM_OUT_DURATION_MS,
+			connectedZoomGapMs = DEFAULT_CONNECTED_ZOOM_GAP_MS,
+			connectedZoomDurationMs = DEFAULT_CONNECTED_ZOOM_DURATION_MS,
+			zoomInEasing = DEFAULT_ZOOM_IN_EASING,
+			zoomOutEasing = DEFAULT_ZOOM_OUT_EASING,
+			connectedZoomEasing = DEFAULT_CONNECTED_ZOOM_EASING,
+			borderRadius = 0,
+			padding = 50,
+			cropRegion,
+			webcam,
+			webcamVideoPath,
+			trimRegions = [],
+			speedRegions = [],
+			aspectRatio,
+			annotationRegions = [],
+			autoCaptions = [],
+			autoCaptionSettings,
+			selectedAnnotationId,
+			onSelectAnnotation,
+			onAnnotationPositionChange,
+			onAnnotationSizeChange,
+			cursorTelemetry = [],
+			showCursor = false,
+			cursorStyle = "tahoe",
+			cursorSize = DEFAULT_CURSOR_SIZE,
+			cursorSmoothing = DEFAULT_CURSOR_SMOOTHING,
+			cursorMotionBlur = DEFAULT_CURSOR_MOTION_BLUR,
+			cursorClickBounce = DEFAULT_CURSOR_CLICK_BOUNCE,
+			cursorClickBounceDuration = DEFAULT_CURSOR_CLICK_BOUNCE_DURATION,
+			cursorSway = DEFAULT_CURSOR_SWAY,
+			volume = 1,
+		},
+		ref,
+	) => {
+		const videoRef = useRef<HTMLVideoElement | null>(null);
+		const containerRef = useRef<HTMLDivElement | null>(null);
+		const appRef = useRef<Application | null>(null);
+		const videoSpriteRef = useRef<Sprite | null>(null);
+		const videoContainerRef = useRef<Container | null>(null);
+		const cursorContainerRef = useRef<Container | null>(null);
+		const cameraContainerRef = useRef<Container | null>(null);
+		const timeUpdateAnimationRef = useRef<number | null>(null);
+		const [pixiReady, setPixiReady] = useState(false);
+		const [videoReady, setVideoReady] = useState(false);
+		const overlayRef = useRef<HTMLDivElement | null>(null);
+		const focusIndicatorRef = useRef<HTMLDivElement | null>(null);
+		const webcamVideoRef = useRef<HTMLVideoElement | null>(null);
+		const webcamBubbleRef = useRef<HTMLDivElement | null>(null);
+		const webcamBubbleInnerRef = useRef<HTMLDivElement | null>(null);
+		const captionBoxRef = useRef<HTMLDivElement | null>(null);
+		const currentTimeRef = useRef(0);
+		const zoomRegionsRef = useRef<ZoomRegion[]>([]);
+		const annotationRegionsRef = useRef<AnnotationRegion[]>([]);
+		const selectedZoomIdRef = useRef<string | null>(null);
+		const animationStateRef = useRef<PlaybackAnimationState>(createPlaybackAnimationState());
+		const blurFilterRef = useRef<BlurFilter | null>(null);
+		const motionBlurFilterRef = useRef<MotionBlurFilter | null>(null);
+		const isDraggingFocusRef = useRef(false);
+		const stageSizeRef = useRef({ width: 0, height: 0 });
+		const videoSizeRef = useRef({ width: 0, height: 0 });
+		const baseScaleRef = useRef(1);
+		const baseOffsetRef = useRef({ x: 0, y: 0 });
+		const baseMaskRef = useRef<{
+			x: number;
+			y: number;
+			width: number;
+			height: number;
+			sourceCrop?: {
+				x: number;
+				y: number;
+				width: number;
+				height: number;
+			};
+		}>({ x: 0, y: 0, width: 0, height: 0 });
+		const cropBoundsRef = useRef({ startX: 0, endX: 0, startY: 0, endY: 0 });
+		const maskGraphicsRef = useRef<Graphics | null>(null);
+		const isPlayingRef = useRef(isPlaying);
+		const isSeekingRef = useRef(false);
+		const allowPlaybackRef = useRef(false);
+		const lockedVideoDimensionsRef = useRef<{
+			width: number;
+			height: number;
+		} | null>(null);
+		const layoutVideoContentRef = useRef<(() => void) | null>(null);
+		const trimRegionsRef = useRef<TrimRegion[]>([]);
+		const speedRegionsRef = useRef<SpeedRegion[]>([]);
+		const lastWebcamSyncTimeRef = useRef<number | null>(null);
+		const bgVideoRef = useRef<HTMLVideoElement | null>(null);
+		const zoomMotionBlurRef = useRef(zoomMotionBlur);
+		const connectZoomsRef = useRef(connectZooms);
+		const zoomInDurationMsRef = useRef(zoomInDurationMs);
+		const zoomInOverlapMsRef = useRef(zoomInOverlapMs);
+		const zoomOutDurationMsRef = useRef(zoomOutDurationMs);
+		const connectedZoomGapMsRef = useRef(connectedZoomGapMs);
+		const connectedZoomDurationMsRef = useRef(connectedZoomDurationMs);
+		const zoomInEasingRef = useRef(zoomInEasing);
+		const zoomOutEasingRef = useRef(zoomOutEasing);
+		const connectedZoomEasingRef = useRef(connectedZoomEasing);
+		const videoReadyRafRef = useRef<number | null>(null);
+		const cursorOverlayRef = useRef<PixiCursorOverlay | null>(null);
+		const cursorTelemetryRef = useRef<CursorTelemetryPoint[]>([]);
+		const showCursorRef = useRef(showCursor);
+		const cursorSizeRef = useRef(cursorSize);
+		const cursorStyleRef = useRef(cursorStyle);
+		const cursorSmoothingRef = useRef(cursorSmoothing);
+		const cursorMotionBlurRef = useRef(cursorMotionBlur);
+		const cursorClickBounceRef = useRef(cursorClickBounce);
+		const cursorClickBounceDurationRef = useRef(cursorClickBounceDuration);
+		const cursorSwayRef = useRef(cursorSway);
+
+		const activeCaptionLayout = useMemo(() => {
+			if (
+				!autoCaptionSettings?.enabled ||
+				autoCaptions.length === 0 ||
+				typeof document === "undefined"
+			) {
+				return null;
+			}
+
+			const overlayWidth = overlayRef.current?.clientWidth || 960;
+			const fontSize = getCaptionScaledFontSize(
+				autoCaptionSettings.fontSize,
+				overlayWidth,
+				autoCaptionSettings.maxWidth,
+			);
+			const maxTextWidthPx = getCaptionTextMaxWidth(
+				overlayWidth,
+				autoCaptionSettings.maxWidth,
+				fontSize,
+			);
+			const measurementCanvas = document.createElement("canvas");
+			const measurementContext = measurementCanvas.getContext("2d");
+			if (!measurementContext) {
+				return null;
+			}
+
+			measurementContext.font = `${CAPTION_FONT_WEIGHT} ${fontSize}px ${getDefaultCaptionFontFamily()}`;
+
+			return buildActiveCaptionLayout({
+				cues: autoCaptions,
+				timeMs: Math.round(currentTime * 1000),
+				settings: autoCaptionSettings,
+				maxWidthPx: maxTextWidthPx,
+				measureText: (text) => measurementContext.measureText(text).width,
+			});
+		}, [autoCaptionSettings, autoCaptions, currentTime]);
+
+		useEffect(() => {
+			const captionBox = captionBoxRef.current;
+			if (!captionBox || !activeCaptionLayout || !autoCaptionSettings) {
+				if (captionBox) {
+					captionBox.style.clipPath = "";
+					captionBox.style.removeProperty("-webkit-clip-path");
+				}
+				return;
+			}
+
+			const frame = requestAnimationFrame(() => {
+				const width = captionBox.offsetWidth;
+				const height = captionBox.offsetHeight;
+				if (width <= 0 || height <= 0) {
+					return;
+				}
+
+				const fontSize = getCaptionScaledFontSize(
+					autoCaptionSettings.fontSize,
+					overlayRef.current?.clientWidth || 960,
+					autoCaptionSettings.maxWidth,
+				);
+
+				const squirclePath = getSquircleSvgPath({
+					x: 0,
+					y: 0,
+					width,
+					height,
+					radius: getCaptionScaledRadius(autoCaptionSettings.boxRadius, fontSize),
+				});
+				captionBox.style.clipPath = `path('${squirclePath}')`;
+				captionBox.style.setProperty("-webkit-clip-path", `path('${squirclePath}')`);
+			});
+
+			return () => cancelAnimationFrame(frame);
+		}, [activeCaptionLayout, autoCaptionSettings]);
+		const motionBlurStateRef = useRef<MotionBlurState>(createMotionBlurState());
+
+		const applyWebcamBubbleLayout = useCallback(
+			(zoomScale: number) => {
+				const bubble = webcamBubbleRef.current;
+				const bubbleInner = webcamBubbleInnerRef.current;
+				const overlay = overlayRef.current;
+				if (!bubble || !bubbleInner || !overlay || !webcam?.enabled || !webcamVideoPath) {
+					if (bubble) {
+						bubble.style.display = "none";
+					}
+					return;
+				}
+
+				const margin = webcam.margin ?? 24;
+				const scaledSize = getWebcamOverlaySizePx({
+					containerWidth: overlay.clientWidth,
+					containerHeight: overlay.clientHeight,
+					sizePercent: webcam.size ?? DEFAULT_WEBCAM_SIZE,
+					margin,
+					zoomScale,
+					reactToZoom: webcam.reactToZoom ?? DEFAULT_WEBCAM_REACT_TO_ZOOM,
+				});
+				const { x, y } = getWebcamOverlayPosition({
+					containerWidth: overlay.clientWidth,
+					containerHeight: overlay.clientHeight,
+					size: scaledSize,
+					margin,
+					positionPreset: webcam.positionPreset ?? webcam.corner,
+					positionX: webcam.positionX ?? 1,
+					positionY: webcam.positionY ?? 1,
+					legacyCorner: webcam.corner,
+				});
+
+				bubble.style.display = "block";
+				bubble.style.left = `${x}px`;
+				bubble.style.top = `${y}px`;
+				bubble.style.width = `${scaledSize}px`;
+				bubble.style.height = `${scaledSize}px`;
+				const squirclePath = getSquircleSvgPath({
+					x: 0,
+					y: 0,
+					width: scaledSize,
+					height: scaledSize,
+					radius: webcam.cornerRadius ?? DEFAULT_WEBCAM_CORNER_RADIUS,
+				});
+				bubble.style.filter = `drop-shadow(0 ${Math.round(scaledSize * 0.06)}px ${Math.round(
+					scaledSize * 0.22,
+				)}px rgba(0, 0, 0, ${webcam.shadow ?? DEFAULT_WEBCAM_SHADOW}))`;
+				bubble.style.borderRadius = "0px";
+				bubble.style.boxShadow = "none";
+
+				bubbleInner.style.borderRadius = "0px";
+				bubbleInner.style.clipPath = `path('${squirclePath}')`;
+				bubbleInner.style.setProperty("-webkit-clip-path", `path('${squirclePath}')`);
+			},
+			[webcam, webcamVideoPath],
+		);
+
+		const clampFocusToStage = useCallback((focus: ZoomFocus, depth: ZoomDepth) => {
+			return clampFocusToStageUtil(focus, depth, stageSizeRef.current);
+		}, []);
+
+		const updateOverlayForRegion = useCallback(
+			(region: ZoomRegion | null, focusOverride?: ZoomFocus) => {
+				const overlayEl = overlayRef.current;
+				const indicatorEl = focusIndicatorRef.current;
+
+				if (!overlayEl || !indicatorEl) {
+					return;
+				}
+
+				// Update stage size from overlay dimensions
+				const stageWidth = overlayEl.clientWidth;
+				const stageHeight = overlayEl.clientHeight;
+				if (stageWidth && stageHeight) {
+					stageSizeRef.current = { width: stageWidth, height: stageHeight };
+				}
+
+				updateOverlayIndicator({
+					overlayEl,
+					indicatorEl,
+					region,
+					focusOverride,
+					baseMask: baseMaskRef.current,
+					isPlaying: isPlayingRef.current,
+				});
+			},
+			[],
+		);
+
+		const layoutVideoContent = useCallback(() => {
+			const container = containerRef.current;
+			const app = appRef.current;
+			const videoSprite = videoSpriteRef.current;
+			const maskGraphics = maskGraphicsRef.current;
+			const videoElement = videoRef.current;
+			const cameraContainer = cameraContainerRef.current;
+
+			if (
+				!container ||
+				!app ||
+				!videoSprite ||
+				!maskGraphics ||
+				!videoElement ||
+				!cameraContainer
+			) {
+				return;
+			}
+
+			// Lock video dimensions on first layout to prevent resize issues
+			if (
+				!lockedVideoDimensionsRef.current &&
+				videoElement.videoWidth > 0 &&
+				videoElement.videoHeight > 0
+			) {
+				lockedVideoDimensionsRef.current = {
+					width: videoElement.videoWidth,
+					height: videoElement.videoHeight,
+				};
+			}
+
+			const result = layoutVideoContentUtil({
+				container,
+				app,
+				videoSprite,
+				maskGraphics,
+				videoElement,
+				cropRegion,
+				lockedVideoDimensions: lockedVideoDimensionsRef.current,
+				borderRadius,
+				padding,
+			});
+
+			if (result) {
+				stageSizeRef.current = result.stageSize;
+				videoSizeRef.current = result.videoSize;
+				baseScaleRef.current = result.baseScale;
+				baseOffsetRef.current = result.baseOffset;
+				baseMaskRef.current = result.maskRect;
+				cropBoundsRef.current = result.cropBounds;
+
+				// Reset camera container to identity
+				cameraContainer.scale.set(1);
+				cameraContainer.position.set(0, 0);
+
+				const selectedId = selectedZoomIdRef.current;
+				const activeRegion = selectedId
+					? (zoomRegionsRef.current.find((region) => region.id === selectedId) ?? null)
+					: null;
+
+				updateOverlayForRegion(activeRegion);
+				applyWebcamBubbleLayout(animationStateRef.current.appliedScale || 1);
+			}
+		}, [updateOverlayForRegion, cropRegion, borderRadius, padding, applyWebcamBubbleLayout]);
+
+		useEffect(() => {
+			const video = videoRef.current;
+			if (!video) return;
+
+			const nextVolume = Math.max(0, Math.min(1, volume));
+			video.volume = nextVolume;
+			video.muted = nextVolume <= 0.001;
+		}, [volume, videoPath]);
+
+		useEffect(() => {
+			layoutVideoContentRef.current = layoutVideoContent;
+		}, [layoutVideoContent]);
+
+		const selectedZoom = useMemo(() => {
+			if (!selectedZoomId) return null;
+			return zoomRegions.find((region) => region.id === selectedZoomId) ?? null;
+		}, [zoomRegions, selectedZoomId]);
+
+		useImperativeHandle(ref, () => ({
+			video: videoRef.current,
+			app: appRef.current,
+			videoSprite: videoSpriteRef.current,
+			videoContainer: videoContainerRef.current,
+			containerRef,
+			play: async () => {
+				const vid = videoRef.current;
+				if (!vid) return;
+				try {
+					allowPlaybackRef.current = true;
+					await vid.play();
+				} catch (error) {
+					allowPlaybackRef.current = false;
+					throw error;
+				}
+			},
+			pause: () => {
+				const video = videoRef.current;
+				allowPlaybackRef.current = false;
+				if (!video) {
+					return;
+				}
+				video.pause();
+			},
+			refreshFrame: async () => {
+				const video = videoRef.current;
+				if (!video || Number.isNaN(video.currentTime)) {
+					return;
+				}
+
+				const restoreTime = video.currentTime;
+				const duration = Number.isFinite(video.duration) ? video.duration : 0;
+				const epsilon = duration > 0 ? Math.min(1 / 120, duration / 1000 || 1 / 120) : 1 / 120;
+				const nudgeTarget =
+					restoreTime > epsilon
+						? restoreTime - epsilon
+						: Math.min(duration || restoreTime + epsilon, restoreTime + epsilon);
+
+				if (Math.abs(nudgeTarget - restoreTime) < 0.000001) {
+					return;
+				}
+
+				await new Promise<void>((resolve) => {
+					const handleFirstSeeked = () => {
+						video.removeEventListener("seeked", handleFirstSeeked);
+						const handleSecondSeeked = () => {
+							video.removeEventListener("seeked", handleSecondSeeked);
+							video.pause();
+							resolve();
+						};
+
+						video.addEventListener("seeked", handleSecondSeeked, {
+							once: true,
+						});
+						video.currentTime = restoreTime;
+					};
+
+					video.addEventListener("seeked", handleFirstSeeked, { once: true });
+					video.currentTime = nudgeTarget;
+				});
+			},
+		}));
+
+		const updateFocusFromClientPoint = (clientX: number, clientY: number) => {
+			const overlayEl = overlayRef.current;
+			if (!overlayEl) return;
+
+			const regionId = selectedZoomIdRef.current;
+			if (!regionId) return;
+
+			const region = zoomRegionsRef.current.find((r) => r.id === regionId);
+			if (!region) return;
+
+			const rect = overlayEl.getBoundingClientRect();
+			const stageWidth = rect.width;
+			const stageHeight = rect.height;
+
+			if (!stageWidth || !stageHeight) {
+				return;
+			}
+
+			stageSizeRef.current = { width: stageWidth, height: stageHeight };
+
+			const localX = clientX - rect.left;
+			const localY = clientY - rect.top;
+			const baseMask = baseMaskRef.current;
+
+			const unclampedFocus: ZoomFocus = {
+				cx: clamp01((localX - baseMask.x) / Math.max(1, baseMask.width)),
+				cy: clamp01((localY - baseMask.y) / Math.max(1, baseMask.height)),
+			};
+			const clampedFocus = clampFocusToStage(unclampedFocus, region.depth);
+
+			onZoomFocusChange(region.id, clampedFocus);
+			updateOverlayForRegion({ ...region, focus: clampedFocus }, clampedFocus);
+		};
+
+		const handleOverlayPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+			if (isPlayingRef.current) return;
+			const regionId = selectedZoomIdRef.current;
+			if (!regionId) return;
+			const region = zoomRegionsRef.current.find((r) => r.id === regionId);
+			if (!region) return;
+			onSelectZoom(region.id);
+			event.preventDefault();
+			isDraggingFocusRef.current = true;
+			event.currentTarget.setPointerCapture(event.pointerId);
+			updateFocusFromClientPoint(event.clientX, event.clientY);
+		};
+
+		const handleOverlayPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+			if (!isDraggingFocusRef.current) return;
+			event.preventDefault();
+			updateFocusFromClientPoint(event.clientX, event.clientY);
+		};
+
+		const endFocusDrag = (event: React.PointerEvent<HTMLDivElement>) => {
+			if (!isDraggingFocusRef.current) return;
+			isDraggingFocusRef.current = false;
+			try {
+				event.currentTarget.releasePointerCapture(event.pointerId);
+			} catch {
+				// ignore: releasePointerCapture may throw on detached targets
+			}
+		};
+
+		const handleOverlayPointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
+			endFocusDrag(event);
+		};
+
+		const handleOverlayPointerLeave = (event: React.PointerEvent<HTMLDivElement>) => {
+			endFocusDrag(event);
+		};
+
+		useEffect(() => {
+			zoomRegionsRef.current = zoomRegions;
+			annotationRegionsRef.current = annotationRegions;
+		}, [zoomRegions, annotationRegions]);
+
+		useEffect(() => {
+			selectedZoomIdRef.current = selectedZoomId;
+		}, [selectedZoomId]);
+
+		useEffect(() => {
+			isPlayingRef.current = isPlaying;
+			const bgVideo = bgVideoRef.current;
+			if (bgVideo) {
+				if (isPlaying) {
+					bgVideo.play().catch((err) => console.warn("bgVideo play failed:", err));
+				} else {
+					bgVideo.pause();
+				}
+			}
+		}, [isPlaying]);
+
+		// Sync background video wallpaper with timeline scrubbing
+		useEffect(() => {
+			const bgVideo = bgVideoRef.current;
+			if (!bgVideo) return;
+			if (!isPlaying && bgVideo.duration && Number.isFinite(bgVideo.duration)) {
+				bgVideo.currentTime = currentTime % bgVideo.duration;
+			}
+		}, [currentTime, isPlaying]);
+
+		useEffect(() => {
+			trimRegionsRef.current = trimRegions;
+		}, [trimRegions]);
+
+		useEffect(() => {
+			speedRegionsRef.current = speedRegions;
+		}, [speedRegions]);
+
+		useEffect(() => {
+			zoomMotionBlurRef.current = zoomMotionBlur;
+		}, [zoomMotionBlur]);
+
+		useEffect(() => {
+			connectZoomsRef.current = connectZooms;
+		}, [connectZooms]);
+
+		useEffect(() => {
+			zoomInDurationMsRef.current = zoomInDurationMs;
+		}, [zoomInDurationMs]);
+
+		useEffect(() => {
+			zoomInOverlapMsRef.current = zoomInOverlapMs;
+		}, [zoomInOverlapMs]);
+
+		useEffect(() => {
+			zoomOutDurationMsRef.current = zoomOutDurationMs;
+		}, [zoomOutDurationMs]);
+
+		useEffect(() => {
+			connectedZoomGapMsRef.current = connectedZoomGapMs;
+		}, [connectedZoomGapMs]);
+
+		useEffect(() => {
+			connectedZoomDurationMsRef.current = connectedZoomDurationMs;
+		}, [connectedZoomDurationMs]);
+
+		useEffect(() => {
+			zoomInEasingRef.current = zoomInEasing;
+		}, [zoomInEasing]);
+
+		useEffect(() => {
+			zoomOutEasingRef.current = zoomOutEasing;
+		}, [zoomOutEasing]);
+
+		useEffect(() => {
+			connectedZoomEasingRef.current = connectedZoomEasing;
+		}, [connectedZoomEasing]);
+
+		useEffect(() => {
+			cursorTelemetryRef.current = cursorTelemetry;
+		}, [cursorTelemetry]);
+
+		useEffect(() => {
+			showCursorRef.current = showCursor;
+		}, [showCursor]);
+
+		useEffect(() => {
+			cursorStyleRef.current = cursorStyle;
+		}, [cursorStyle]);
+
+		useEffect(() => {
+			cursorSizeRef.current = cursorSize;
+		}, [cursorSize]);
+
+		useEffect(() => {
+			cursorSmoothingRef.current = cursorSmoothing;
+		}, [cursorSmoothing]);
+
+		useEffect(() => {
+			cursorMotionBlurRef.current = cursorMotionBlur;
+		}, [cursorMotionBlur]);
+
+		useEffect(() => {
+			cursorClickBounceRef.current = cursorClickBounce;
+		}, [cursorClickBounce]);
+
+		useEffect(() => {
+			cursorClickBounceDurationRef.current = cursorClickBounceDuration;
+		}, [cursorClickBounceDuration]);
+
+		useEffect(() => {
+			cursorSwayRef.current = cursorSway;
+		}, [cursorSway]);
+
+		useEffect(() => {
+			currentTimeRef.current = currentTime * 1000;
+		}, [currentTime]);
+
+		useEffect(() => {
+			if (!pixiReady || !videoReady) return;
+
+			const app = appRef.current;
+			const cameraContainer = cameraContainerRef.current;
+			const video = videoRef.current;
+
+			if (!app || !cameraContainer || !video) return;
+
+			const tickerWasStarted = app.ticker?.started || false;
+			if (tickerWasStarted && app.ticker) {
+				app.ticker.stop();
+			}
+
+			const wasPlaying = !video.paused;
+			if (wasPlaying) {
+				video.pause();
+			}
+
+			animationStateRef.current = createPlaybackAnimationState();
+			cursorOverlayRef.current?.reset();
+			motionBlurStateRef.current = createMotionBlurState();
+
+			if (blurFilterRef.current) {
+				blurFilterRef.current.blur = 0;
+			}
+
+			requestAnimationFrame(() => {
+				const container = cameraContainerRef.current;
+				const videoStage = videoContainerRef.current;
+				const sprite = videoSpriteRef.current;
+				const currentApp = appRef.current;
+				if (!container || !videoStage || !sprite || !currentApp) {
+					return;
+				}
+
+				container.scale.set(1);
+				container.position.set(0, 0);
+				videoStage.scale.set(1);
+				videoStage.position.set(0, 0);
+				sprite.scale.set(1);
+				sprite.position.set(0, 0);
+
+				layoutVideoContent();
+
+				applyZoomTransform({
+					cameraContainer: container,
+					blurFilter: blurFilterRef.current,
+					stageSize: stageSizeRef.current,
+					baseMask: baseMaskRef.current,
+					zoomScale: 1,
+					focusX: DEFAULT_FOCUS.cx,
+					focusY: DEFAULT_FOCUS.cy,
+					motionIntensity: 0,
+					isPlaying: false,
+					motionBlurAmount: zoomMotionBlurRef.current,
+				});
+
+				requestAnimationFrame(() => {
+					const finalApp = appRef.current;
+					if (wasPlaying && video) {
+						video.play().catch((err) => console.warn("video play failed:", err));
+					}
+					if (tickerWasStarted && finalApp?.ticker) {
+						finalApp.ticker.start();
+					}
+				});
+			});
+		}, [pixiReady, videoReady, layoutVideoContent, cropRegion]);
+
+		useEffect(() => {
+			if (!pixiReady || !videoReady) return;
+			const container = containerRef.current;
+			if (!container) return;
+
+			if (typeof ResizeObserver === "undefined") {
+				return;
+			}
+
+			const observer = new ResizeObserver(() => {
+				layoutVideoContent();
+			});
+
+			observer.observe(container);
+			return () => {
+				observer.disconnect();
+			};
+		}, [pixiReady, videoReady, layoutVideoContent]);
+
+		useEffect(() => {
+			if (!pixiReady || !videoReady) return;
+			updateOverlayForRegion(selectedZoom);
+		}, [selectedZoom, pixiReady, videoReady, updateOverlayForRegion]);
+
+		useEffect(() => {
+			if (!pixiReady || !videoReady) return;
+			applyWebcamBubbleLayout(animationStateRef.current.appliedScale || 1);
+		}, [applyWebcamBubbleLayout, pixiReady, videoReady, webcam, webcamVideoPath]);
+
+		useEffect(() => {
+			const webcamVideo = webcamVideoRef.current;
+			if (!webcamVideo || !webcam?.enabled || !webcamVideoPath) {
+				return;
+			}
+
+			const targetTime = clampMediaTimeToDuration(
+				currentTime,
+				Number.isFinite(webcamVideo.duration) ? webcamVideo.duration : null,
+			);
+
+			const activeSpeedRegion = speedRegionsRef.current.find(
+				(region) => targetTime * 1000 >= region.startMs && targetTime * 1000 < region.endMs,
+			);
+			const targetPlaybackRate = activeSpeedRegion ? activeSpeedRegion.speed : 1;
+			if (Math.abs(webcamVideo.playbackRate - targetPlaybackRate) > 0.001) {
+				webcamVideo.playbackRate = targetPlaybackRate;
+			}
+
+			const previousTimelineTime = lastWebcamSyncTimeRef.current;
+			const timelineJumped =
+				previousTimelineTime === null || Math.abs(targetTime - previousTimelineTime) > 0.25;
+			const driftThreshold = isPlaying ? 0.35 : 0.01;
+			if (timelineJumped || Math.abs(webcamVideo.currentTime - targetTime) > driftThreshold) {
+				try {
+					webcamVideo.currentTime = targetTime;
+				} catch {
+					// no-op
+				}
+			}
+
+			if (isPlaying) {
+				const playPromise = webcamVideo.play();
+				if (playPromise) {
+					playPromise.catch((err) => console.warn("webcam play failed:", err));
+				}
+			} else {
+				webcamVideo.pause();
+			}
+
+			lastWebcamSyncTimeRef.current = targetTime;
+		}, [currentTime, isPlaying, webcam, webcamVideoPath]);
+
+		useEffect(() => {
+			lastWebcamSyncTimeRef.current = null;
+		}, [webcamVideoPath]);
+
+		useEffect(() => {
+			const overlayEl = overlayRef.current;
+			if (!overlayEl) return;
+			if (!selectedZoom) {
+				overlayEl.style.cursor = "default";
+				overlayEl.style.pointerEvents = "none";
+				return;
+			}
+			overlayEl.style.cursor = isPlaying ? "not-allowed" : "grab";
+			overlayEl.style.pointerEvents = isPlaying ? "none" : "auto";
+		}, [selectedZoom, isPlaying]);
+
+		useEffect(() => {
+			const container = containerRef.current;
+			if (!container) return;
+
+			let mounted = true;
+			let app: Application | null = null;
+
+			(async () => {
+				let cursorOverlayEnabled = true;
+				try {
+					await preloadCursorAssets();
+				} catch (error) {
+					cursorOverlayEnabled = false;
+					console.warn(
+						"Native cursor assets are unavailable in preview; continuing without cursor overlay.",
+						error,
+					);
+				}
+
+				app = new Application();
+
+				await app.init({
+					width: container.clientWidth,
+					height: container.clientHeight,
+					backgroundAlpha: 0,
+					antialias: true,
+					resolution: window.devicePixelRatio || 1,
+					autoDensity: true,
+				});
+
+				app.ticker.maxFPS = 60;
+
+				if (!mounted) {
+					app.destroy(true, {
+						children: true,
+						texture: false,
+						textureSource: false,
+					});
+					return;
+				}
+
+				appRef.current = app;
+				container.appendChild(app.canvas);
+
+				// Camera container - this will be scaled/positioned for zoom
+				const cameraContainer = new Container();
+				cameraContainerRef.current = cameraContainer;
+				app.stage.addChild(cameraContainer);
+
+				// Video container - holds the masked video sprite
+				const videoContainer = new Container();
+				videoContainerRef.current = videoContainer;
+				cameraContainer.addChild(videoContainer);
+
+				const cursorContainer = new Container();
+				cursorContainerRef.current = cursorContainer;
+				cameraContainer.addChild(cursorContainer);
+
+				// Cursor overlay - rendered above the masked video so it can sit in front
+				// of the content without getting clipped.
+				if (cursorOverlayEnabled) {
+					const cursorOverlay = new PixiCursorOverlay({
+						dotRadius: DEFAULT_CURSOR_CONFIG.dotRadius * cursorSizeRef.current,
+						style: cursorStyleRef.current,
+						smoothingFactor: cursorSmoothingRef.current,
+						motionBlur: cursorMotionBlurRef.current,
+						clickBounce: cursorClickBounceRef.current,
+						clickBounceDuration: cursorClickBounceDurationRef.current,
+						sway: cursorSwayRef.current,
+					});
+					cursorOverlayRef.current = cursorOverlay;
+					cursorContainer.addChild(cursorOverlay.container);
+				} else {
+					cursorOverlayRef.current = null;
+				}
+
+				setPixiReady(true);
+			})().catch((error) => {
+				console.error("Failed to initialize preview renderer:", error);
+				onError(error instanceof Error ? error.message : "Failed to initialize preview renderer");
+			});
+
+			return () => {
+				mounted = false;
+				setPixiReady(false);
+				if (cursorOverlayRef.current) {
+					cursorOverlayRef.current.destroy();
+					cursorOverlayRef.current = null;
+				}
+				if (app && app.renderer) {
+					app.destroy(true, {
+						children: true,
+						texture: false,
+						textureSource: false,
+					});
+				}
+				appRef.current = null;
+				cameraContainerRef.current = null;
+				videoContainerRef.current = null;
+				cursorContainerRef.current = null;
+				videoSpriteRef.current = null;
+			};
+		}, [onError]);
+
+		useEffect(() => {
+			const video = videoRef.current;
+			if (!video) return;
+			video.pause();
+			video.currentTime = 0;
+			allowPlaybackRef.current = false;
+			lockedVideoDimensionsRef.current = null;
+			setVideoReady(false);
+			if (videoReadyRafRef.current) {
+				cancelAnimationFrame(videoReadyRafRef.current);
+				videoReadyRafRef.current = null;
+			}
+		}, [videoPath]);
+
+		useEffect(() => {
+			onPreviewReadyChange?.(videoReady);
+		}, [onPreviewReadyChange, videoReady]);
+
+		useEffect(() => {
+			if (!pixiReady || !videoReady) return;
+
+			const video = videoRef.current;
+			const app = appRef.current;
+			const videoContainer = videoContainerRef.current;
+			const cursorContainer = cursorContainerRef.current;
+			const cameraContainer = cameraContainerRef.current;
+
+			if (!video || !app || !videoContainer || !cursorContainer || !cameraContainer) return;
+			if (video.videoWidth === 0 || video.videoHeight === 0) return;
+
+			const source = VideoSource.from(video);
+			if ("autoPlay" in source) {
+				(source as { autoPlay?: boolean }).autoPlay = false;
+			}
+			if ("autoUpdate" in source) {
+				(source as { autoUpdate?: boolean }).autoUpdate = true;
+			}
+			const videoTexture = Texture.from(source);
+
+			const videoSprite = new Sprite(videoTexture);
+			videoSpriteRef.current = videoSprite;
+
+			const maskGraphics = new Graphics();
+			videoContainer.addChild(videoSprite);
+			videoContainer.addChild(maskGraphics);
+			videoContainer.mask = maskGraphics;
+			maskGraphicsRef.current = maskGraphics;
+			if (cursorOverlayRef.current) {
+				cursorContainer.addChild(cursorOverlayRef.current.container);
+			}
+
+			animationStateRef.current = createPlaybackAnimationState();
+
+			const blurFilter = new BlurFilter();
+			blurFilter.quality = 3;
+			blurFilter.resolution = app.renderer.resolution;
+			blurFilter.blur = 0;
+			const motionBlurFilter = new MotionBlurFilter([0, 0], 5, 0);
+			videoContainer.filters = [blurFilter, motionBlurFilter];
+			blurFilterRef.current = blurFilter;
+			motionBlurFilterRef.current = motionBlurFilter;
+
+			layoutVideoContent();
+			video.pause();
+
+			const { handlePlay, handlePause, handleSeeked, handleSeeking } = createVideoEventHandlers({
+				video,
+				isSeekingRef,
+				isPlayingRef,
+				allowPlaybackRef,
+				currentTimeRef,
+				timeUpdateAnimationRef,
+				onPlayStateChange,
+				onTimeUpdate,
+				trimRegionsRef,
+				speedRegionsRef,
+			});
+
+			video.addEventListener("play", handlePlay);
+			video.addEventListener("pause", handlePause);
+			video.addEventListener("ended", handlePause);
+			video.addEventListener("seeked", handleSeeked);
+			video.addEventListener("seeking", handleSeeking);
+
+			return () => {
+				video.removeEventListener("play", handlePlay);
+				video.removeEventListener("pause", handlePause);
+				video.removeEventListener("ended", handlePause);
+				video.removeEventListener("seeked", handleSeeked);
+				video.removeEventListener("seeking", handleSeeking);
+
+				if (timeUpdateAnimationRef.current) {
+					cancelAnimationFrame(timeUpdateAnimationRef.current);
+				}
+
+				if (videoSprite) {
+					videoContainer.removeChild(videoSprite);
+					videoSprite.destroy();
+				}
+				if (maskGraphics) {
+					videoContainer.removeChild(maskGraphics);
+					maskGraphics.destroy();
+				}
+				videoContainer.mask = null;
+				maskGraphicsRef.current = null;
+				if (blurFilterRef.current) {
+					videoContainer.filters = [];
+					blurFilterRef.current.destroy();
+					blurFilterRef.current = null;
+				}
+				if (motionBlurFilterRef.current) {
+					motionBlurFilterRef.current.destroy();
+					motionBlurFilterRef.current = null;
+				}
+				videoTexture.destroy(false);
+
+				videoSpriteRef.current = null;
+			};
+		}, [pixiReady, videoReady, onTimeUpdate, updateOverlayForRegion]);
+
+		useEffect(() => {
+			if (!pixiReady || !videoReady) return;
+
+			const app = appRef.current;
+			const videoSprite = videoSpriteRef.current;
+			const videoContainer = videoContainerRef.current;
+			if (!app || !videoSprite || !videoContainer) return;
+
+			const applyTransform = (
+				transform: { scale: number; x: number; y: number },
+				focus: ZoomFocus,
+				motionIntensity: number,
+				motionVector: { x: number; y: number },
+			) => {
+				const cameraContainer = cameraContainerRef.current;
+				if (!cameraContainer) return;
+
+				const state = animationStateRef.current;
+
+				const appliedTransform = applyZoomTransform({
+					cameraContainer,
+					blurFilter: blurFilterRef.current,
+					stageSize: stageSizeRef.current,
+					baseMask: baseMaskRef.current,
+					zoomScale: state.scale,
+					zoomProgress: state.progress,
+					focusX: focus.cx,
+					focusY: focus.cy,
+					motionIntensity,
+					motionVector,
+					isPlaying: isPlayingRef.current,
+					motionBlurAmount: zoomMotionBlurRef.current,
+					motionBlurFilter: motionBlurFilterRef.current,
+					transformOverride: transform,
+					motionBlurState: motionBlurStateRef.current,
+					frameTimeMs: performance.now(),
+				});
+
+				state.x = appliedTransform.x;
+				state.y = appliedTransform.y;
+				state.appliedScale = appliedTransform.scale;
+			};
+
+			const ticker = () => {
+				const { region, strength, blendedScale, transition } = findDominantRegion(
+					zoomRegionsRef.current,
+					currentTimeRef.current,
+					{
+						connectZooms: connectZoomsRef.current,
+					},
+				);
+
+				const defaultFocus = DEFAULT_FOCUS;
+				let targetScaleFactor = 1;
+				let targetFocus = defaultFocus;
+				let targetProgress = 0;
+
+				// If a zoom is selected but video is not playing, show default unzoomed view
+				// (the overlay will show where the zoom will be)
+				const selectedId = selectedZoomIdRef.current;
+				const hasSelectedZoom = selectedId !== null;
+				const shouldShowUnzoomedView = hasSelectedZoom && !isPlayingRef.current;
+
+				if (region && strength > 0 && !shouldShowUnzoomedView) {
+					const zoomScale = blendedScale ?? ZOOM_DEPTH_SCALES[region.depth];
+					const regionFocus = region.focus;
+
+					targetScaleFactor = zoomScale;
+					targetFocus = regionFocus;
+					targetProgress = strength;
+
+					if (transition) {
+						const startTransform = computeZoomTransform({
+							stageSize: stageSizeRef.current,
+							baseMask: baseMaskRef.current,
+							zoomScale: transition.startScale,
+							zoomProgress: 1,
+							focusX: transition.startFocus.cx,
+							focusY: transition.startFocus.cy,
+						});
+						const endTransform = computeZoomTransform({
+							stageSize: stageSizeRef.current,
+							baseMask: baseMaskRef.current,
+							zoomScale: transition.endScale,
+							zoomProgress: 1,
+							focusX: transition.endFocus.cx,
+							focusY: transition.endFocus.cy,
+						});
+
+						const interpolatedTransform = {
+							scale:
+								startTransform.scale +
+								(endTransform.scale - startTransform.scale) * transition.progress,
+							x: startTransform.x + (endTransform.x - startTransform.x) * transition.progress,
+							y: startTransform.y + (endTransform.y - startTransform.y) * transition.progress,
+						};
+
+						targetScaleFactor = interpolatedTransform.scale;
+						targetFocus = computeFocusFromTransform({
+							stageSize: stageSizeRef.current,
+							baseMask: baseMaskRef.current,
+							zoomScale: interpolatedTransform.scale,
+							x: interpolatedTransform.x,
+							y: interpolatedTransform.y,
+						});
+						targetProgress = 1;
+					}
+				}
+
+				const state = animationStateRef.current;
+				const prevScale = state.appliedScale;
+				const prevX = state.x;
+				const prevY = state.y;
+
+				state.scale = targetScaleFactor;
+				state.focusX = targetFocus.cx;
+				state.focusY = targetFocus.cy;
+				state.progress = targetProgress;
+
+				const projectedTransform = computeZoomTransform({
+					stageSize: stageSizeRef.current,
+					baseMask: baseMaskRef.current,
+					zoomScale: state.scale,
+					zoomProgress: state.progress,
+					focusX: state.focusX,
+					focusY: state.focusY,
+				});
+
+				const appliedScale =
+					Math.abs(projectedTransform.scale - prevScale) < ZOOM_SCALE_DEADZONE
+						? projectedTransform.scale
+						: projectedTransform.scale;
+				const appliedX =
+					Math.abs(projectedTransform.x - prevX) < ZOOM_TRANSLATION_DEADZONE_PX
+						? projectedTransform.x
+						: projectedTransform.x;
+				const appliedY =
+					Math.abs(projectedTransform.y - prevY) < ZOOM_TRANSLATION_DEADZONE_PX
+						? projectedTransform.y
+						: projectedTransform.y;
+
+				const motionIntensity = Math.max(
+					Math.abs(appliedScale - prevScale),
+					Math.abs(appliedX - prevX) / Math.max(1, stageSizeRef.current.width),
+					Math.abs(appliedY - prevY) / Math.max(1, stageSizeRef.current.height),
+				);
+
+				const motionVector = {
+					x: appliedX - prevX,
+					y: appliedY - prevY,
+				};
+
+				applyTransform(
+					{ scale: appliedScale, x: appliedX, y: appliedY },
+					targetFocus,
+					motionIntensity,
+					motionVector,
+				);
+				applyWebcamBubbleLayout(animationStateRef.current.appliedScale || 1);
+
+				// Update cursor overlay
+				const cursorOverlay = cursorOverlayRef.current;
+				if (cursorOverlay) {
+					const timeMs = currentTimeRef.current;
+					cursorOverlay.update(
+						cursorTelemetryRef.current,
+						timeMs,
+						baseMaskRef.current,
+						showCursorRef.current,
+						!isPlayingRef.current || isSeekingRef.current,
+					);
+				}
+			};
+
+			app.ticker.add(ticker);
+			return () => {
+				if (app && app.ticker) {
+					app.ticker.remove(ticker);
+				}
+			};
+		}, [pixiReady, videoReady, clampFocusToStage, applyWebcamBubbleLayout]);
+
+		useEffect(() => {
+			const overlay = cursorOverlayRef.current;
+			if (!overlay) {
+				return;
+			}
+
+			overlay.setDotRadius(DEFAULT_CURSOR_CONFIG.dotRadius * cursorSize);
+			overlay.setStyle(cursorStyle);
+			overlay.setSmoothingFactor(cursorSmoothing);
+			overlay.setMotionBlur(cursorMotionBlur);
+			overlay.setClickBounce(cursorClickBounce);
+			overlay.setClickBounceDuration(cursorClickBounceDuration);
+			overlay.setSway(cursorSway);
+			overlay.reset();
+		}, [
+			cursorStyle,
+			cursorSize,
+			cursorSmoothing,
+			cursorMotionBlur,
+			cursorClickBounce,
+			cursorClickBounceDuration,
+			cursorSway,
+		]);
+
+		const handleLoadedMetadata = (e: React.SyntheticEvent<HTMLVideoElement, Event>) => {
+			const video = e.currentTarget;
+			onDurationChange(video.duration);
+			const targetTime = clampMediaTimeToDuration(
+				currentTime,
+				Number.isFinite(video.duration) ? video.duration : null,
+			);
+			video.currentTime = targetTime;
+			video.pause();
+			allowPlaybackRef.current = false;
+			currentTimeRef.current = targetTime * 1000;
+
+			if (videoReadyRafRef.current) {
+				cancelAnimationFrame(videoReadyRafRef.current);
+				videoReadyRafRef.current = null;
+			}
+
+			const waitForRenderableFrame = () => {
+				const hasDimensions = video.videoWidth > 0 && video.videoHeight > 0;
+				const hasData = video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA;
+				if (hasDimensions && hasData) {
+					videoReadyRafRef.current = null;
+					setVideoReady(true);
+					return;
+				}
+				videoReadyRafRef.current = requestAnimationFrame(waitForRenderableFrame);
+			};
+
+			videoReadyRafRef.current = requestAnimationFrame(waitForRenderableFrame);
+		};
+
+		const [resolvedWallpaper, setResolvedWallpaper] = useState<string | null>(null);
+		const [resolvedWallpaperKind, setResolvedWallpaperKind] = useState<"image" | "video" | "style">(
+			"image",
+		);
+
+		useEffect(() => {
+			let mounted = true;
+			let revokeResolvedWallpaper = () => {
+				/* no-op */
+			};
+			(async () => {
+				try {
+					if (!wallpaper) {
+						const def = await getAssetPath(DEFAULT_WALLPAPER_RELATIVE_PATH);
+						if (mounted) {
+							setResolvedWallpaper(def);
+							setResolvedWallpaperKind("image");
+						}
+						return;
+					}
+
+					if (
+						wallpaper.startsWith("#") ||
+						wallpaper.startsWith("linear-gradient") ||
+						wallpaper.startsWith("radial-gradient")
+					) {
+						if (mounted) {
+							setResolvedWallpaper(wallpaper);
+							setResolvedWallpaperKind("style");
+						}
+						return;
+					}
+
+					if (isVideoWallpaperSource(wallpaper)) {
+						let videoSrc = wallpaper;
+						if (wallpaper.startsWith("/") && !wallpaper.startsWith("//")) {
+							videoSrc = await getAssetPath(wallpaper.replace(/^\//, ""));
+						}
+						if (mounted) {
+							setResolvedWallpaper(videoSrc);
+							setResolvedWallpaperKind("video");
+						}
+						return;
+					}
+
+					// If it's a data URL (custom uploaded image), use as-is
+					if (wallpaper.startsWith("data:")) {
+						if (mounted) {
+							setResolvedWallpaper(wallpaper);
+							setResolvedWallpaperKind("image");
+						}
+						return;
+					}
+
+					if (
+						wallpaper.startsWith("http") ||
+						wallpaper.startsWith("file://") ||
+						wallpaper.startsWith("/")
+					) {
+						const renderable = await getRenderableAssetUrl(wallpaper);
+						if (mounted) {
+							setResolvedWallpaper(renderable);
+							setResolvedWallpaperKind("image");
+						}
+						return;
+					}
+					const p = await getRenderableAssetUrl(await getAssetPath(wallpaper.replace(/^\//, "")));
+					if (mounted) {
+						setResolvedWallpaper(p);
+						setResolvedWallpaperKind("image");
+					}
+				} catch (err) {
+					if (mounted) {
+						setResolvedWallpaper(wallpaper || DEFAULT_WALLPAPER_PATH);
+						setResolvedWallpaperKind(isVideoWallpaperSource(wallpaper || "") ? "video" : "image");
+					}
+				}
+			})();
+			return () => {
+				mounted = false;
+				revokeResolvedWallpaper();
+			};
+		}, [wallpaper]);
+
+		useEffect(() => {
+			return () => {
+				if (videoReadyRafRef.current) {
+					cancelAnimationFrame(videoReadyRafRef.current);
+					videoReadyRafRef.current = null;
+				}
+			};
+		}, []);
+
+		const isImageUrl =
+			resolvedWallpaperKind === "image" &&
+			Boolean(
+				resolvedWallpaper &&
+					(resolvedWallpaper.startsWith("file://") ||
+						resolvedWallpaper.startsWith("http") ||
+						resolvedWallpaper.startsWith("/") ||
+						resolvedWallpaper.startsWith("data:")),
+			);
+		const backgroundStyle = isImageUrl
+			? { backgroundImage: `url(${resolvedWallpaper || ""})` }
+			: resolvedWallpaperKind === "video"
+				? {}
+				: { background: resolvedWallpaper || "" };
+
+		const nativeAspectRatio = (() => {
+			const locked = lockedVideoDimensionsRef.current;
+			if (locked) {
+				return getEffectiveNativeAspectRatio(locked, cropRegion);
+			}
+			const video = videoRef.current;
+			if (video && video.videoHeight > 0 && video.videoWidth > 0) {
+				return getEffectiveNativeAspectRatio(
+					{
+						width: video.videoWidth,
+						height: video.videoHeight,
+					},
+					cropRegion,
+				);
+			}
+			return 16 / 9;
+		})();
+
+		return (
+			<div
+				className="relative rounded-sm overflow-hidden"
+				style={{
+					width: "100%",
+					aspectRatio: formatAspectRatioForCSS(aspectRatio, nativeAspectRatio),
+				}}
+			>
+				{/* Background layer */}
+				{resolvedWallpaperKind === "video" && resolvedWallpaper ? (
+					<video
+						key={resolvedWallpaper}
+						ref={bgVideoRef}
+						className="absolute inset-0 h-full w-full object-cover"
+						src={resolvedWallpaper}
+						muted
+						loop
+						playsInline
+						style={{
+							filter: backgroundBlur > 0 ? `blur(${backgroundBlur}px)` : "none",
+						}}
+					/>
+				) : (
+					<div
+						className="absolute inset-0 bg-cover bg-center"
+						style={{
+							...backgroundStyle,
+							filter: backgroundBlur > 0 ? `blur(${backgroundBlur}px)` : "none",
+						}}
+					/>
+				)}
+				<div
+					ref={containerRef}
+					className="absolute inset-0"
+					style={{
+						filter:
+							showShadow && shadowIntensity > 0
+								? `drop-shadow(0 ${shadowIntensity * 12}px ${shadowIntensity * 48}px rgba(0,0,0,${shadowIntensity * 0.7})) drop-shadow(0 ${shadowIntensity * 4}px ${shadowIntensity * 16}px rgba(0,0,0,${shadowIntensity * 0.5})) drop-shadow(0 ${shadowIntensity * 2}px ${shadowIntensity * 8}px rgba(0,0,0,${shadowIntensity * 0.3}))`
+								: "none",
+					}}
+				/>
+				{/* Only render overlay after PIXI and video are fully initialized */}
+				{pixiReady && videoReady && (
+					<div
+						ref={overlayRef}
+						className="absolute inset-0 select-none"
+						style={{ pointerEvents: "none" }}
+						onPointerDown={handleOverlayPointerDown}
+						onPointerMove={handleOverlayPointerMove}
+						onPointerUp={handleOverlayPointerUp}
+						onPointerLeave={handleOverlayPointerLeave}
+					>
+						<div
+							ref={focusIndicatorRef}
+							className="absolute rounded-md border border-[#2563EB]/80 bg-[#2563EB]/20 shadow-[0_0_0_1px_rgba(37,99,235,0.35)]"
+							style={{ display: "none", pointerEvents: "none" }}
+						/>
+						{webcam && webcamVideoPath ? (
+							<div
+								ref={webcamBubbleRef}
+								className="absolute"
+								style={{
+									display: webcam.enabled ? "block" : "none",
+									pointerEvents: "none",
+								}}
+							>
+								<div
+									ref={webcamBubbleInnerRef}
+									className="h-full w-full overflow-hidden bg-black/80"
+								>
+									<video
+										ref={webcamVideoRef}
+										src={webcamVideoPath}
+										className="h-full w-full object-cover"
+										muted
+										playsInline
+										preload="auto"
+										style={{ transform: webcam.mirror ? "scaleX(-1)" : undefined }}
+									/>
+								</div>
+							</div>
+						) : null}
+						{activeCaptionLayout && autoCaptionSettings ? (
+							<div
+								className="pointer-events-none absolute inset-x-0 flex justify-center"
+								style={{
+									bottom: `${autoCaptionSettings.bottomOffset}%`,
+								}}
+							>
+								<div
+									style={{
+										maxWidth: `${autoCaptionSettings.maxWidth}%`,
+										opacity: activeCaptionLayout.opacity,
+										transform: `translateY(${activeCaptionLayout.translateY}px) scale(${activeCaptionLayout.scale})`,
+										transformOrigin: "center bottom",
+										filter: "drop-shadow(0 12px 30px rgba(0, 0, 0, 0.28))",
+									}}
+								>
+									<div
+										ref={captionBoxRef}
+										style={{
+											backgroundColor: `rgba(0, 0, 0, ${autoCaptionSettings.backgroundOpacity})`,
+											fontFamily: getDefaultCaptionFontFamily(),
+											fontSize: `${getCaptionScaledFontSize(
+												autoCaptionSettings.fontSize,
+												overlayRef.current?.clientWidth || 960,
+												autoCaptionSettings.maxWidth,
+											)}px`,
+											lineHeight: CAPTION_LINE_HEIGHT,
+											textAlign: "center",
+											fontWeight: CAPTION_FONT_WEIGHT,
+											padding: `${
+												getCaptionPadding(
+													getCaptionScaledFontSize(
+														autoCaptionSettings.fontSize,
+														overlayRef.current?.clientWidth || 960,
+														autoCaptionSettings.maxWidth,
+													),
+												).y
+											}px ${
+												getCaptionPadding(
+													getCaptionScaledFontSize(
+														autoCaptionSettings.fontSize,
+														overlayRef.current?.clientWidth || 960,
+														autoCaptionSettings.maxWidth,
+													),
+												).x
+											}px`,
+											borderRadius: `${getCaptionScaledRadius(
+												autoCaptionSettings.boxRadius,
+												getCaptionScaledFontSize(
+													autoCaptionSettings.fontSize,
+													overlayRef.current?.clientWidth || 960,
+													autoCaptionSettings.maxWidth,
+												),
+											)}px`,
+											boxSizing: "border-box",
+										}}
+									>
+										{activeCaptionLayout.visibleLines.map((line) => (
+											<div
+												key={`${activeCaptionLayout.blockKey}-${line.startWordIndex}`}
+												style={{
+													display: "flex",
+													justifyContent: "center",
+													flexWrap: "nowrap",
+													whiteSpace: "nowrap",
+												}}
+											>
+												{line.words.map((word) => {
+													const visualState = getCaptionWordVisualState(
+														activeCaptionLayout.hasWordTimings,
+														word.state,
+													);
+
+													return (
+														<span
+															key={`${activeCaptionLayout.blockKey}-${word.index}`}
+															style={{
+																display: "inline-block",
+																whiteSpace: "pre",
+																color: visualState.isInactive
+																	? autoCaptionSettings.inactiveTextColor
+																	: autoCaptionSettings.textColor,
+																opacity: visualState.opacity,
+															}}
+														>
+															{`${word.leadingSpace ? " " : ""}${word.text}`}
+														</span>
+													);
+												})}
+											</div>
+										))}
+									</div>
+								</div>
+							</div>
+						) : null}
+						{(() => {
+							const filtered = (annotationRegions || []).filter((annotation) => {
+								if (typeof annotation.startMs !== "number" || typeof annotation.endMs !== "number")
+									return false;
+
+								if (annotation.id === selectedAnnotationId) return true;
+
+								const timeMs = Math.round(currentTime * 1000);
+								return timeMs >= annotation.startMs && timeMs <= annotation.endMs;
+							});
+
+							// Sort by z-index (lowest to highest) so higher z-index renders on top
+							const sorted = [...filtered].sort((a, b) => a.zIndex - b.zIndex);
+
+							// Handle click-through cycling: when clicking same annotation, cycle to next
+							const handleAnnotationClick = (clickedId: string) => {
+								if (!onSelectAnnotation) return;
+
+								// If clicking on already selected annotation and there are multiple overlapping
+								if (clickedId === selectedAnnotationId && sorted.length > 1) {
+									// Find current index and cycle to next
+									const currentIndex = sorted.findIndex((a) => a.id === clickedId);
+									const nextIndex = (currentIndex + 1) % sorted.length;
+									onSelectAnnotation(sorted[nextIndex].id);
+								} else {
+									// First click or clicking different annotation
+									onSelectAnnotation(clickedId);
+								}
+							};
+
+							return sorted.map((annotation) => (
+								<AnnotationOverlay
+									key={annotation.id}
+									annotation={annotation}
+									isSelected={annotation.id === selectedAnnotationId}
+									containerWidth={overlayRef.current?.clientWidth || 800}
+									containerHeight={overlayRef.current?.clientHeight || 600}
+									onPositionChange={(id, position) => onAnnotationPositionChange?.(id, position)}
+									onSizeChange={(id, size) => onAnnotationSizeChange?.(id, size)}
+									onClick={handleAnnotationClick}
+									zIndex={annotation.zIndex}
+									isSelectedBoost={annotation.id === selectedAnnotationId}
+								/>
+							));
+						})()}
+					</div>
+				)}
+				<video
+					ref={videoRef}
+					src={videoPath}
+					className="hidden"
+					preload="metadata"
+					playsInline
+					onLoadedMetadata={handleLoadedMetadata}
+					onDurationChange={(e) => {
+						onDurationChange(e.currentTarget.duration);
+					}}
+					onError={() => onError("Failed to load video")}
+				/>
+			</div>
+		);
+	},
 );
 
 VideoPlayback.displayName = "VideoPlayback";
diff --git a/src/components/video-editor/types.ts b/src/components/video-editor/types.ts
index 730c3f12..c32b6f84 100644
--- a/src/components/video-editor/types.ts
+++ b/src/components/video-editor/types.ts
@@ -172,7 +172,7 @@ export function trimsToClips(trims: TrimRegion[], totalDurationMs: number): Clip
 	return clips;
 }
 
-export type AnnotationType = "text" | "image" | "figure";
+export type AnnotationType = "text" | "image" | "figure" | "blur";
 
 export type ArrowDirection =
 	| "up"
@@ -240,6 +240,7 @@ export interface AnnotationRegion {
 	style: AnnotationTextStyle;
 	zIndex: number;
 	figureData?: FigureData;
+	blurIntensity?: number;
 }
 
 export const DEFAULT_ANNOTATION_POSITION: AnnotationPosition = {
diff --git a/src/lib/exporter/annotationRenderer.ts b/src/lib/exporter/annotationRenderer.ts
index 0df4541c..02d688f7 100644
--- a/src/lib/exporter/annotationRenderer.ts
+++ b/src/lib/exporter/annotationRenderer.ts
@@ -1,341 +1,380 @@
-import type { AnnotationRegion, ArrowDirection } from '@/components/video-editor/types';
+import type { AnnotationRegion, ArrowDirection } from "@/components/video-editor/types";
 
 // SVG path data for each arrow direction
 const ARROW_PATHS: Record<ArrowDirection, string[]> = {
-  'up': [
-    'M 50 20 L 50 80',
-    'M 50 20 L 35 35',
-    'M 50 20 L 65 35',
-  ],
-  'down': [
-    'M 50 20 L 50 80',
-    'M 50 80 L 35 65',
-    'M 50 80 L 65 65',
-  ],
-  'left': [
-    'M 80 50 L 20 50',
-    'M 20 50 L 35 35',
-    'M 20 50 L 35 65',
-  ],
-  'right': [
-    'M 20 50 L 80 50',
-    'M 80 50 L 65 35',
-    'M 80 50 L 65 65',
-  ],
-  'up-right': [
-    'M 25 75 L 75 25',
-    'M 75 25 L 60 30',
-    'M 75 25 L 70 40',
-  ],
-  'up-left': [
-    'M 75 75 L 25 25',
-    'M 25 25 L 40 30',
-    'M 25 25 L 30 40',
-  ],
-  'down-right': [
-    'M 25 25 L 75 75',
-    'M 75 75 L 70 60',
-    'M 75 75 L 60 70',
-  ],
-  'down-left': [
-    'M 75 25 L 25 75',
-    'M 25 75 L 30 60',
-    'M 25 75 L 40 70',
-  ],
+	up: ["M 50 20 L 50 80", "M 50 20 L 35 35", "M 50 20 L 65 35"],
+	down: ["M 50 20 L 50 80", "M 50 80 L 35 65", "M 50 80 L 65 65"],
+	left: ["M 80 50 L 20 50", "M 20 50 L 35 35", "M 20 50 L 35 65"],
+	right: ["M 20 50 L 80 50", "M 80 50 L 65 35", "M 80 50 L 65 65"],
+	"up-right": ["M 25 75 L 75 25", "M 75 25 L 60 30", "M 75 25 L 70 40"],
+	"up-left": ["M 75 75 L 25 25", "M 25 25 L 40 30", "M 25 25 L 30 40"],
+	"down-right": ["M 25 25 L 75 75", "M 75 75 L 70 60", "M 75 75 L 60 70"],
+	"down-left": ["M 75 25 L 25 75", "M 25 75 L 30 60", "M 25 75 L 40 70"],
 };
 
-function parseSvgPath(pathString: string, scaleX: number, scaleY: number): Array<{ cmd: string; args: number[] }> {
-  const commands: Array<{ cmd: string; args: number[] }> = [];
-  const parts = pathString.trim().split(/\s+/);
-  
-  let i = 0;
-  while (i < parts.length) {
-    const cmd = parts[i];
-    if (cmd === 'M' || cmd === 'L') {
-      const x = parseFloat(parts[i + 1]) * scaleX;
-      const y = parseFloat(parts[i + 2]) * scaleY;
-      commands.push({ cmd, args: [x, y] });
-      i += 3;
-    } else {
-      i++;
-    }
-  }
-  
-  return commands;
-}
+function parseSvgPath(
+	pathString: string,
+	scaleX: number,
+	scaleY: number,
+): Array<{ cmd: string; args: number[] }> {
+	const commands: Array<{ cmd: string; args: number[] }> = [];
+	const parts = pathString.trim().split(/\s+/);
+
+	let i = 0;
+	while (i < parts.length) {
+		const cmd = parts[i];
+		if (cmd === "M" || cmd === "L") {
+			const x = parseFloat(parts[i + 1]) * scaleX;
+			const y = parseFloat(parts[i + 2]) * scaleY;
+			commands.push({ cmd, args: [x, y] });
+			i += 3;
+		} else {
+			i++;
+		}
+	}
 
+	return commands;
+}
 
 function renderArrow(
-  ctx: CanvasRenderingContext2D,
-  direction: ArrowDirection,
-  color: string,
-  strokeWidth: number,
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  _scaleFactor: number
+	ctx: CanvasRenderingContext2D,
+	direction: ArrowDirection,
+	color: string,
+	strokeWidth: number,
+	x: number,
+	y: number,
+	width: number,
+	height: number,
+	_scaleFactor: number,
 ) {
-  const paths = ARROW_PATHS[direction];
-  if (!paths) return;
-
-  ctx.save();
-  ctx.translate(x, y);
-  
-  const padding = 8 * _scaleFactor;
-  const availableWidth = Math.max(0, width - padding * 2);
-  const availableHeight = Math.max(0, height - padding * 2);
-
-  const scale = Math.min(availableWidth / 100, availableHeight / 100);
-  
-  const offsetX = padding + (availableWidth - 100 * scale) / 2;
-  const offsetY = padding + (availableHeight - 100 * scale) / 2;
-  
-  // Apply centering offset
-  ctx.translate(offsetX, offsetY);
-  
-  // Apply shadow filter
-  ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
-  ctx.shadowBlur = 8 * scale; 
-  ctx.shadowOffsetX = 0;
-  ctx.shadowOffsetY = 4 * scale; 
-  
-  ctx.strokeStyle = color;
-  ctx.lineWidth = strokeWidth * scale;
-  ctx.lineCap = 'round';
-  ctx.lineJoin = 'round';
-  
-  // Draw all paths as a single shape to avoid overlapping shadows/strokes
-  ctx.beginPath();
-  
-  for (const pathString of paths) {
-    const commands = parseSvgPath(pathString, scale, scale);
-    
-
-    for (const { cmd, args } of commands) {
-      if (cmd === 'M') {
-        ctx.moveTo(args[0], args[1]);
-      } else if (cmd === 'L') {
-        ctx.lineTo(args[0], args[1]);
-      }
-    }
-  }
-  
-  ctx.stroke();
-  
-  ctx.restore();
+	const paths = ARROW_PATHS[direction];
+	if (!paths) return;
+
+	ctx.save();
+	ctx.translate(x, y);
+
+	const padding = 8 * _scaleFactor;
+	const availableWidth = Math.max(0, width - padding * 2);
+	const availableHeight = Math.max(0, height - padding * 2);
+
+	const scale = Math.min(availableWidth / 100, availableHeight / 100);
+
+	const offsetX = padding + (availableWidth - 100 * scale) / 2;
+	const offsetY = padding + (availableHeight - 100 * scale) / 2;
+
+	// Apply centering offset
+	ctx.translate(offsetX, offsetY);
+
+	// Apply shadow filter
+	ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
+	ctx.shadowBlur = 8 * scale;
+	ctx.shadowOffsetX = 0;
+	ctx.shadowOffsetY = 4 * scale;
+
+	ctx.strokeStyle = color;
+	ctx.lineWidth = strokeWidth * scale;
+	ctx.lineCap = "round";
+	ctx.lineJoin = "round";
+
+	// Draw all paths as a single shape to avoid overlapping shadows/strokes
+	ctx.beginPath();
+
+	for (const pathString of paths) {
+		const commands = parseSvgPath(pathString, scale, scale);
+
+		for (const { cmd, args } of commands) {
+			if (cmd === "M") {
+				ctx.moveTo(args[0], args[1]);
+			} else if (cmd === "L") {
+				ctx.lineTo(args[0], args[1]);
+			}
+		}
+	}
+
+	ctx.stroke();
+
+	ctx.restore();
 }
 
 function renderText(
-  ctx: CanvasRenderingContext2D,
-  annotation: AnnotationRegion,
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  scaleFactor: number
+	ctx: CanvasRenderingContext2D,
+	annotation: AnnotationRegion,
+	x: number,
+	y: number,
+	width: number,
+	height: number,
+	scaleFactor: number,
 ) {
-  const style = annotation.style;
-  
-  ctx.save();
-
-  // Clip text to annotation box bounds (matches editor's overflow: hidden)
-  ctx.beginPath();
-  ctx.rect(x, y, width, height);
-  ctx.clip();
-
-  const fontWeight = style.fontWeight === 'bold' ? 'bold' : 'normal';
-  const fontStyle = style.fontStyle === 'italic' ? 'italic' : 'normal';
-  const scaledFontSize = style.fontSize * scaleFactor;
-  ctx.font = `${fontStyle} ${fontWeight} ${scaledFontSize}px ${style.fontFamily}`;
-  ctx.textBaseline = 'middle';
-  
-  const containerPadding = 8 * scaleFactor;
-  
-  let textX = x;
-  let textY = y + height / 2;
-  
-  if (style.textAlign === 'center') {
-    textX = x + width / 2;
-    ctx.textAlign = 'center';
-  } else if (style.textAlign === 'right') {
-    textX = x + width - containerPadding;
-    ctx.textAlign = 'right';
-  } else {
-    textX = x + containerPadding;
-    ctx.textAlign = 'left';
-  }
-  
-  const availableWidth = width - containerPadding * 2;
-  const rawLines = annotation.content.split('\n');
-  const lines: string[] = [];
-  for (const rawLine of rawLines) {
-    if (!rawLine) {
-      lines.push('');
-      continue;
-    }
-    const words = rawLine.split(/(\s+)/);
-    let current = '';
-    for (const word of words) {
-      const test = current + word;
-      if (current && ctx.measureText(test).width > availableWidth) {
-        lines.push(current);
-        current = word.trimStart();
-      } else {
-        current = test;
-      }
-    }
-    if (current) lines.push(current);
-  }
-  const lineHeight = scaledFontSize * 1.4;
-
-  const startY = textY - ((lines.length - 1) * lineHeight) / 2;
-  
-  lines.forEach((line, index) => {
-    const currentY = startY + index * lineHeight;
-    
-    if (style.backgroundColor && style.backgroundColor !== 'transparent') {
-      const metrics = ctx.measureText(line);
-      const verticalPadding = scaledFontSize * 0.1;
-      const horizontalPadding = scaledFontSize * 0.2;
-      const borderRadius = 4 * scaleFactor;
-      
-      let bgX = textX - horizontalPadding;
-      const bgWidth = metrics.width + horizontalPadding * 2;
-      
-      const contentHeight = scaledFontSize * 1.4;
-      const bgHeight = contentHeight + verticalPadding * 2;
-      const bgY = currentY - bgHeight / 2;
-      
-      if (style.textAlign === 'center') {
-        bgX = textX - bgWidth / 2;
-      } else if (style.textAlign === 'right') {
-        bgX = textX - bgWidth;
-      }
-      
-      ctx.fillStyle = style.backgroundColor;
-      ctx.beginPath();
-      ctx.roundRect(bgX, bgY, bgWidth, bgHeight, borderRadius);
-      ctx.fill();
-    }
-    
-    ctx.fillStyle = style.color;
-    ctx.fillText(line, textX, currentY);
-    
-    if (style.textDecoration === 'underline') {
-      const metrics = ctx.measureText(line);
-      let underlineX = textX;
-      const underlineY = currentY + scaledFontSize * 0.15;
-      
-      if (style.textAlign === 'center') {
-        underlineX = textX - metrics.width / 2;
-      } else if (style.textAlign === 'right') {
-        underlineX = textX - metrics.width;
-      }
-      
-      ctx.strokeStyle = style.color;
-      ctx.lineWidth = Math.max(1, scaledFontSize / 16);
-      ctx.beginPath();
-      ctx.moveTo(underlineX, underlineY);
-      ctx.lineTo(underlineX + metrics.width, underlineY);
-      ctx.stroke();
-    }
-  });
-  
-  ctx.restore();
+	const style = annotation.style;
+
+	ctx.save();
+
+	// Clip text to annotation box bounds (matches editor's overflow: hidden)
+	ctx.beginPath();
+	ctx.rect(x, y, width, height);
+	ctx.clip();
+
+	const fontWeight = style.fontWeight === "bold" ? "bold" : "normal";
+	const fontStyle = style.fontStyle === "italic" ? "italic" : "normal";
+	const scaledFontSize = style.fontSize * scaleFactor;
+	ctx.font = `${fontStyle} ${fontWeight} ${scaledFontSize}px ${style.fontFamily}`;
+	ctx.textBaseline = "middle";
+
+	const containerPadding = 8 * scaleFactor;
+
+	let textX = x;
+	let textY = y + height / 2;
+
+	if (style.textAlign === "center") {
+		textX = x + width / 2;
+		ctx.textAlign = "center";
+	} else if (style.textAlign === "right") {
+		textX = x + width - containerPadding;
+		ctx.textAlign = "right";
+	} else {
+		textX = x + containerPadding;
+		ctx.textAlign = "left";
+	}
+
+	const availableWidth = width - containerPadding * 2;
+	const rawLines = annotation.content.split("\n");
+	const lines: string[] = [];
+	for (const rawLine of rawLines) {
+		if (!rawLine) {
+			lines.push("");
+			continue;
+		}
+		const words = rawLine.split(/(\s+)/);
+		let current = "";
+		for (const word of words) {
+			const test = current + word;
+			if (current && ctx.measureText(test).width > availableWidth) {
+				lines.push(current);
+				current = word.trimStart();
+			} else {
+				current = test;
+			}
+		}
+		if (current) lines.push(current);
+	}
+	const lineHeight = scaledFontSize * 1.4;
+
+	const startY = textY - ((lines.length - 1) * lineHeight) / 2;
+
+	lines.forEach((line, index) => {
+		const currentY = startY + index * lineHeight;
+
+		if (style.backgroundColor && style.backgroundColor !== "transparent") {
+			const metrics = ctx.measureText(line);
+			const verticalPadding = scaledFontSize * 0.1;
+			const horizontalPadding = scaledFontSize * 0.2;
+			const borderRadius = 4 * scaleFactor;
+
+			let bgX = textX - horizontalPadding;
+			const bgWidth = metrics.width + horizontalPadding * 2;
+
+			const contentHeight = scaledFontSize * 1.4;
+			const bgHeight = contentHeight + verticalPadding * 2;
+			const bgY = currentY - bgHeight / 2;
+
+			if (style.textAlign === "center") {
+				bgX = textX - bgWidth / 2;
+			} else if (style.textAlign === "right") {
+				bgX = textX - bgWidth;
+			}
+
+			ctx.fillStyle = style.backgroundColor;
+			ctx.beginPath();
+			if (ctx.roundRect) {
+				ctx.roundRect(bgX, bgY, bgWidth, bgHeight, borderRadius);
+			} else {
+				ctx.rect(bgX, bgY, bgWidth, bgHeight);
+			}
+			ctx.fill();
+		}
+
+		ctx.fillStyle = style.color;
+		ctx.fillText(line, textX, currentY);
+
+		if (style.textDecoration === "underline") {
+			const metrics = ctx.measureText(line);
+			let underlineX = textX;
+			const underlineY = currentY + scaledFontSize * 0.15;
+
+			if (style.textAlign === "center") {
+				underlineX = textX - metrics.width / 2;
+			} else if (style.textAlign === "right") {
+				underlineX = textX - metrics.width;
+			}
+
+			ctx.strokeStyle = style.color;
+			ctx.lineWidth = Math.max(1, scaledFontSize / 16);
+			ctx.beginPath();
+			ctx.moveTo(underlineX, underlineY);
+			ctx.lineTo(underlineX + metrics.width, underlineY);
+			ctx.stroke();
+		}
+	});
+
+	ctx.restore();
 }
 
 async function renderImage(
-  ctx: CanvasRenderingContext2D,
-  annotation: AnnotationRegion,
-  x: number,
-  y: number,
-  width: number,
-  height: number
+	ctx: CanvasRenderingContext2D,
+	annotation: AnnotationRegion,
+	x: number,
+	y: number,
+	width: number,
+	height: number,
 ): Promise<void> {
-  if (!annotation.content || !annotation.content.startsWith('data:image')) {
-    return;
-  }
-  
-  return new Promise((resolve) => {
-    const img = new Image();
-    img.onload = () => {
-      // Preserve aspect ratio - contain the image within the bounds
-      const imgAspect = img.width / img.height;
-      const boxAspect = width / height;
-      
-      let drawWidth = width;
-      let drawHeight = height;
-      let drawX = x;
-      let drawY = y;
-      
-      if (imgAspect > boxAspect) {
-
-        drawHeight = width / imgAspect;
-        drawY = y + (height - drawHeight) / 2;
-      } else {
-        drawWidth = height * imgAspect;
-        drawX = x + (width - drawWidth) / 2;
-      }
-      
-      ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
-      resolve();
-    };
-    img.onerror = () => {
-      console.error('[AnnotationRenderer] Failed to load image annotation');
-      resolve();
-    };
-    img.src = annotation.content;
-  });
+	if (!annotation.content || !annotation.content.startsWith("data:image")) {
+		return;
+	}
+
+	return new Promise((resolve) => {
+		const img = new Image();
+		img.onload = () => {
+			// Preserve aspect ratio - contain the image within the bounds
+			const imgAspect = img.width / img.height;
+			const boxAspect = width / height;
+
+			let drawWidth = width;
+			let drawHeight = height;
+			let drawX = x;
+			let drawY = y;
+
+			if (imgAspect > boxAspect) {
+				drawHeight = width / imgAspect;
+				drawY = y + (height - drawHeight) / 2;
+			} else {
+				drawWidth = height * imgAspect;
+				drawX = x + (width - drawWidth) / 2;
+			}
+
+			ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
+			resolve();
+		};
+		img.onerror = () => {
+			console.error("[AnnotationRenderer] Failed to load image annotation");
+			resolve();
+		};
+		img.src = annotation.content;
+	});
 }
 
 export async function renderAnnotations(
-  ctx: CanvasRenderingContext2D,
-  annotations: AnnotationRegion[],
-  canvasWidth: number,
-  canvasHeight: number,
-  currentTimeMs: number,
-  scaleFactor: number = 1.0
+	ctx: CanvasRenderingContext2D,
+	annotations: AnnotationRegion[],
+	canvasWidth: number,
+	canvasHeight: number,
+	currentTimeMs: number,
+	scaleFactor: number = 1.0,
 ): Promise<void> {
-  // Filter active annotations at current time
-  const activeAnnotations = annotations.filter(
-    (ann) => currentTimeMs >= ann.startMs && currentTimeMs <= ann.endMs
-  );
-  
-  // Sort by z-index (lower first, so higher z-index draws on top)
-  const sortedAnnotations = [...activeAnnotations].sort((a, b) => a.zIndex - b.zIndex);
-  
-  for (const annotation of sortedAnnotations) {
-    const x = (annotation.position.x / 100) * canvasWidth;
-    const y = (annotation.position.y / 100) * canvasHeight;
-    const width = (annotation.size.width / 100) * canvasWidth;
-    const height = (annotation.size.height / 100) * canvasHeight;
-    
-    switch (annotation.type) {
-      case 'text':
-        renderText(ctx, annotation, x, y, width, height, scaleFactor);
-        break;
-        
-      case 'image':
-        await renderImage(ctx, annotation, x, y, width, height);
-        break;
-        
-      case 'figure':
-        if (annotation.figureData) {
-          renderArrow(
-            ctx,
-            annotation.figureData.arrowDirection,
-            annotation.figureData.color,
-            annotation.figureData.strokeWidth,
-            x,
-            y,
-            width,
-            height,
-            scaleFactor
-          );
-        }
-        break;
-    }
-  }
+	// Filter active annotations at current time
+	const activeAnnotations = annotations.filter(
+		(ann) => currentTimeMs >= ann.startMs && currentTimeMs <= ann.endMs,
+	);
+
+	// Sort by z-index (lower first, so higher z-index draws on top)
+	const sortedAnnotations = [...activeAnnotations].sort((a, b) => a.zIndex - b.zIndex);
+
+	for (const annotation of sortedAnnotations) {
+		const x = (annotation.position.x / 100) * canvasWidth;
+		const y = (annotation.position.y / 100) * canvasHeight;
+		const width = (annotation.size.width / 100) * canvasWidth;
+		const height = (annotation.size.height / 100) * canvasHeight;
+
+		switch (annotation.type) {
+			case "text":
+				renderText(ctx, annotation, x, y, width, height, scaleFactor);
+				break;
+
+			case "image":
+				await renderImage(ctx, annotation, x, y, width, height);
+				break;
+
+			case "figure":
+				if (annotation.figureData) {
+					renderArrow(
+						ctx,
+						annotation.figureData.arrowDirection,
+						annotation.figureData.color,
+						annotation.figureData.strokeWidth,
+						x,
+						y,
+						width,
+						height,
+						scaleFactor,
+					);
+				}
+				break;
+
+			case "blur":
+				renderBlur(ctx, annotation, x, y, width, height, scaleFactor);
+				break;
+		}
+	}
 }
 
+function renderBlur(
+	ctx: CanvasRenderingContext2D,
+	annotation: AnnotationRegion,
+	x: number,
+	y: number,
+	width: number,
+	height: number,
+	scaleFactor: number,
+) {
+	// Get intensity scaled to canvas resolution
+	const intensity = annotation.blurIntensity ?? 12;
+	if (intensity <= 0 || width <= 0 || height <= 0) return;
+
+	ctx.save();
+	try {
+		// Determine bounds and ensure they are within canvas to avoid ImageData errors
+		const srcX = Math.max(0, x);
+		const srcY = Math.max(0, y);
+		const srcWidth = Math.min(x + width, ctx.canvas.width) - srcX;
+		const srcHeight = Math.min(y + height, ctx.canvas.height) - srcY;
+
+		if (srcWidth <= 0 || srcHeight <= 0) {
+			ctx.restore();
+			return;
+		}
+
+		// Capture the current canvas region precisely for this intersection
+		const imageData = ctx.getImageData(srcX, srcY, srcWidth, srcHeight);
+
+		let offscreen: HTMLCanvasElement | OffscreenCanvas;
+		if (typeof document !== "undefined") {
+			offscreen = document.createElement("canvas");
+		} else {
+			offscreen = new OffscreenCanvas(srcWidth, srcHeight);
+		}
+		offscreen.width = srcWidth;
+		offscreen.height = srcHeight;
+
+		const offCtx = offscreen.getContext("2d");
+		if (!offCtx) {
+			throw new Error("Failed to get offscreen 2d context for blur");
+		}
+		offCtx.putImageData(imageData, 0, 0);
+
+		// Create rounded rect clipping path (matches UI's rounded-lg approx 8px)
+		const radius = 8 * scaleFactor;
+		ctx.beginPath();
+		if (ctx.roundRect) {
+			ctx.roundRect(x, y, width, height, radius);
+		} else {
+			ctx.rect(x, y, width, height);
+		}
+		ctx.clip();
+
+		// Apply the blur filter and draw the captured region back at its source position
+		ctx.filter = `blur(${intensity}px)`;
+		ctx.drawImage(offscreen, srcX, srcY);
+	} catch (err) {
+		console.warn("[AnnotationRenderer] Blur annotation render failed:", err);
+	}
+	ctx.restore();
+}